material: added FliterChip

component-sets/material/examples/gallery/ui/views/navigation_view.slint

@@ -333,8 +333,9 @@ export component NavigationView {
                             icon: OutlinedIcons.calendar_month;
                         }
 
-                        FilterChip {
+                        fc := FilterChip {
-                            
+                            checked: true;
+                            text: "Filter";   
                         }
 
                         InputChip {
@@ -354,7 +355,9 @@ export component NavigationView {
                         }
 
                         FilterChip {
-    
+                            checked: fc.checked;
+                            text: "Filter";
+                            enabled: false;
                         }
 
                         InputChip {

component-sets/material/ui/components/chip.slint

@@ -5,6 +5,8 @@ import { BaseButton } from "./base_button.slint";
 import { Typography } from "../styling/typography.slint";
 import { MaterialPalette } from "../styling/material_palette.slint";
 import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
+import { Icons } from "../icons/icons.slint";
+import { Animations } from "../styling/animations.slint";
 
 export component ActionChip {
     in property <image> icon <=> base.icon;
@@ -16,6 +18,7 @@ export component ActionChip {
 
     callback clicked <=> base.clicked;
 
+    forward-focus: base;
     accessible-role: button;
     accessible-enabled: root.enabled;
     accessible-label: root.text == "" ? root.tooltip : root.text;
@@ -48,7 +51,64 @@ export component ActionChip {
 }
 
 export component FilterChip {   
+    in property <string> text <=> base.text;
+    in property <bool> enabled <=> base.enabled;
+    in property <string> tooltip <=> base.tooltip;
+    in_out property <bool> checked;
 
+    forward-focus: base;
+    accessible-role: button;
+    accessible-enabled: root.enabled;
+    accessible-label: root.text == "" ? root.tooltip : root.text;
+    accessible-checkable: true;
+    accessible-checked: root.checked;
+    accessible-action-default => { base.clicked(); }
+    
+    border := Rectangle {
+        border_radius: base.border_radius;
+        border_width: 1px;
+        border_color: MaterialPalette.outline;
+
+        
+        base := BaseButton {
+            min_layout_height: MaterialStyleMetrics.size_32;
+            border_radius: MaterialStyleMetrics.border_radius_8;
+            color: MaterialPalette.on_surface;
+            icon_color: MaterialPalette.primary;
+            spacing: MaterialStyleMetrics.spacing_8;
+            padding_left: self.has_icon ? MaterialStyleMetrics.padding_8 : MaterialStyleMetrics.padding_16;
+            padding_right:MaterialStyleMetrics.padding_16;
+            vertical_padding: MaterialStyleMetrics.padding_6;
+            avatar_size: MaterialStyleMetrics.size_18;
+
+            clicked => {
+                root.toggle();
+            }
+        }
+
+        states [
+            checked when root.checked : {
+                base.icon: Icons.check;
+                base.icon_color: MaterialPalette.on_secondary_container;
+                base.color: MaterialPalette.on_secondary_container;
+                border.border_width: 0;
+                border.background: MaterialPalette.secondary_container;
+            }
+        ]
+        
+        animate width { duration: Animations.standard_accelerate_duration; easing: Animations.standard_easing; }
+    }
+   
+    function toggle() {
+        root.checked = !root.checked;
+    }
+
+    states [
+        disabled when !root.enabled : {
+            base.display_background: false;
+            base.icon_color: MaterialPalette.on_surface;
+        }
+    ]
 }
 
 export component InputChip {

component-sets/material/ui/components/segmented_button.slint

@@ -5,6 +5,7 @@ import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
 import { MaterialPalette } from "../styling/material_palette.slint";
 import { BaseButton } from "base_button.slint";
 import { Icons } from "../icons/icons.slint";
+import { Animations } from "../styling/animations.slint";
 
 export struct SegmentedItem {
     icon: image,
@@ -39,6 +40,9 @@ component SegmentedItemTemplate {
         spacing: MaterialStyleMetrics.spacing_8;
         icon: root.icon;
         text: root.text;
+
+        
+        animate width { duration: Animations.standard_accelerate_duration; easing: Animations.standard_easing; }
     }
 
     if !root.last : Rectangle {

component-sets/material/ui/components/state_layer.slint

@@ -96,7 +96,7 @@ export component StateLayerArea inherits TouchArea {
 
     callback key_pressed(KeyEvent) -> EventResult;
 
-    forward-focus: focus-scope;
+    forward-focus: focus_scope;
 
     focus_scope := FocusScope {
         x: 0;