material specific decorations generalized and moved to QskTextFieldSkinlet

from master
2025-05-15 14:00:07 +02:00 · 2025-05-15 11:46:15 +02:00 · 2025-05-15 11:41:27 +02:00 · 2025-03-17 11:37:06 +01:00 · 2025-03-14 14:06:38 +01:00 · 2025-03-14 10:48:27 +01:00
39 changed files with 1255 additions and 299 deletions
--- a/.github/workflows/cmake.yml
+++ b/.github/workflows/cmake.yml
@ -202,7 +202,6 @@ jobs:
          install-deps: "true"
          modules: "qtwebengine"
          cached: ${{ steps.cache-qt-5-15.outputs.cache-hit }}
-          setup-python: "false"
          tools: ""
          set-env: "true"
          tools-only: "false"
@ -216,7 +215,6 @@ jobs:
          install-deps: "true"
          modules: "qtwebengine qtshadertools"
          cached: ${{ steps.cache-qt-6-2.outputs.cache-hit }}
-          setup-python: "false"
          tools: ""
          set-env: "true"
          tools-only: "false"
--- a/cmake/QskBuildFunctions.cmake
+++ b/cmake/QskBuildFunctions.cmake
@ -149,7 +149,7 @@ function(qsk_add_example target)

 endfunction()

-function(qsk_add_shaders target)
+function(qsk_add_shaders target shader_name)

    cmake_parse_arguments( arg "" "" "FILES" ${ARGN} )

@ -160,7 +160,7 @@ function(qsk_add_shaders target)
        list(APPEND outfiles "${qsbname}.qsb")
    endforeach()

-    qt6_add_shaders( ${target} "qskshaders" BATCHABLE PRECOMPILE QUIET
+    qt6_add_shaders( ${target} ${shader_name} BATCHABLE PRECOMPILE QUIET
        PREFIX "/qskinny/shaders" ${ARGV} OUTPUTS ${outfiles} )

    # pass on OUTPUT_TARGETS to the caller of this function
--- a/designsystems/fluent2/CMakeLists.txt
+++ b/designsystems/fluent2/CMakeLists.txt
@ -7,15 +7,10 @@ list(APPEND HEADERS
    QskFluent2Global.h QskFluent2Theme.h QskFluent2SkinFactory.h
 )

-list(APPEND PRIVATE_HEADERS
-    QskFluent2TextFieldSkinlet.h
-)
-
 list(APPEND SOURCES
    QskFluent2Theme.cpp
    QskFluent2Skin.cpp
    QskFluent2SkinFactory.cpp
-    QskFluent2TextFieldSkinlet.cpp
 )

 qt_add_resources(SOURCES QskFluent2Icons.qrc)
--- a/designsystems/fluent2/QskFluent2Icons.qrc
+++ b/designsystems/fluent2/QskFluent2Icons.qrc
@ -3,5 +3,7 @@
        <file>icons/qvg/checkmark.qvg</file>
        <file>icons/qvg/chevron_down.qvg</file>
        <file>icons/qvg/chevron_up.qvg</file>
+        <file>icons/qvg/dismiss.qvg</file>
+        <file>icons/qvg/search.qvg</file>
    </qresource>
 </RCC>
--- a/designsystems/fluent2/QskFluent2Skin.cpp
+++ b/designsystems/fluent2/QskFluent2Skin.cpp
@ -47,7 +47,6 @@
 */
 #include "QskFluent2Skin.h"
 #include "QskFluent2Theme.h"
-#include "QskFluent2TextFieldSkinlet.h"

 #include <QskTextAreaSkinlet.h>
 #include <QskSkinHintTableEditor.h>
@ -1854,11 +1853,13 @@ void Editor::setupTextAreaColors(
        setBoxBorderGradient( panel, borderColor1, borderColor2, panelColor );
    }
 }
+
 void Editor::setupTextFieldMetrics()
 {
    using Q = QskTextField;

-    setFontRole( Q::Text, Fluent2::Body );
+    setFontRole( Q::Header, Fluent2::Body );
+    setFontRole( Q::Footer, Fluent2::Caption );

    setStrutSize( Q::TextPanel, { -1, 30_px } );
    setPadding( Q::TextPanel, { 11_px, 0, 11_px, 0 } );
@ -1869,8 +1870,23 @@ void Editor::setupTextFieldMetrics()

    setBoxShape( Q::TextPanel, 3_px );

-    setAlignment( Q::Placeholder, Qt::AlignLeft | Qt::AlignVCenter );
-    setFontRole( Q::Placeholder, fontRole( Q::Text ) );
+    for ( const auto subControl : { Q::Text, Q::Placeholder } )
+    {
+        setFontRole( subControl, Fluent2::Body );
+        setAlignment( subControl, Qt::AlignLeft | Qt::AlignVCenter );
+    }
+
+    //setStrutSize( Q::Header, { -1, 30_px } );
+    //setStrutSize( Q::Footer, { -1, 30_px } );
+
+    setSymbol( Q::Icon, symbol( "search" ) );
+    setSymbol( Q::Button, symbol( "dismiss" ) );
+
+    for ( const auto subControl : { Q::Icon, Q::Button } )
+    {
+        setMargin( subControl, 2_px );
+        setStrutSize( subControl, 16_px, 16_px );
+    }
 }

 void Editor::setupTextFieldColors(
@ -1878,54 +1894,66 @@ void Editor::setupTextFieldColors(
 {
    using Q = QskTextField;
    using A = QskAspect;
+    using W = QskFluent2Skin;

    const auto& pal = theme.palette;

-    const auto text = Q::Text | section;
-    
-#if 1
-    setColor( text, pal.fillColor.text.primary );
-    setColor( text | Q::Selected, pal.fillColor.textOnAccent.selectedText );
-    setColor( text | Q::Disabled, pal.fillColor.text.disabled );
-#endif
+    setColor( Q::Text | section | Q::Selected, pal.fillColor.textOnAccent.selectedText );
+    setColor( Q::TextPanel | section | Q::Selected, pal.fillColor.accent.selectedTextBackground );

-    setColor( Q::TextPanel | Q::Selected, pal.fillColor.accent.selectedTextBackground );
-    setColor( Q::Placeholder, pal.fillColor.text.secondary );
+    setColor( Q::Placeholder | section, pal.fillColor.text.secondary );
+
+    setColor( Q::Header | section, pal.fillColor.text.primary );

    for( const auto state : { A::NoState, Q::Hovered, Q::Focused, Q::Editing, Q::Disabled } )
    {
-        QRgb panelColor, borderColor1, borderColor2;
+        QRgb panelColor, borderColor1, borderColor2, textColor;

        if ( state == Q::Hovered )
        {
            panelColor = pal.fillColor.control.secondary;
            borderColor1 = pal.elevation.textControl.border[0];
            borderColor2 = pal.elevation.textControl.border[1];
+            textColor = pal.fillColor.text.primary;
        }
        else if ( ( state == Q::Focused ) || ( state == Q::Editing ) )
        {
            panelColor = pal.fillColor.control.inputActive;
            borderColor1 = pal.elevation.textControl.border[0];
            borderColor2 = pal.fillColor.accent.defaultColor;
+            textColor = pal.fillColor.text.primary;
        }
        else if ( state == Q::Disabled )
        {
            panelColor = pal.fillColor.control.disabled;
            borderColor1 = borderColor2 = pal.strokeColor.control.defaultColor;
+            textColor = pal.fillColor.text.disabled;
        }
        else // A::NoState
        {
            panelColor = pal.fillColor.control.defaultColor;
            borderColor1 = pal.elevation.textControl.border[0];
            borderColor2 = pal.elevation.textControl.border[1];
+            textColor = pal.fillColor.text.primary;
        }

        const auto panel = Q::TextPanel | section | state;
+        const auto text = Q::Text | section | state;

        panelColor = rgbSolid( panelColor, pal.background.solid.base );

        setGradient( panel, panelColor );
        setBoxBorderGradient( panel, borderColor1, borderColor2, panelColor );
+
+        setColor( text, textColor );
+    }
+
+    for ( const auto subControl : { Q::Icon, Q::Button } )
+    {
+        const auto aspect = subControl | section;
+
+        setGraphicRole( aspect, W::GraphicRoleFillColorTextSecondary );
+        setGraphicRole( aspect | Q::Disabled, W::GraphicRoleFillColorTextDisabled );
    }
 }

@ -2113,8 +2141,6 @@ void Editor::setupVirtualKeyboardColors(
 QskFluent2Skin::QskFluent2Skin( QObject* parent )
    : Inherited( parent )
 {
-    declareSkinlet< QskTextField, QskFluent2TextFieldSkinlet >();
-
    setupFonts();

    Editor editor( &hintTable() );
--- a/designsystems/fluent2/QskFluent2TextFieldSkinlet.cpp
+++ b/designsystems/fluent2/QskFluent2TextFieldSkinlet.cpp
@ -1,32 +0,0 @@
-/******************************************************************************
- * QSkinny - Copyright (C) The authors
- *           SPDX-License-Identifier: BSD-3-Clause
- *****************************************************************************/
-
-#include "QskFluent2TextFieldSkinlet.h"
-#include "QskTextField.h"
-
-using Q = QskTextField;
-
-QskFluent2TextFieldSkinlet::QskFluent2TextFieldSkinlet( QskSkin* skin )
-    : Inherited( skin )
-{
-}
-
-QskFluent2TextFieldSkinlet::~QskFluent2TextFieldSkinlet()
-{
-}
-
-QRectF QskFluent2TextFieldSkinlet::subControlRect( const QskSkinnable* skinnable,
-    const QRectF& contentsRect, QskAspect::Subcontrol subControl ) const
-{
-    return Inherited::subControlRect( skinnable, contentsRect, subControl );
-}
-
-QSizeF QskFluent2TextFieldSkinlet::sizeHint( const QskSkinnable* skinnable,
-    Qt::SizeHint which, const QSizeF& constraint ) const
-{
-    return Inherited::sizeHint( skinnable, which, constraint );
-}
-
-#include "moc_QskFluent2TextFieldSkinlet.cpp"
--- a/designsystems/fluent2/QskFluent2TextFieldSkinlet.h
+++ b/designsystems/fluent2/QskFluent2TextFieldSkinlet.h
@ -1,29 +0,0 @@
-/******************************************************************************
- * QSkinny - Copyright (C) The authors
- *           SPDX-License-Identifier: BSD-3-Clause
- *****************************************************************************/
-
-#ifndef QSK_FLUENT2_TEXTFIELD_SKINLET_H
-#define QSK_FLUENT2_TEXTFIELD_SKINLET_H
-
-#include "QskFluent2Global.h"
-#include "QskTextFieldSkinlet.h"
-
-class QSK_FLUENT2_EXPORT QskFluent2TextFieldSkinlet : public QskTextFieldSkinlet
-{
-    Q_GADGET
-
-    using Inherited = QskTextFieldSkinlet;
-
-  public:
-    Q_INVOKABLE QskFluent2TextFieldSkinlet( QskSkin* = nullptr );
-    ~QskFluent2TextFieldSkinlet() override;
-
-    QRectF subControlRect( const QskSkinnable*,
-        const QRectF& rect, QskAspect::Subcontrol ) const override;
-
-    QSizeF sizeHint( const QskSkinnable*,
-        Qt::SizeHint, const QSizeF& ) const override;
-};
-
-#endif
--- a/designsystems/fluent2/icons/dismiss.svg
+++ b/designsystems/fluent2/icons/dismiss.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.08859 2.21569L2.14645 2.14645C2.32001 1.97288 2.58944 1.9536 2.78431 2.08859L2.85355 2.14645L6 5.293L9.14645 2.14645C9.34171 1.95118 9.65829 1.95118 9.85355 2.14645C10.0488 2.34171 10.0488 2.65829 9.85355 2.85355L6.707 6L9.85355 9.14645C10.0271 9.32001 10.0464 9.58944 9.91141 9.78431L9.85355 9.85355C9.67999 10.0271 9.41056 10.0464 9.21569 9.91141L9.14645 9.85355L6 6.707L2.85355 9.85355C2.65829 10.0488 2.34171 10.0488 2.14645 9.85355C1.95118 9.65829 1.95118 9.34171 2.14645 9.14645L5.293 6L2.14645 2.85355C1.97288 2.67999 1.9536 2.41056 2.08859 2.21569L2.14645 2.14645L2.08859 2.21569Z" fill="#212121"/>
+</svg>
--- a/designsystems/fluent2/icons/qvg/dismiss.qvg
+++ b/designsystems/fluent2/icons/qvg/dismiss.qvg
--- a/designsystems/fluent2/icons/qvg/search.qvg
+++ b/designsystems/fluent2/icons/qvg/search.qvg
--- a/designsystems/fluent2/icons/search.svg
+++ b/designsystems/fluent2/icons/search.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 1C2.79086 1 1 2.79086 1 5C1 7.20914 2.79086 9 5 9C5.92417 9 6.77513 8.68659 7.45241 8.16025L10.1455 10.8533C10.3408 11.0486 10.6574 11.0486 10.8526 10.8533C11.0479 10.6581 11.0479 10.3415 10.8526 10.1462L8.15961 7.45323C8.68633 6.77583 9 5.92454 9 5C9 2.79086 7.20914 1 5 1ZM2 5C2 3.34315 3.34315 2 5 2C6.65685 2 8 3.34315 8 5C8 6.65685 6.65685 8 5 8C3.34315 8 2 6.65685 2 5Z" fill="#212121"/>
+</svg>
--- a/designsystems/fusion/QskFusionSkin.cpp
+++ b/designsystems/fusion/QskFusionSkin.cpp
@ -425,6 +425,9 @@ void Editor::setupTextField()

    setBoxShape( Q::TextPanel, 2_px );
    setPadding( Q::TextPanel, 4_px );
+
+    setFontRole( Q::Header, QskFontRole::Body );
+    setFontRole( Q::Footer, QskFontRole::Caption );
 }

 void Editor::setupTextArea()
--- a/designsystems/material3/QskMaterial3Icons.qrc
+++ b/designsystems/material3/QskMaterial3Icons.qrc
@ -6,5 +6,8 @@
        <file>icons/qvg/check.qvg</file>
        <file>icons/qvg/close.qvg</file>
        <file>icons/qvg/remove.qvg</file>
+        <file>icons/qvg/text_field_search.qvg</file>
+        <file>icons/qvg/text_field_cancel.qvg</file>
+        <file>icons/qvg/text_field_error.qvg</file>
    </qresource>
 </RCC>
--- a/designsystems/material3/QskMaterial3Skin.cpp
+++ b/designsystems/material3/QskMaterial3Skin.cpp
@ -476,43 +476,143 @@ void Editor::setupTextArea()
 void Editor::setupTextField()
 {
    using Q = QskTextField;
+    using M3 = QskMaterial3Skin;
+    using A = QskAspect;

    setColor( Q::Text, m_pal.onSurface );
    setFontRole( Q::Text, BodyLarge );
    setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

-    setStrutSize( Q::Panel,  -1.0, 56_px );
-    setPadding( Q::Panel, { 12_px, 8_px, 12_px, 8_px } );
-    setGradient( Q::Panel, m_pal.surfaceVariant );
+    const auto Outlined = A::NoVariation;
+    const auto Filled = static_cast< A::Variation >( 1 );
+
+    const auto activeStates = Q::Focused | Q::Editing;
+
+    {
+        // TextPanel
+
+        setAnimation( Q::TextPanel | A::Color, qskDuration );
+        setAnimation( Q::TextPanel | A::Metric, qskDuration );
+    }
+
+    {
+        const auto aspect = Q::TextPanel | Filled;
+
+        setBoxBorderColors( aspect, m_pal.onSurfaceVariant );
+        setGradient( aspect, m_pal.surfaceVariant );
+
+        setGradient( aspect | Q::Hovered,
+            m_pal.hoverColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant ),
+            { QskStateCombination::CombinationNoState, activeStates | Q::Error } );
+
+        setGradient( aspect | Q::Disabled,
+            QskRgb::toTransparentF( m_pal.onSurface, 0.04 ) );
+
+        setBoxShape( aspect, m_pal.shapeExtraSmallTop );
+        setBoxBorderMetrics( aspect, { 0, 0, 0, 1 } );
+        setBoxBorderMetrics( aspect, { 0, 0, 0, 2 }, activeStates | Q::Hovered );
+        setBoxBorderMetrics( aspect | Q::Error, { 0, 0, 0, 2 }, activeStates | Q::Hovered );
+    }
+    {
+        const auto aspect = Q::TextPanel | Outlined;
+
+        setBoxBorderColors( aspect, m_pal.outline );
+
+        setBoxShape( aspect, m_pal.shapeExtraSmall );
+        setBoxBorderMetrics( aspect, 1 );
+        setBoxBorderMetrics( aspect, 2, activeStates | Q::Hovered );
+        setBoxBorderMetrics( aspect | Q::Error, 2, activeStates | Q::Hovered );
+
+        setGradient( aspect, QColor() );
+    }
+
+    setStrutSize( Q::TextPanel,  -1.0, 56_px );
+    setPadding( Q::TextPanel, 16_px, 8_px, 16_px, 8_px );
+
+    setBoxBorderColors(  Q::TextPanel, m_pal.primary, activeStates );
+    setBoxBorderColors(  Q::TextPanel | Q::Hovered, m_pal.primary, activeStates );
+    setBoxBorderColors(  Q::TextPanel | Q::Hovered, m_pal.onSurface );
+    setBoxBorderColors(  Q::TextPanel | Q::Disabled, m_pal.onSurface38 );
+
+    setBoxBorderColors(  Q::TextPanel | Q::Error, m_pal.error,
+        { QskStateCombination::CombinationNoState, activeStates | Q::Hovered } );
+
    setColor( Q::TextPanel | Q::Selected, m_pal.primary12 );
-    setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop );
-    setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_px } );
-    setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant );
-    setSpacing( Q::Panel, 8_px );

-    const auto hoverColor = flattenedColor( m_pal.onSurfaceVariant,
-        m_pal.surfaceVariant, m_pal.hoverOpacity );
-    setGradient( Q::Panel | Q::Hovered, hoverColor );
+    // Icon

-    const auto focusColor = flattenedColor( m_pal.onSurfaceVariant,
-        m_pal.surfaceVariant, m_pal.focusOpacity );
-    setGradient( Q::Panel | Q::Focused, focusColor );
+    setStrutSize( Q::Icon, { 24_px, 24_px } );
+    setMargin( Q::Icon, 2_px );
+    setSymbol( Q::Icon, symbol( "text_field_search" ) );

-    // ### Also add a pressed state
+    setGraphicRole( Q::Icon, M3::GraphicRoleOnSurface );
+    setGraphicRole( Q::Icon | Q::Error, M3::GraphicRoleOnSurfaceVariant );

-    setFontRole( Q::Text, BodyLarge );
+    setGraphicRole( Q::Icon | Q::Disabled, M3::GraphicRoleOnSurface38 );

-    setAlignment( Q::Placeholder, Qt::AlignLeft | Qt::AlignVCenter );
+    // Button

-    const auto disabledPanelColor = QskRgb::toTransparentF( m_pal.onSurface, 0.04 );
-    setGradient( Q::Panel | Q::Disabled, disabledPanelColor );
-    setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface38 );
+    setStrutSize( Q::Button, { 24_px, 24_px } );
+    setMargin( Q::Button, 2_px );
+    setGraphicRole( Q::Button, M3::GraphicRoleOnSurfaceVariant );
+    setSymbol( Q::Button, symbol( "text_field_cancel" ) );

-    // PlaceholderText
+    setSymbol( Q::Button | Q::Error, symbol( "text_field_error" ) );
+    setGraphicRole( Q::Button | Q::Error, M3::GraphicRoleError );
+    setGraphicRole( Q::Button | Q::Error | Q::Hovered, M3::GraphicRoleOnErrorContainer );

-    setColor( Q::Placeholder, color( Q::Text ) );
-    setFontRole( Q::Placeholder, BodyLarge );
-    setAlignment( Q::Placeholder, Qt::AlignLeft | Qt::AlignVCenter );
+    setGraphicRole( Q::Button | Q::Disabled, M3::GraphicRoleOnSurface38 );
+
+    // ButtonPanel
+
+    setStrutSize( Q::ButtonPanel, { 45_px, 45_px } );
+    setGradient( Q::ButtonPanel | Q::Hovered, m_pal.onSurface8 );
+    setBoxShape( Q::ButtonPanel, 100, Qt::RelativeSize );
+
+    // Header
+
+    setAlignment( Q::Header, Qt::AlignLeft | Qt::AlignVCenter );
+    setFontRole( Q::Header, BodySmall );
+
+    setColor( Q::Header, m_pal.onSurfaceVariant );
+    setColor( Q::Header, m_pal.primary, activeStates );
+    setColor( Q::Header | Q::Error, m_pal.error );
+    setColor( Q::Header | Q::Disabled, m_pal.onSurface38 );
+
+    for ( const auto subControl : { Q::Text, Q::Placeholder } )
+    {
+        setAlignment( subControl, Qt::AlignLeft | Qt::AlignVCenter );
+
+        setFontRole( subControl, BodyLarge );
+
+        setColor( subControl | Q::Disabled, m_pal.onSurface38 );
+
+        if ( subControl == Q::Text )
+        {
+            setColor( subControl, m_pal.onSurface );
+        }
+        else
+        {
+            setColor( subControl | Q::Error, m_pal.error );
+            setColor( subControl | Q::Error | Q::Hovered, m_pal.onSurface );
+        }
+    }
+
+    // Footer, CharacterCount
+    for ( const auto subControl : { Q::Footer, Q::CharacterCount } )
+    {
+        setMargin( subControl, { 16_px, 4_px, 16_px, 4_px } );
+        setFontRole( subControl, BodySmall );
+
+        setColor( subControl, m_pal.onSurfaceVariant );
+        setColor( subControl | Q::Error, m_pal.error );
+        setColor( subControl | Q::Disabled, m_pal.onSurface38 );
+    }
+
+    setAlignment( Q::Footer, Qt::AlignLeft | Qt::AlignVCenter );
+    setAlignment( Q::CharacterCount, Qt::AlignRight | Qt::AlignVCenter );
+
+    setFlag( Q::CharacterCount | A::Option, Qsk::Maybe ); 
 }

 void Editor::setupProgressBar()
@ -1617,6 +1717,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
    elevation2 = QskShadowMetrics( -2, 8, { 0, 2 } );
    elevation3 = QskShadowMetrics( -1, 11, { 0, 2 } );

+    shapeExtraSmall = QskBoxShapeMetrics( 4_px, 4_px, 4_px, 4_px );
    shapeExtraSmallTop = QskBoxShapeMetrics( 4_px, 4_px, 0, 0 );
 }

@ -1743,6 +1844,7 @@ void QskMaterial3Skin::setupGraphicFilters( const QskMaterial3Theme& theme )
    setGraphicColor( GraphicRoleOnPrimaryContainer, theme.onPrimaryContainer );
    setGraphicColor( GraphicRoleOnSecondaryContainer, theme.onSecondaryContainer );
    setGraphicColor( GraphicRoleOnError, theme.onError );
+    setGraphicColor( GraphicRoleOnErrorContainer, theme.onErrorContainer );
    setGraphicColor( GraphicRoleOnSurface, theme.onSurface );
    setGraphicColor( GraphicRoleOnSurface38, theme.onSurface38 );
    setGraphicColor( GraphicRoleOnSurfaceVariant, theme.onSurfaceVariant );
--- a/designsystems/material3/QskMaterial3Skin.h
+++ b/designsystems/material3/QskMaterial3Skin.h
@ -107,6 +107,7 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Theme

    qreal stateOpacity( int state ) const;

+    QskBoxShapeMetrics shapeExtraSmall;
    QskBoxShapeMetrics shapeExtraSmallTop;
 };

@ -119,7 +120,9 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Skin : public QskSkin
  public:
    enum GraphicRole
    {
+        GraphicRoleError,
        GraphicRoleOnError,
+        GraphicRoleOnErrorContainer,
        GraphicRoleOnPrimary,
        GraphicRoleOnPrimaryContainer,
        GraphicRoleOnSecondaryContainer,
--- a/designsystems/material3/QskMaterial3TextFieldSkinlet.cpp
+++ b/designsystems/material3/QskMaterial3TextFieldSkinlet.cpp
@ -4,33 +4,28 @@
 *****************************************************************************/

 #include "QskMaterial3TextFieldSkinlet.h"
-#include "QskTextField.h"
+#include "QskMaterial3Skin.h"
+
+#include <QskSkinnable.h>
+
+static inline bool isOutlined( const QskSkinnable* skinnable )
+{
+    return skinnable->effectiveVariation() == QskAspect::NoVariation;
+}

 QskMaterial3TextFieldSkinlet::QskMaterial3TextFieldSkinlet( QskSkin* skin )
    : Inherited( skin )
 {
+    setRenderHints( UseHeaderAsPlaceholder );
 }

 QskMaterial3TextFieldSkinlet::~QskMaterial3TextFieldSkinlet()
 {
 }

-QRectF QskMaterial3TextFieldSkinlet::subControlRect( const QskSkinnable* skinnable,
-    const QRectF& contentsRect, QskAspect::Subcontrol subControl ) const
+int QskMaterial3TextFieldSkinlet::panelMode( const QskSkinnable* skinnable ) const
 {
-    return Inherited::subControlRect( skinnable, contentsRect, subControl );
-}
-
-QSGNode* QskMaterial3TextFieldSkinlet::updateSubNode(
-    const QskSkinnable* skinnable, quint8 nodeRole, QSGNode* node ) const
-{
-    return Inherited::updateSubNode( skinnable, nodeRole, node );
-}
-
-QSizeF QskMaterial3TextFieldSkinlet::sizeHint( const QskSkinnable* skinnable,
-    Qt::SizeHint which, const QSizeF& constraint ) const
-{
-    return Inherited::sizeHint( skinnable, which, constraint );
+    return isOutlined( skinnable ) ? 2 : 1;
 }

 #include "moc_QskMaterial3TextFieldSkinlet.cpp"
--- a/designsystems/material3/QskMaterial3TextFieldSkinlet.h
+++ b/designsystems/material3/QskMaterial3TextFieldSkinlet.h
@ -19,15 +19,8 @@ class QSK_MATERIAL3_EXPORT QskMaterial3TextFieldSkinlet : public QskTextFieldSki
    Q_INVOKABLE QskMaterial3TextFieldSkinlet( QskSkin* = nullptr );
    ~QskMaterial3TextFieldSkinlet() override;

-    QRectF subControlRect( const QskSkinnable*,
-        const QRectF& rect, QskAspect::Subcontrol ) const override;
-
-    QSizeF sizeHint( const QskSkinnable*,
-        Qt::SizeHint, const QSizeF& ) const override;
-
-  protected:
-    QSGNode* updateSubNode( const QskSkinnable*,
-        quint8 nodeRole, QSGNode* ) const override;
+  private:
+    int panelMode( const QskSkinnable* skinnable ) const override final;
 };

 #endif
--- a/designsystems/material3/icons/qvg/text_field_cancel.qvg
+++ b/designsystems/material3/icons/qvg/text_field_cancel.qvg
--- a/designsystems/material3/icons/qvg/text_field_error.qvg
+++ b/designsystems/material3/icons/qvg/text_field_error.qvg
--- a/designsystems/material3/icons/qvg/text_field_search.qvg
+++ b/designsystems/material3/icons/qvg/text_field_search.qvg
--- a/designsystems/material3/icons/text_field_cancel.svg
+++ b/designsystems/material3/icons/text_field_cancel.svg
@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 8.59L13.59 5L15 6.41L11.41 10L15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59Z" fill="black"/>
+</svg>
+
--- a/designsystems/material3/icons/text_field_error.svg
+++ b/designsystems/material3/icons/text_field_error.svg
@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM9 15V13H11V15H9ZM9 5V11H11V5H9Z" fill="black"/>
+</svg>
+
--- a/designsystems/material3/icons/text_field_search.svg
+++ b/designsystems/material3/icons/text_field_search.svg
@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.76 10.27L17.49 16L16 17.49L10.27 11.76C9.2 12.53 7.91 13 6.5 13C2.91 13 0 10.09 0 6.5C0 2.91 2.91 0 6.5 0C10.09 0 13 2.91 13 6.5C13 7.91 12.53 9.2 11.76 10.27ZM6.5 2C4.01 2 2 4.01 2 6.5C2 8.99 4.01 11 6.5 11C8.99 11 11 8.99 11 6.5C11 4.01 8.99 2 6.5 2Z" fill="black"/>
+</svg>
+
--- a/examples/gallery/inputs/InputPage.cpp
+++ b/examples/gallery/inputs/InputPage.cpp
@ -10,6 +10,12 @@
 #include <QskTextArea.h>
 #include <QskTextField.h>
 #include <QskSpinBox.h>
+#include <QskComboBox.h>
+#include <QskSeparator.h>
+#include <QskFunctions.h>
+#include <QskFontRole.h>
+
+#include <QFontMetricsF>

 namespace
 {
@ -62,40 +68,108 @@ namespace
        }
    };

+    class TextField : public QskTextField
+    {
+      public:
+        enum Style
+        {
+            OutlinedStyle,
+            FilledStyle
+        };
+        
+        TextField( QQuickItem* parent = nullptr )
+            : QskTextField( parent )
+        {
+        }
+
+        void setStyle( Style style ) 
+        {
+            if ( style != m_style )
+            {
+                m_style = style;
+
+                resetImplicitSize();
+                polish();
+                update();
+            }
+        }
+
+        Style style() const
+        {
+            return m_style;
+        }
+
+        QskAspect::Variation effectiveVariation() const override
+        {
+            return static_cast< QskAspect::Variation >( m_style );
+        }
+
+      private:
+        Style m_style = OutlinedStyle;
+    };
+
    class TextInputBox : public QskLinearBox
    {
      public:
        TextInputBox( QQuickItem* parent = nullptr )
-            : QskLinearBox( Qt::Horizontal, parent )
+            : QskLinearBox( Qt::Horizontal, 3, parent )
        {
            setSpacing( 20 );
+            setDefaultAlignment( Qt::AlignHCenter | Qt::AlignTop );

            {
-                {
-                    auto field = new QskTextField( this );
-                    field->setText( "John Doe" );
-                    field->setPlaceholderText( "<Name>" );
+                auto field = new TextField( this );
+                field->setHeaderText( "Name" );
+                field->setText( "John Doe" );
+                field->setPlaceholderText( "<Name>" );
+                field->setFooterText( "Required *" );
+            }

-#if 0
-                    connect( field, &QskTextField::textChanged,
-                        [field]() { qDebug() << "Text:" << field->text(); } );
-#endif
+            {
+                auto field = new TextField( this );
+                field->setHeaderText( "Nickname" );
+                field->setPlaceholderText( "<Nickname>" );
+                field->setFooterText( "Optional" );
+            }
+            {
+                auto field = new TextField( this );
+                field->setIcon( {} );
+                field->setPlaceholderText( "<no header>" );
+            }

-                }
+            {
+                auto field = new TextField( this );
+                field->setSkinStateFlag( QskTextField::Error );
+                field->setText( "Error Text" );
+                field->setHeaderText( "error" );
+                field->setPlaceholderText( "<text>" );
+                field->setFooterText( "error text" );
+            }

-                {
-                    auto field = new QskTextField( this );
-                    field->setReadOnly( true );
-                    field->setText( "Read Only" );
-                    field->setSizePolicy( Qt::Horizontal, QskSizePolicy::MinimumExpanding );
-                }
+            {
+                auto field = new TextField( this );
+                field->setReadOnly( true );
+                field->setText( "Read Only" );
+                field->setHeaderText( "read only" );
+                field->setSizePolicy( Qt::Horizontal, QskSizePolicy::MinimumExpanding );
+            }

-                {
-                    auto field = new QskTextField( this );
-                    field->setMaxLength( 5 );
-                    field->setEchoMode( QskTextField::Password );
-                    field->setPlaceholderText( "<password>" );
-                }
+            {
+                auto field = new TextField( this );
+                field->setMaxLength( 15 );
+                field->setHeaderText( "password" );
+                field->setEchoMode( QskTextField::Password );
+                field->setPlaceholderText( "<password>" );
+            }
+        }
+
+        void setStyle( int value )
+        {
+            auto textFields = findChildren< QskTextField* >();
+            for ( auto field : textFields )
+            {
+                const auto style = static_cast< TextField::Style >( value );
+                dynamic_cast< TextField* >(field)->setStyle( style );
            }
        }
    };
@ -120,6 +194,17 @@ namespace
            }
        }
    };
+
+    class StyleComboBox : public QskComboBox
+    {
+      public:
+        StyleComboBox( QQuickItem* parent = nullptr )
+            : QskComboBox( parent )
+        {
+            addOption( QString(), "Outlined" );
+            addOption( QString(), "Filled" );
+        }
+    };
 }

 InputPage::InputPage( QQuickItem* parent )
@ -146,30 +231,44 @@ InputPage::InputPage( QQuickItem* parent )
    }

    auto spinBox = new QskSpinBox( 0.0, 100.0, 1.0 );
+    spinBox->setObjectName( "SliderValueSpinBox" );
    spinBox->setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed );
+    spinBox->setLayoutAlignmentHint( Qt::AlignCenter );

    auto textInputBox = new TextInputBox();
    textInputBox->setSizePolicy( Qt::Vertical, QskSizePolicy::Fixed );

    auto textAreaBox = new TextAreaBox();

-    auto vBox = new QskLinearBox( Qt::Vertical );
-    vBox->setSpacing( 30 );
-    vBox->setExtraSpacingAt( Qt::RightEdge | Qt::BottomEdge );
+    auto separator = new QskSeparator();
+    separator->setMargins( 5, 20, 5, 10 );

+    auto styleBox = new StyleComboBox();
+
+    auto vBox = new QskLinearBox( Qt::Vertical );
+    vBox->setSpacing( 20 );
    vBox->addItem( sliders[0].continous );
    vBox->addItem( sliders[0].discrete );
    vBox->addItem( sliders[0].centered );
    vBox->addItem( spinBox );
    vBox->addItem( textInputBox );
-    vBox->addItem( textAreaBox );

-    auto mainBox = new QskLinearBox( Qt::Horizontal, this );
-    mainBox->setSpacing( 30 );
-    mainBox->addItem( sliders[1].continous );
-    mainBox->addItem( sliders[1].discrete );
-    mainBox->addItem( sliders[1].centered );
-    mainBox->addItem( vBox );
+    auto hBox = new QskLinearBox( Qt::Horizontal );
+    hBox->setSpacing( 20 );
+    hBox->addItem( sliders[1].continous );
+    hBox->addItem( sliders[1].discrete );
+    hBox->addItem( sliders[1].centered );
+
+    auto gridBox = new QskGridBox( this );
+    gridBox->addItem( spinBox, 0, 0 );
+    gridBox->addItem( hBox, 1, 0, -1, 1 );
+    gridBox->addItem( vBox, 0, 1, 1, -1 );
+    gridBox->addItem( separator, 1, 1 );
+    gridBox->addItem( styleBox, 1, 2 );
+    gridBox->addItem( textInputBox, 2, 1, 1, -1 );
+    gridBox->addItem( textAreaBox, 3, 1, 1, -1 ); 
+    gridBox->setRowStretchFactor( 3, 10 );
+    gridBox->setColumnStretchFactor( 1, 10 );

    auto inputs = findChildren< QskBoundedValueInput* >();

@ -180,6 +279,11 @@ InputPage::InputPage( QQuickItem* parent )
    }

    spinBox->setValue( 30.0 );
+
+    connect( styleBox, &QskComboBox::currentIndexChanged,
+        textInputBox, &TextInputBox::setStyle );
+
+    styleBox->setCurrentIndex( TextField::OutlinedStyle );
 }

 void InputPage::syncValues( qreal value )
@ -193,8 +297,7 @@ void InputPage::syncValues( qreal value )

    if ( qobject_cast< const QskSlider* >( sender() ) )
    {
-        auto spinBoxes = findChildren< QskSpinBox* >();
-        for ( auto spinBox : spinBoxes )
+        if ( auto spinBox = findChild< QskSpinBox* >( "SliderValueSpinBox" ) )
            spinBox->setValue( value );
    }
    else
--- a/playground/gradients/main.cpp
+++ b/playground/gradients/main.cpp
@ -51,12 +51,14 @@ namespace
            new QskTextLabel( label, this );

            m_textField = new QskTextField( this );
+
+            m_textField->setText( "-0.000" );
+            m_textField->setPreferredWidth( m_textField->sizeHint().width() );
+            m_textField->setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed );
+
            m_textField->setValidator( new InputValidator( m_textField ) );
            m_textField->setText( QString::number( value ) );

-            const QFontMetricsF fm( m_textField->font() );
-            m_textField->setFixedWidth( fm.horizontalAdvance( "-0.000" ) );
-
            connect( m_textField, &QskTextField::editingChanged,
                this, [ this ]( bool on ) { if ( !on ) Q_EMIT valueChanged(); } );

--- a/playground/shadows/CMakeLists.txt
+++ b/playground/shadows/CMakeLists.txt
@ -35,6 +35,6 @@ if (QT_VERSION_MAJOR VERSION_GREATER_EQUAL 6)
        shaders/arcshadow-vulkan.vert
        shaders/arcshadow-vulkan.frag
    )
-    qsk_add_shaders( ${target} FILES ${SHADERS} OUTPUT_TARGETS shader_target)
+    qsk_add_shaders( ${target} "qskArcShaders" FILES ${SHADERS} OUTPUT_TARGETS shader_target)
 endif()

--- a/src/CMakeLists.txt
+++ b/src/CMakeLists.txt
@ -510,7 +510,7 @@ else()
 endif()

 if (QT_VERSION_MAJOR VERSION_GREATER_EQUAL 6)
-    qsk_add_shaders( ${target} FILES ${SHADERS} OUTPUT_TARGETS shader_target)
+    qsk_add_shaders( ${target} "qskshaders" FILES ${SHADERS} OUTPUT_TARGETS shader_target)
 endif()

 target_include_directories(${target} PUBLIC
--- a/src/common/QskGradient.cpp
+++ b/src/common/QskGradient.cpp
@ -81,7 +81,7 @@ QskGradient::QskGradient( const QColor& color1, const QColor& color2 )
 QskGradient::QskGradient( QGradient::Preset preset )
    : QskGradient()
 {
-    setStops( qskBuildGradientStops( QGradient( preset ).stops() ) );
+    setStops( qskFromQGradientStops( QGradient( preset ).stops() ) );
 }

 QskGradient::QskGradient( const QVector< QskGradientStop >& stops )
@ -165,7 +165,7 @@ QskGradient::QskGradient( const QGradient& qGradient )
        }
    }

-    setStops( qskBuildGradientStops( qGradient.stops() ) );
+    setStops( qskFromQGradientStops( qGradient.stops() ) );
 }

 QskGradient::QskGradient( const QskGradient& other ) noexcept
@ -305,7 +305,7 @@ void QskGradient::setStops( const QColor& color1, const QColor& color2 )

 void QskGradient::setStops( QGradient::Preset preset )
 {
-    const auto stops = qskBuildGradientStops( QGradient( preset ).stops() );
+    const auto stops = qskFromQGradientStops( QGradient( preset ).stops() );
    setStops( stops );
 }

--- a/src/common/QskGradientStop.cpp
+++ b/src/common/QskGradientStop.cpp
@ -23,6 +23,31 @@ static void qskRegisterGradientStop()

 Q_CONSTRUCTOR_FUNCTION( qskRegisterGradientStop )

+static inline qreal qskBoundedStopPos( qreal pos )
+{
+    if ( ( pos < 0.0 ) || qFuzzyIsNull( pos ) )
+        return 0.0;
+
+    if ( ( pos > 1.0 ) || qFuzzyCompare( pos, 1.0 ) )
+        return 1.0;
+
+    return pos;
+}
+
+static inline QVector< QskGradientStop >
+qskNormalizedStops( const QVector< QskGradientStop >& stops )
+{
+    auto s = stops;
+
+    if ( s.first().position() > 0.0 )
+        s.prepend( QskGradientStop( 0.0, s.first().color() ) );
+
+    if ( s.last().position() < 1.0 )
+        s.append( QskGradientStop( 1.0, s.last().color() ) );
+
+    return s;
+}
+
 void QskGradientStop::setPosition( qreal position ) noexcept
 {
    m_position = position;
@ -56,26 +81,19 @@ QskHashValue QskGradientStop::hash( QskHashValue seed ) const noexcept
    return qHashBits( &m_color, sizeof( m_color ), hash );
 }

-QColor QskGradientStop::interpolated(
-    const QskGradientStop& s1, const QskGradientStop& s2, qreal position ) noexcept
+QskGradientStop QskGradientStop::interpolated(
+    const QskGradientStop& to, qreal ratio ) const
 {
-    if ( s1.color() == s2.color() )
-        return s1.color();
+    return QskGradientStop(
+        m_position + ( to.m_position - m_position ) * ratio,
+        QskRgb::interpolated( m_color, to.m_color, ratio )
+    );
+}

-    auto min = &s1;
-    auto max = &s2;
-
-    if ( min->position() > max->position() )
-        std::swap( min, max );
-
-    if ( position <= min->position() )
-        return min->color();
-
-    if ( position >= max->position() )
-        return max->color();
-
-    const qreal r = ( position - min->position() ) / ( max->position() - min->position() );
-    return QskRgb::interpolated( min->color(), max->color(), r );
+QVariant QskGradientStop::interpolate(
+    const QskGradientStop& from, const QskGradientStop& to, qreal ratio )
+{
+    return QVariant::fromValue( from.interpolated( to, ratio ) );
 }

 #ifndef QT_NO_DEBUG_STREAM
@ -95,19 +113,23 @@ QDebug operator<<( QDebug debug, const QskGradientStop& stop )

 #endif

-#include "moc_QskGradientStop.cpp"
-
 // some helper functions around QskGradientStops

-static inline QColor qskInterpolatedColor(
-    const QskGradientStops& stops, int index1, int index2, qreal position )
+static inline QColor qskColorAtPosition(
+    const QskGradientStop& s1, const QskGradientStop& s2, qreal pos )
 {
-    const auto max = static_cast< int >( stops.count() ) - 1;
+    const auto dp = s2.position() - s1.position();
+    if ( qFuzzyIsNull( dp ) )
+        return s1.color();

-    index1 = qBound( 0, index1, max );
-    index2 = qBound( 0, index2, max );
+    return QskRgb::interpolated(
+        s1.color(), s2.color(), ( pos - s1.position() ) / dp );
+}

-    return QskGradientStop::interpolated( stops[ index1 ], stops[ index2 ], position );
+static inline QskGradientStop qskCreateStopAtPosition(
+    const QskGradientStop& s1, const QskGradientStop& s2, qreal pos )
+{
+    return { pos, qskColorAtPosition( s1, s2, pos ) };
 }

 bool qskIsVisible( const QskGradientStops& stops ) noexcept
@ -278,43 +300,126 @@ QColor qskInterpolatedColorAt( const QskGradientStops& stops, qreal pos ) noexce
    if ( stops.isEmpty() )
        return QColor();

-    pos = qBound( 0.0, pos, 1.0 );
-
    if ( pos <= stops.first().position() )
        return stops.first().color();

    for ( int i = 1; i < stops.count(); i++ )
    {
-        if ( pos <= stops[i].position() )
-            return qskInterpolatedColor( stops, i - 1, i, pos );
+        if ( pos <= stops[ i ].position() )
+            return qskColorAtPosition( stops[ i - 1 ], stops[ i ], pos );
    }

    return stops.last().color();
 }

-QskGradientStops qskExtractedGradientStops(
-    const QskGradientStops& gradientStops, qreal from, qreal to )
+QskGradientStops qskReplacedGradientStops( const QskGradientStops& gradientStops,
+    const QskGradientStop& stop1, const QskGradientStop& stop2 )
 {
-    if ( ( from > to ) || ( from > 1.0 ) || gradientStops.isEmpty() )
-        return QskGradientStops();
-
-    if ( ( from <= 0.0 ) && ( to >= 1.0 ) )
+    if ( stop1.position() >= stop2.position() )
        return gradientStops;

-    from = qMax( from, 0.0 );
-    to = qMin( to, 1.0 );
+    const auto s1 = QskGradientStop( qskBoundedStopPos( stop1.position() ), stop1.color() );
+    const auto s2 = QskGradientStop( qskBoundedStopPos( stop2.position() ), stop2.color() );

-    QVector< QskGradientStop > stops1 = gradientStops;
+    QskGradientStops stops;

-#if 1
-    // not the most efficient implementation - maybe later TODO ...
+    if ( s1.position() == 0.0 && s2.position() == 1.0 )
+    {
+        stops = { s1, s2 };
+    }
+    else if ( qskIsMonochrome( gradientStops ) )
+    {
+        stops.reserve( 4 );

-    if ( stops1.first().position() > 0.0 )
-        stops1.prepend( QskGradientStop( 0.0, stops1.first().color() ) );
+        const auto c = gradientStops.isEmpty()
+            ? QColor::fromRgba( 0 ) : gradientStops.first().color();

-    if ( stops1.last().position() < 1.0 )
-        stops1.append( QskGradientStop( 1.0, stops1.last().color() ) );
-#endif
+        if ( s1.position() > 0.0 )
+            stops += { s1.position(), c };
+
+        stops += s1;
+        stops += s2;
+
+        if ( s2.position() < 1.0 )
+            stops += { s2.position(), c };
+    }
+    else
+    {
+        // not the most efficient implementation - maybe later TODO ...
+        const auto stops0 = qskNormalizedStops( gradientStops );
+
+        int i = 0;
+
+        if ( s1.position() > 0.0 )
+        {
+            while ( s1.position() > stops0[i].position() )
+                stops += stops0[i++];
+
+            if ( s1.position() == stops0[i].position() )
+                stops += stops0[i++];
+            else
+                stops += qskCreateStopAtPosition( stops0[i - 1], stops0[i], s1.position() );
+        }
+
+        stops += s1;
+
+        while ( s2.position() > stops0[i].position() )
+            i++;
+
+        stops += s2;
+
+        if ( s2.position() < 1.0 )
+        {
+            while ( stops0[i + 1].position() == s2.position() )
+                i++;
+
+            if ( s2.position() != stops0[i].position() )
+                stops += qskCreateStopAtPosition( stops0[i - 1], stops0[i], s2.position() );
+
+            while( i < stops0.count() )
+                stops += stops0[i++];
+        }
+    }
+
+    return stops;
+}
+
+QskGradientStops qskClippedGradientStops(
+    const QskGradientStops& stops, qreal from, qreal to )
+{
+    return qskReplacedGradientStops( stops, { from, 0 }, { to, 0 } );
+}
+
+QskGradientStops qskExtractedGradientStops(
+    const QskGradientStops& stops, qreal from, qreal to )
+{
+    if ( ( from > to ) || ( to > 1.0 ) || ( from < 0.0 ) || stops.isEmpty() )
+        return QskGradientStops();
+
+    from = qskBoundedStopPos( from );
+    to = qskBoundedStopPos( to );
+
+    if ( ( from == 0.0 ) && ( to == 1.0 ) )
+        return stops;
+
+    if ( from == to )
+    {
+        const auto color = qskInterpolatedColorAt( stops, from );
+
+        QVector< QskGradientStop > s;
+        s.reserve( 2 );
+        s += QskGradientStop( 0.0, color );
+        s += QskGradientStop( 1.0, color );
+
+        return s;
+    }
+
+    /*
+        For situations where we have no stops at 0.0 and 1.0 we insert them
+        manually. Not the most efficient implementation, but we avoid having
+        to deal with these situations for the moment. TODO ...
+     */
+    const auto stops1 = qskNormalizedStops( stops );

    QVector< QskGradientStop > stops2;
    stops2.reserve( stops1.count() );
@ -331,26 +436,26 @@ QskGradientStops qskExtractedGradientStops(
    {
        int i = 0;

-        for ( ; i < stops1.count(); i++ )
+        if ( from == 0.0 )
        {
-            if ( stops1[i].position() > from )
-                break;
+            stops2 += stops1[i++];
+        }
+        else
+        {
+            while( stops1[++i].position() <= from ); // skip leading stops
+
+            stops2 += QskGradientStop( 0.0,
+                qskColorAtPosition( stops1[i - 1], stops1[ i ], from ) );
        }

-        stops2 += QskGradientStop( 0.0,
-            qskInterpolatedColor( stops1, i - 1, i, from ) );
-
-        for ( ; i < stops1.count(); i++ )
+        while ( stops1[i].position() < to )
        {
-            if ( stops1[i].position() >= to )
-                break;
-
            const auto pos = ( stops1[i].position() - from ) / ( to - from );
-            stops2 += QskGradientStop( pos, stops1[i].color() );
+            stops2 += QskGradientStop( pos, stops1[i++].color() );
        }

        stops2 += QskGradientStop( 1.0,
-            qskInterpolatedColor( stops1, i, i + 1, to ) );
+            qskColorAtPosition( stops1[i - 1], stops1[ i ], to ) );
    }

    return stops2;
@ -367,7 +472,7 @@ QskGradientStops qskRevertedGradientStops( const QskGradientStops& stops )
    return s;
 }

-QVector< QskGradientStop > qskBuildGradientStops( const QGradientStops& qtStops )
+QVector< QskGradientStop > qskFromQGradientStops( const QGradientStops& qtStops )
 {
    QVector< QskGradientStop > stops;
    stops.reserve( qtStops.count() );
@ -463,3 +568,5 @@ QGradientStops qskToQGradientStops( const QskGradientStops& stops )

    return qStops;
 }
+
+#include "moc_QskGradientStop.cpp"
--- a/src/common/QskGradientStop.h
+++ b/src/common/QskGradientStop.h
@ -45,8 +45,10 @@ class QSK_EXPORT QskGradientStop
    void setRgb( QRgb ) noexcept;
    QRgb rgb() const noexcept;

-    static QColor interpolated(
-        const QskGradientStop&, const QskGradientStop&, qreal position ) noexcept;
+    QskGradientStop interpolated( const QskGradientStop&, qreal ) const;
+
+    static QVariant interpolate( const QskGradientStop&,
+        const QskGradientStop&, qreal );

    QskHashValue hash( QskHashValue seed ) const noexcept;

@ -129,27 +131,48 @@ QSK_EXPORT QskGradientStops qskInterpolatedGradientStops(
    const QskGradientStops&, bool, const QskGradientStops&, bool,
    qreal ratio );

+// interpolating colors in direction of a color.
 QSK_EXPORT QskGradientStops qskInterpolatedGradientStops(
    const QskGradientStops&, const QColor&, qreal ratio );

+// interpolating colors starting from a color.
 QSK_EXPORT QskGradientStops qskInterpolatedGradientStops(
    const QColor&, const QskGradientStops&, qreal ratio );

+// interpolating the opacity of the colors
 QSK_EXPORT QskGradientStops qskTransparentGradientStops(
    const QskGradientStops&, qreal ratio );

+// extracting the colors of [from, to ] and stretching them to [0.0, 1.0]
 QSK_EXPORT QskGradientStops qskExtractedGradientStops(
    const QskGradientStops&, qreal from, qreal to );

+// reverting the color stops
+QSK_EXPORT QskGradientStops qskRevertedGradientStops( const QskGradientStops& );
+
+QSK_EXPORT QskGradientStops qskReplacedGradientStops(
+    const QskGradientStops&, const QskGradientStop&, const QskGradientStop& );
+
+QSK_EXPORT QskGradientStops qskClippedGradientStops(
+    const QskGradientStops&, qreal from, qreal to );
+
+/*
+   creating equidistant color stops from a list of colors.
+   when discrete is true the result will contain 2 stops at each position
+   one with the previous and one with the following color so that the
+   interval [pos1-pos2] will be monochrome.
+ */
 QSK_EXPORT QskGradientStops qskBuildGradientStops(
    const QVector< QRgb >&, bool discrete = false );

 QSK_EXPORT QskGradientStops qskBuildGradientStops(
    const QVector< QColor >&, bool discrete = false );

-QSK_EXPORT QskGradientStops qskRevertedGradientStops( const QskGradientStops& );
-
-QSK_EXPORT QskGradientStops qskBuildGradientStops( const QVector< QGradientStop >& );
+/*
+   convert color stops from/to a vector of QGradientStop, that can be
+   used for QGradients.
+ */
+QSK_EXPORT QskGradientStops qskFromQGradientStops( const QVector< QGradientStop >& );
 QSK_EXPORT QVector< QGradientStop > qskToQGradientStops( const QVector< QskGradientStop >& );

 #endif
--- a/src/common/QskTextColors.h
+++ b/src/common/QskTextColors.h
@ -41,7 +41,7 @@ class QSK_EXPORT QskTextColors
    void setLinkColor( QRgb );
    void setLinkColor( Qt::GlobalColor );

-    QskTextColors interpolated( const QskTextColors&, qreal value ) const;
+    QskTextColors interpolated( const QskTextColors&, qreal ratio ) const;

    static QVariant interpolate( const QskTextColors&,
        const QskTextColors&, qreal ratio );
--- a/src/controls/QskTabBar.cpp
+++ b/src/controls/QskTabBar.cpp
@ -129,7 +129,7 @@ namespace
        {
            if ( qskIsAncestorOf( this, item ) )
            {
-                const auto pos = mapFromItem( item, QPointF() );
+                const auto pos = mapFromItem( item, QPointF() ) + scrollPos();
                ensureVisible( QRectF( pos.x(), pos.y(), item->width(), item->height() ) );
            }
        }
--- a/src/controls/QskTextField.cpp
+++ b/src/controls/QskTextField.cpp
@ -4,20 +4,42 @@
 *****************************************************************************/

 #include "QskTextField.h"
+#include "QskEvent.h"
+#include "QskFontRole.h"
+#include "QskQuick.h"

 QSK_SUBCONTROL( QskTextField, Panel )
+
+QSK_SUBCONTROL( QskTextField, Header )
+QSK_SUBCONTROL( QskTextField, Footer )
+
+QSK_SUBCONTROL( QskTextField, Icon )
+QSK_SUBCONTROL( QskTextField, ButtonPanel )
+QSK_SUBCONTROL( QskTextField, Button )
 QSK_SUBCONTROL( QskTextField, Placeholder )

+QSK_SUBCONTROL( QskTextField, CharacterCount )
+
+QSK_SYSTEM_STATE( QskTextField, Pressed, QskAspect::LastUserState << 1 )
+
 class QskTextField::PrivateData
 {
  public:
+    QString headerText;
+    QString footerText;
    QString placeholderText;
+
+    QskAspect::States buttonStates;
 };

 QskTextField::QskTextField( QQuickItem* parent )
    : Inherited( parent )
    , m_data( new PrivateData() )
 {
+#if 1
+    // character count might have changed
+    connect( this, &QskTextInput::textChanged, this, &QQuickItem::update );
+#endif
 }

 QskTextField::QskTextField( const QString& text, QQuickItem* parent )
@ -30,6 +52,56 @@ QskTextField::~QskTextField()
 {
 }

+QString QskTextField::headerText() const
+{
+    return m_data->headerText;
+}
+
+void QskTextField::setHeaderText( const QString& text )
+{
+    if ( m_data->headerText != text )
+    {
+        m_data->headerText = text;
+
+        update();
+        resetImplicitSize();
+
+        Q_EMIT headerTextChanged( text );
+    }
+}
+
+QString QskTextField::footerText() const
+{
+    return m_data->footerText;
+}
+
+void QskTextField::setFooterText( const QString& text )
+{
+    if ( m_data->footerText != text )
+    {
+        m_data->footerText = text;
+
+        update();
+        resetImplicitSize();
+
+        Q_EMIT footerTextChanged( text );
+    }
+}
+
+QskGraphic QskTextField::icon() const
+{
+    return symbolHint( Icon );
+}
+
+void QskTextField::setIcon( const QskGraphic& icon )
+{
+    if ( setSymbolHint( Icon, icon ) )
+    {
+        update();
+        resetImplicitSize();
+    }
+}
+
 void QskTextField::setPlaceholderText( const QString& text )
 {
    if ( m_data->placeholderText != text )
@ -44,4 +116,101 @@ QString QskTextField::placeholderText() const
    return m_data->placeholderText;
 }

+void QskTextField::handleButtonClick()
+{
+    clear();
+    setEditing( true );
+}
+
+void QskTextField::mousePressEvent( QMouseEvent* event )
+{
+    if( !isReadOnly() )
+    {
+        const auto r = subControlRect( Button );
+        if ( r.contains( qskMousePosition( event ) ) )
+        {
+            setButtonState( Pressed, true );
+            return;
+        }
+    }
+
+    Inherited::mousePressEvent( event );
+}
+
+void QskTextField::mouseMoveEvent( QMouseEvent* event )
+{
+    if ( m_data->buttonStates & Pressed )
+    {
+        const auto r = subControlRect( Button );
+        setButtonState( Pressed, r.contains( qskMousePosition( event ) ) );
+        return;
+    }
+
+    Inherited::mouseMoveEvent( event );
+}
+
+void QskTextField::mouseReleaseEvent( QMouseEvent* event )
+{
+    if ( m_data->buttonStates & Pressed )
+    {
+        setButtonState( Pressed, false );
+        handleButtonClick();
+
+        return;
+    }
+
+    Inherited::mouseReleaseEvent( event );
+}
+
+void QskTextField::mouseUngrabEvent()
+{
+    setButtonState( Pressed, false );
+    Inherited::mouseUngrabEvent();
+}
+
+void QskTextField::hoverEnterEvent( QHoverEvent* event )
+{
+    Inherited::hoverEnterEvent( event );
+
+    const auto r = subControlRect( Button );
+    setButtonState( Hovered, r.contains( qskHoverPosition( event ) ) );
+}
+
+void QskTextField::hoverMoveEvent( QHoverEvent* event )
+{
+    const auto r = subControlRect( Button );
+    setButtonState( Hovered, r.contains( qskHoverPosition( event ) ) );
+
+    Inherited::hoverMoveEvent( event );
+}
+
+void QskTextField::hoverLeaveEvent( QHoverEvent* event )
+{
+    setButtonState( Hovered, false );
+    Inherited::hoverLeaveEvent( event );
+}
+
+QskAspect::States QskTextField::buttonStates() const
+{
+    auto states = skinStates() | m_data->buttonStates;
+
+    if ( !( m_data->buttonStates & Hovered ) )
+        states &= ~Hovered;
+
+    return states;
+}
+
+void QskTextField::setButtonState( QskAspect::State state, bool on )
+{
+    const auto oldStates = m_data->buttonStates;
+
+    if ( on )
+        m_data->buttonStates |= state;
+    else
+        m_data->buttonStates &= ~state;
+
+    if ( oldStates != m_data->buttonStates )
+        update();
+}
+
 #include "moc_QskTextField.cpp"
--- a/src/controls/QskTextField.h
+++ b/src/controls/QskTextField.h
@ -7,31 +7,70 @@
 #define QSK_TEXT_FIELD_H

 #include "QskTextInput.h"
+#include "QskGraphic.h"

 class QSK_EXPORT QskTextField : public QskTextInput
 {
    Q_OBJECT

+    Q_PROPERTY( QString headerText READ headerText
+        WRITE setHeaderText NOTIFY headerTextChanged )
+
+    Q_PROPERTY( QString footerText READ footerText
+        WRITE setFooterText NOTIFY footerTextChanged )
+
    Q_PROPERTY( QString placeholderText READ placeholderText
        WRITE setPlaceholderText NOTIFY placeholderTextChanged )

    using Inherited = QskTextInput;

  public:
-    QSK_SUBCONTROLS( Panel, Placeholder )
+    QSK_STATES( Pressed )
+
+    QSK_SUBCONTROLS( Panel, Header, Footer, Placeholder,
+        Icon, Button, ButtonPanel, CharacterCount )

    QskTextField( QQuickItem* parent = nullptr );
    QskTextField( const QString& text, QQuickItem* parent = nullptr );

    ~QskTextField() override;

+    void setHeaderText( const QString& );
+    QString headerText() const;
+
+    void setFooterText( const QString& );
+    QString footerText() const;
+
+    QskGraphic icon() const;
+    void setIcon( const QskGraphic& );
+
    void setPlaceholderText( const QString& );
    QString placeholderText() const;

+#if 1
+    QskAspect::States buttonStates() const;
+#endif
+
  Q_SIGNALS:
+    void headerTextChanged( const QString& );
+    void footerTextChanged( const QString& );
    void placeholderTextChanged( const QString& );

+  protected:
+    void hoverEnterEvent( QHoverEvent* ) override;
+    void hoverMoveEvent( QHoverEvent* ) override;
+    void hoverLeaveEvent( QHoverEvent* ) override;
+
+    void mousePressEvent( QMouseEvent* ) override;
+    void mouseMoveEvent( QMouseEvent* ) override;
+    void mouseReleaseEvent( QMouseEvent* ) override;
+    void mouseUngrabEvent() override;
+
+    virtual void handleButtonClick();
+
  private:
+    void setButtonState( QskAspect::State, bool );
+
    class PrivateData;
    std::unique_ptr< PrivateData > m_data;
 };
--- a/src/controls/QskTextFieldSkinlet.cpp
+++ b/src/controls/QskTextFieldSkinlet.cpp
@ -5,82 +5,335 @@

 #include "QskTextFieldSkinlet.h"
 #include "QskTextField.h"
+#include "QskFunctions.h"
+#include "QskBoxHints.h"
+
+#include <qfontmetrics.h>

 using Q = QskTextField;

+static QString qskEffectiveCharacterCountText( const QskTextField* textField )
+{
+    auto policy = textField->flagHint< Qsk::Policy >(
+        Q::CharacterCount | QskAspect::Option, Qsk::Never );
+
+    const auto maxLength = textField->maxLength();
+    const bool isLimited = maxLength < 32767; // magic number hardcoded in qquicktextinput.cpp
+
+    if ( policy == Qsk::Always || ( policy == Qsk::Maybe && isLimited ) )
+    {
+        auto s = QString::number( textField->text().length() );
+        if ( isLimited )
+            s += " / " + QString::number( maxLength );
+
+        return s;
+    }
+
+    return QString();
+}
+
 QskTextFieldSkinlet::QskTextFieldSkinlet( QskSkin* skin )
    : Inherited( skin )
 {
-    setNodeRoles( { PanelRole, TextPanelRole, PlaceholderRole } );
+    setNodeRoles( { TextPanelRole, IconRole, ButtonPanelRole, ButtonRole,
+        PlaceholderRole, HeaderRole, FooterRole, CharacterCountRole } );
 }

 QskTextFieldSkinlet::~QskTextFieldSkinlet()
 {
 }

+void QskTextFieldSkinlet::setRenderHints( RenderHints hints )
+{
+    m_renderHints = hints;
+}
+
+QskTextFieldSkinlet::RenderHints QskTextFieldSkinlet::renderHints() const
+{
+    return m_renderHints;
+}
+
 QRectF QskTextFieldSkinlet::subControlRect( const QskSkinnable* skinnable,
    const QRectF& contentsRect, QskAspect::Subcontrol subControl ) const
 {
+    const auto textField = static_cast< const QskTextField* >( skinnable );
+
    if ( subControl == Q::Panel )
        return contentsRect;

+    if ( subControl == Q::Header )
+        return headerRect( skinnable, contentsRect );
+
+    if ( subControl == Q::Footer )
+        return alignedLabelRect( skinnable, contentsRect, subControl, Qt::AlignBottom );
+
+    if ( subControl == Q::CharacterCount )
+        return alignedLabelRect( skinnable, contentsRect, subControl, Qt::AlignBottom );
+
    if ( subControl == Q::TextPanel )
-        return skinnable->subControlContentsRect( contentsRect, Q::Panel );
+        return inputPanelRect( skinnable, contentsRect );

    if ( subControl == Q::Text )
-        return skinnable->subControlContentsRect( contentsRect, Q::TextPanel );
+    {
+        auto rect = textField->subControlContentsRect( contentsRect, Q::TextPanel );
+
+        const auto iconRect = subControlRect( skinnable, contentsRect, Q::Icon );
+        if ( !iconRect.isEmpty() )
+            rect.setLeft( iconRect.right() );
+
+        const auto buttonRect = subControlRect( skinnable, contentsRect, Q::Button );
+        if( !buttonRect.isEmpty() )
+            rect.setRight( buttonRect.left() );
+
+        const auto h = skinnable->effectiveFontHeight( Q::Text );
+        rect.setTop( rect.center().y() - 0.5 * h );
+        rect.setHeight( h );
+
+        return rect;
+    }

    if ( subControl == Q::Placeholder )
    {
-        const auto textField = static_cast< const QskTextField* >( skinnable );
-        if( textField->text().isEmpty() )
+        if ( hasText( skinnable, Q::Placeholder ) )
            return subControlRect( skinnable, contentsRect, Q::Text );

        return QRectF();
    }

+    if ( subControl == Q::Icon )
+    {
+        if( !skinnable->symbolHint( subControl ).isEmpty() )
+        {
+            const auto rect = textField->subControlContentsRect( contentsRect, Q::TextPanel );
+
+            return qskAlignedRectF( rect,
+                skinnable->strutSizeHint( Q::Icon ), Qt::AlignLeft | Qt::AlignVCenter );
+        }
+
+        return QRectF();
+    }
+
+    if ( subControl == Q::ButtonPanel )
+    {
+        if ( textField->buttonStates() & Q::Hovered )
+        {
+            const auto sz = skinnable->strutSizeHint( Q::ButtonPanel );
+            if ( !sz.isEmpty() )
+            {
+                const auto r = subControlRect( skinnable, contentsRect, Q::Button );
+
+                QRectF rect( QPointF(), sz );
+                rect.moveCenter( r.center() );
+
+                return rect;
+            }
+        }
+
+        return QRectF();
+    }
+
+    if ( subControl == Q::Button )
+    {
+        if( !skinnable->symbolHint( Q::Button ).isEmpty() )
+        {
+            const auto rect = textField->subControlContentsRect( contentsRect, Q::TextPanel );
+
+            return qskAlignedRectF( rect,
+                skinnable->strutSizeHint( Q::Icon ), Qt::AlignRight | Qt::AlignVCenter );
+        }
+
+        return QRectF();
+    }
+
    return Inherited::subControlRect( skinnable, contentsRect, subControl );
 }

 QSGNode* QskTextFieldSkinlet::updateSubNode(
    const QskSkinnable* skinnable, quint8 nodeRole, QSGNode* node ) const
 {
-    const auto textField = static_cast< const QskTextField* >( skinnable );
-
    switch ( nodeRole )
    {
-        case PanelRole:
-        {
-            return updateBoxNode( skinnable, node, Q::Panel );
-        }
        case TextPanelRole:
-        {
-            return updateBoxNode( skinnable, node, Q::TextPanel );
-        }
+            return updateInputPanelNode( skinnable, node );
+
        case PlaceholderRole:
-        {
-            const auto text = effectivePlaceholderText( textField );
-            if ( text.isEmpty() )
-                return nullptr;
+            return updateLabelNode( skinnable, node, Q::Placeholder );

-            const auto subControl = Q::Placeholder;
+        case HeaderRole:
+            return updateLabelNode( skinnable, node, Q::Header );

-            QskSkinHintStatus status;
+        case FooterRole:
+            return updateLabelNode( skinnable, node, Q::Footer );

-            auto options = skinnable->textOptionsHint( subControl, &status );
-            if ( !status.isValid() )
-                options.setElideMode( Qt::ElideRight );
+        case CharacterCountRole:
+            return updateLabelNode( skinnable, node, Q::CharacterCount );

-            return updateTextNode( skinnable, node,
-                textField->subControlRect( subControl ),
-                textField->alignmentHint( subControl, Qt::AlignLeft ),
-                options, text, subControl );
-        }
+        case IconRole:
+            return updateSymbolNode( skinnable, node, Q::Icon );
+
+        case ButtonPanelRole:
+            return updateBoxNode( skinnable, node, Q::ButtonPanel );
+
+        case ButtonRole:
+            return updateSymbolNode( skinnable, node, Q::Button );
    }

    return Inherited::updateSubNode( skinnable, nodeRole, node );
 }

+QSGNode* QskTextFieldSkinlet::updateInputPanelNode(
+    const QskSkinnable* skinnable, QSGNode* node ) const
+{
+    const auto control = static_cast< const QskControl* >( skinnable );
+
+    const auto rect = control->subControlRect( Q::TextPanel );
+
+    auto hints = skinnable->boxHints( Q::TextPanel );
+
+    if ( panelMode( skinnable ) == 2 )
+    {
+        const auto clipRect = control->subControlRect( Q::Header );
+        if ( !clipRect.isEmpty() )
+        {
+            // "cutting a hole" in the upper gradient for the header
+            const auto margin = 6; // ->skin
+            auto s1 = ( clipRect.left() - margin - rect.left() ) / rect.width();
+            auto s2 = ( clipRect.right() - rect.left() ) / rect.width();
+
+            auto gradient = hints.borderColors.top();
+            gradient.setStops( qskClippedGradientStops( gradient.stops(), s1, s2 ) );
+            hints.borderColors.setTop( gradient );
+        }
+    }
+
+    return updateBoxNode( skinnable, node, rect, hints );
+}
+
+QSGNode* QskTextFieldSkinlet::updateLabelNode( const QskSkinnable* skinnable,
+    QSGNode* node, QskAspect::Subcontrol subControl  ) const
+{
+    const auto text = effectiveText( skinnable, subControl );
+    if ( text.isEmpty() )
+        return nullptr;
+
+    QskSkinHintStatus status;
+
+    auto options = skinnable->textOptionsHint( subControl, &status );
+    if ( !status.isValid() )
+        options.setElideMode( Qt::ElideRight );
+
+    auto rect = skinnable->controlCast()->contentsRect();
+    rect = subControlRect( skinnable, rect, subControl );
+
+    return updateTextNode( skinnable, node, rect,
+        skinnable->alignmentHint( subControl, Qt::AlignLeft ),
+        options, text, subControl );
+}
+
+QRectF QskTextFieldSkinlet::headerRect(
+    const QskSkinnable* skinnable, const QRectF& contentsRect ) const
+{
+    switch( panelMode( skinnable ) )
+    {
+        case 1:
+        {
+            const auto sz = effectiveTextSize( skinnable, Q::Header );
+
+            const auto r = subControlRect( skinnable, contentsRect, Q::Text );
+            return QRectF( r.x(), r.top() - sz.height(), sz.width(), sz.height() );
+        }
+        case 2:
+        {
+            const auto sz = effectiveTextSize( skinnable, Q::Header );
+
+            const auto r = subControlRect( skinnable, contentsRect, Q::TextPanel );
+
+            const auto x = r.left() + skinnable->paddingHint( Q::TextPanel ).left();
+            const auto y = r.top() - 0.5 * sz.height();
+
+            return QRectF( x, y, sz.width(), sz.height() );
+        }
+        default:
+            return alignedLabelRect( skinnable, contentsRect, Q::Header, Qt::AlignTop );
+    }
+}
+
+QRectF QskTextFieldSkinlet::inputPanelRect(
+    const QskSkinnable* skinnable, const QRectF& contentsRect ) const
+{
+    auto rect = skinnable->subControlContentsRect( contentsRect, Q::Panel );
+
+    const auto mode = panelMode( skinnable );
+
+    if ( mode == 0 )
+    {
+        qreal h = skinnable->effectiveFontHeight( Q::Text );
+        h = skinnable->outerBoxSize( Q::TextPanel, QSizeF( rect.width(), h ) ).height();
+        h = qMax( h, skinnable->strutSizeHint( Q::TextPanel ).height() );
+
+        /*
+            when having textfields in horizontal layouts you usually want
+            the text panels being vertically aligned - regardless of having
+            Q::Header/Q::Footer being available.
+         */
+
+        auto top = textHeight( skinnable, Q::Header );
+        auto bottom = textHeight( skinnable, Q::Footer );
+
+        if ( rect.height() < top + h + bottom )
+        {
+            if ( effectiveText( skinnable, Q::Footer ).isEmpty() )
+                bottom = 0.0;
+        }
+
+        if ( rect.height() < top + h + bottom )
+        {
+            if ( effectiveText( skinnable, Q::Header ).isEmpty() )
+                top = 0.0;
+        }
+
+        return QRectF( rect.left(), rect.top() + top, rect.width(), h );
+    }
+    else
+    {
+        if ( mode == 2 )
+        {
+            qreal h = 0.0;
+#if 0
+            h = effectiveTextHeight( skinnable, Q::Header );
+#else
+            if ( !text( skinnable, Q::Header ).isEmpty() )
+                h = skinnable->effectiveFontHeight( Q::Header );
+#endif
+            rect.setTop( rect.top() + 0.5 * h );
+        }
+
+        const auto h = skinnable->strutSizeHint( Q::TextPanel ).height();
+        rect.setHeight( h );
+
+        return rect;
+    }
+}
+
+QRectF QskTextFieldSkinlet::alignedLabelRect( const QskSkinnable* skinnable,
+    const QRectF& contentsRect, QskAspect::Subcontrol subControl,
+    Qt::Alignment alignment ) const
+{
+    const auto h = effectiveTextHeight( skinnable, subControl );
+    if ( h <= 0.0 )
+        return QRectF();
+
+    const auto m = skinnable->marginHint( subControl );
+
+    auto r = subControlRect( skinnable, contentsRect, Q::TextPanel );
+
+    const auto y = ( alignment & Qt::AlignTop )
+        ? r.top() - m.bottom() - h : r.bottom() + m.top();
+
+    return QRectF( r.left() + m.left(), y,
+        r.width() - m.left() - m.right(), h );
+}
+
 QSizeF QskTextFieldSkinlet::sizeHint( const QskSkinnable* skinnable,
    Qt::SizeHint which, const QSizeF& constraint ) const
 {
@ -89,30 +342,164 @@ QSizeF QskTextFieldSkinlet::sizeHint( const QskSkinnable* skinnable,
    if ( which != Qt::PreferredSize )
        return QSizeF();

-    const auto input = static_cast< const QskAbstractTextInput* >( skinnable );
+    const auto textField = static_cast< const QskTextField* >( skinnable );

-    auto hint = input->unwrappedTextSize();
-    hint = hint.grownBy( skinnable->marginHint( Q::Text ) );
+    auto hint = textField->unwrappedTextSize();
+    hint = hint.expandedTo( skinnable->strutSizeHint( Q::Text ) );

-    hint = input->outerBoxSize( Q::TextPanel, hint );
-    hint = hint.expandedTo( input->strutSizeHint( Q::TextPanel ) );
+    if( !skinnable->symbolHint( Q::Icon ).isEmpty() )
+    {
+        const auto sz = skinnable->strutSizeHint( Q::Icon );
+        if ( sz.width() > 0.0 )
+            hint.rwidth() += sz.width();
+
+        hint.rheight() = qMax( hint.height(), sz.height() );
+    }
+
+    if( !skinnable->symbolHint( Q::Button ).isEmpty() )
+    {
+        const auto sz = skinnable->strutSizeHint( Q::Button );
+        if ( sz.width() > 0.0 )
+            hint.rwidth() += sz.width();
+
+        hint.rheight() = qMax( hint.height(), sz.height() );
+    }
+
+    switch( panelMode( skinnable ) )
+    {
+        case 0:
+        {
+            hint = skinnable->outerBoxSize( Q::TextPanel, hint );
+            hint = hint.expandedTo( skinnable->strutSizeHint( Q::TextPanel ) );
+
+            hint.rheight() += effectiveTextHeight( skinnable, Q::Header );
+            break;
+        }
+        case 1:
+        {
+            hint = hint.expandedTo( skinnable->strutSizeHint( Q::TextPanel ) );
+            break;
+        }
+        case 2:
+        {
+            hint = hint.expandedTo( skinnable->strutSizeHint( Q::TextPanel ) );
+            hint.rheight() += 0.5 * skinnable->effectiveFontHeight( Q::Header );
+            break;
+        }
+    }
+
+    hint.rheight() += qMax(
+        effectiveTextHeight( skinnable, Q::Footer ),
+        effectiveTextHeight( skinnable, Q::CharacterCount )
+    );

    hint = skinnable->outerBoxSize( Q::Panel, hint );
-    hint = hint.expandedTo( skinnable->strutSizeHint( Q::Panel ) );
-
-    return hint;
+    return hint.expandedTo( skinnable->strutSizeHint( Q::Panel ) );
 }

-QString QskTextFieldSkinlet::effectivePlaceholderText(
-    const QskTextField* textField ) const
+qreal QskTextFieldSkinlet::textHeight( const QskSkinnable* skinnable,
+    QskAspect::Subcontrol subControl ) const
 {
-    if ( textField->text().isEmpty() &&
-        !( textField->isReadOnly() || textField->isEditing() ) )
-    {
+    auto h = skinnable->effectiveFontHeight( subControl );
+
+    const auto margins = skinnable->marginHint( subControl );
+    h += margins.top() + margins.bottom();
+
+    const auto sz = skinnable->strutSizeHint( subControl );
+
+    return qMax( h, sz.height() );
+}
+
+QSizeF QskTextFieldSkinlet::effectiveTextSize( const QskSkinnable* skinnable,
+    QskAspect::Subcontrol subControl ) const
+{
+    const auto text = effectiveText( skinnable, subControl );
+
+    const QFontMetricsF fm( skinnable->effectiveFont( subControl ) );
+
+    auto w = qskHorizontalAdvance( fm, effectiveText( skinnable, subControl ) );
+    auto h = fm.height();
+
+    const auto margins = skinnable->marginHint( subControl );
+    w += margins.left() + margins.right();
+    h += margins.top() + margins.bottom();
+
+    QSizeF sz( w, h );
+    sz = sz.expandedTo( skinnable->strutSizeHint( subControl ) );
+
+    return sz;
+}
+
+QString QskTextFieldSkinlet::text(
+    const QskSkinnable* skinnable, QskAspect::Subcontrol subControl ) const
+{
+    const auto textField = static_cast< const QskTextField* >( skinnable );
+
+    if ( subControl == Q::Text )
+        return textField->text();
+
+    if ( subControl == Q::Placeholder )
        return textField->placeholderText();
-    }
+
+    if ( subControl == Q::Header )
+        return textField->headerText();
+
+    if ( subControl == Q::Footer )
+        return textField->footerText();
+
+    if ( subControl == Q::CharacterCount )
+        return qskEffectiveCharacterCountText( textField );

    return QString();
 }

+bool QskTextFieldSkinlet::isPlaceholderVisible(
+    const QskSkinnable* skinnable ) const
+{
+    return !skinnable->hasSkinState( Q::Editing )
+        && text( skinnable, Q::Text ).isEmpty();
+}
+
+bool QskTextFieldSkinlet::hasText(
+    const QskSkinnable* skinnable, QskAspect::Subcontrol subControl ) const
+{
+    return !effectiveText( skinnable, subControl ).isEmpty();
+}
+
+QString QskTextFieldSkinlet::effectiveText(
+    const QskSkinnable* skinnable, QskAspect::Subcontrol subControl ) const
+{
+    if ( subControl == Q::Placeholder )
+    {
+        if ( !isPlaceholderVisible( skinnable ) )
+            return QString();
+
+        auto txt = text( skinnable, Q::Placeholder );
+        if ( txt.isEmpty() && ( renderHints() & UseHeaderAsPlaceholder ) )
+            txt = text( skinnable, Q::Header );
+
+        return txt;
+    }
+
+    if ( subControl == Q::Header )
+    {
+        if ( isPlaceholderVisible( skinnable )
+            && ( renderHints() & UseHeaderAsPlaceholder ) )
+        {
+            return QString();
+        }
+     
+        return text( skinnable, Q::Header );
+    }
+
+    return text( skinnable, subControl );
+}
+
+qreal QskTextFieldSkinlet::effectiveTextHeight(
+    const QskSkinnable* skinnable, QskAspect::Subcontrol subcontrol ) const
+{
+    const auto text = effectiveText( skinnable, subcontrol );
+    return text.isEmpty() ? 0.0 : textHeight( skinnable, subcontrol );
+}
+
 #include "moc_QskTextFieldSkinlet.cpp"
--- a/src/controls/QskTextFieldSkinlet.h
+++ b/src/controls/QskTextFieldSkinlet.h
@ -19,15 +19,34 @@ class QSK_EXPORT QskTextFieldSkinlet : public QskSkinlet
  public:
    enum NodeRole : quint8
    {
-        PanelRole,
        TextPanelRole,
+
+        HeaderRole,
+        FooterRole,
+        CharacterCountRole,
+
        PlaceholderRole,
+        IconRole,
+        ButtonPanelRole,
+        ButtonRole,
+
        RoleCount
    };

+    enum RenderHint
+    {
+        UseHeaderAsPlaceholder = 1 << 0
+    };
+
+    Q_ENUM( RenderHint )
+    Q_DECLARE_FLAGS( RenderHints, RenderHint )
+
    Q_INVOKABLE QskTextFieldSkinlet( QskSkin* = nullptr );
    ~QskTextFieldSkinlet() override;

+    void setRenderHints( RenderHints );
+    RenderHints renderHints() const;
+
    QRectF subControlRect( const QskSkinnable*,
        const QRectF& rect, QskAspect::Subcontrol ) const override;

@ -38,7 +57,35 @@ class QSK_EXPORT QskTextFieldSkinlet : public QskSkinlet
    QSGNode* updateSubNode( const QskSkinnable*,
        quint8 nodeRole, QSGNode* ) const override;

-    virtual QString effectivePlaceholderText( const QskTextField* ) const;
+    QSGNode* updateLabelNode( const QskSkinnable*,
+        QSGNode*, QskAspect::Subcontrol ) const;
+
+    QString effectiveText( const QskSkinnable*,
+        QskAspect::Subcontrol ) const;
+
+    QString text( const QskSkinnable*, QskAspect::Subcontrol ) const;
+
+    qreal textHeight( const QskSkinnable*, QskAspect::Subcontrol ) const;
+    bool hasText( const QskSkinnable*, QskAspect::Subcontrol ) const;
+
+    QSizeF effectiveTextSize( const QskSkinnable*, QskAspect::Subcontrol ) const;
+    qreal effectiveTextHeight( const QskSkinnable*, QskAspect::Subcontrol ) const;
+
+  private:
+    QRectF headerRect( const QskSkinnable*, const QRectF& ) const;
+    QRectF inputPanelRect( const QskSkinnable*, const QRectF& ) const;
+    QSGNode* updateInputPanelNode( const QskSkinnable*, QSGNode* ) const;
+
+    QRectF alignedLabelRect( const QskSkinnable*, const QRectF&,
+        QskAspect::Subcontrol, Qt::Alignment ) const;
+
+    bool isPlaceholderVisible( const QskSkinnable* ) const;
+
+    virtual int panelMode( const QskSkinnable* ) const { return 0; }
+
+    RenderHints m_renderHints;
 };

+Q_DECLARE_OPERATORS_FOR_FLAGS( QskTextFieldSkinlet::RenderHints )
+
 #endif
--- a/src/controls/QskTextInput.cpp
+++ b/src/controls/QskTextInput.cpp
@ -161,7 +161,7 @@ QskTextInput::QskTextInput( QQuickItem* parent )
    setAcceptedMouseButtons( wrappedInput->acceptedMouseButtons() );
    wrappedInput->setAcceptedMouseButtons( Qt::NoButton );

-    initSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Fixed );
+    initSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Minimum );

    setup( wrappedInput );

--- a/src/controls/QskVariantAnimator.cpp
+++ b/src/controls/QskVariantAnimator.cpp
@ -13,6 +13,7 @@
 #include "QskGraduationMetrics.h"
 #include "QskColorFilter.h"
 #include "QskGradient.h"
+#include "QskGradientStop.h"
 #include "QskMargins.h"
 #include "QskIntervalF.h"
 #include "QskTextColors.h"
@ -43,6 +44,7 @@ static void qskRegisterInterpolator()
    qRegisterAnimationInterpolator< QskColorFilter >( QskColorFilter::interpolate );
    qRegisterAnimationInterpolator< QskIntervalF >( QskIntervalF::interpolate );
    qRegisterAnimationInterpolator< QskMargins >( QskMargins::interpolate );
+    qRegisterAnimationInterpolator< QskGradientStop >( QskGradientStop::interpolate );
    qRegisterAnimationInterpolator< QskGradient >( QskGradient::interpolate );
    qRegisterAnimationInterpolator< QskBoxShapeMetrics >( QskBoxShapeMetrics::interpolate );
    qRegisterAnimationInterpolator< QskBoxBorderMetrics >( QskBoxBorderMetrics::interpolate );
--- a/src/nodes/QskGradientMaterial.cpp
+++ b/src/nodes/QskGradientMaterial.cpp
@ -54,16 +54,16 @@ namespace
        }

 #if QT_VERSION >= QT_VERSION_CHECK( 6, 0, 0 )
-        // make Qt 5/6 APIs matching
-
        QSGMaterialShader* createShader(
            QSGRendererInterface::RenderMode ) const override final
+#else
+        QSGMaterialShader* createShader() const override final
+#endif
        {
-            return createShader();
+            return createMaterialShader();
        }

-        virtual QSGMaterialShader* createShader() const = 0;
-#endif
+        virtual QSGMaterialShader* createMaterialShader() const = 0;

        virtual bool setGradient( const QskGradient& ) = 0;
    };
@ -217,7 +217,7 @@ namespace
                return GradientMaterial::compare( other );
        }

-        QSGMaterialShader* createShader() const override;
+        QSGMaterialShader* createMaterialShader() const override;

        /*
            xy: position
@ -299,7 +299,7 @@ namespace
    };
 #endif

-    QSGMaterialShader* LinearMaterial::createShader() const
+    QSGMaterialShader* LinearMaterial::createMaterialShader() const
    {
 #if QT_VERSION < QT_VERSION_CHECK( 6, 0, 0 )
        if ( !( flags() & QSGMaterial::RhiShaderWanted ) )
@ -371,7 +371,7 @@ namespace
            }
        }

-        QSGMaterialShader* createShader() const override;
+        QSGMaterialShader* createMaterialShader() const override;

        QVector2D m_center;
        QVector2D m_radius;
@ -465,7 +465,7 @@ namespace
    };
 #endif

-    QSGMaterialShader* RadialMaterial::createShader() const
+    QSGMaterialShader* RadialMaterial::createMaterialShader() const
    {
 #ifdef SHADER_GL
        if ( !( flags() & QSGMaterial::RhiShaderWanted ) )
@ -575,7 +575,7 @@ namespace
            return GradientMaterial::compare( other );
        }

-        QSGMaterialShader* createShader() const override;
+        QSGMaterialShader* createMaterialShader() const override;

        QVector2D m_center;
        float m_aspectRatio = 1.0;
@ -685,7 +685,7 @@ namespace
    };
 #endif

-    QSGMaterialShader* ConicMaterial::createShader() const
+    QSGMaterialShader* ConicMaterial::createMaterialShader() const
    {
 #ifdef SHADER_GL
        if ( !( flags() & QSGMaterial::RhiShaderWanted ) )
Author	SHA1	Message	Date
Uwe Rathmann	c7012fe24a	material specific decorations generalized and moved to QskTextFieldSkinlet	2025-05-15 14:00:07 +02:00
Uwe Rathmann	7305502de0	from master	2025-05-15 11:46:15 +02:00
Uwe Rathmann	cc5229f7a3	from master	2025-05-15 11:41:27 +02:00
Uwe Rathmann	23a7859de6	minor code rearrangements	2025-03-17 11:37:06 +01:00
Uwe Rathmann	36bea57477	Outlined/Filled moved to gallery code	2025-03-14 14:06:38 +01:00
Uwe Rathmann	2c34318c00	Merge branch 'master' into features/textinputs	2025-03-14 10:48:27 +01:00
Uwe Rathmann	38e1820272	Merge branch 'master' into features/textinputs	2025-03-12 13:37:25 +01:00
Uwe Rathmann	07e425195b	Merge branch 'master' into features/textinputs	2025-03-10 15:02:08 +01:00
Uwe Rathmann	edad453505	QskTextField wip	2025-03-10 15:01:29 +01:00
Uwe Rathmann	04fbb2a2a1	Merge branch 'master' into features/textinputs	2025-02-28 09:41:29 +01:00
Uwe Rathmann	5da7aa8211	rebased from master	2025-02-07 11:35:36 +01:00