@progress/kendo-theme-fluent 11.1.0-dev.6 → 11.1.0-dev.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "11.1.0-dev.6",
+  "version": "11.1.0-dev.8",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "11.1.0-dev.6",
-    "@progress/kendo-theme-utils": "11.1.0-dev.6"
+    "@progress/kendo-theme-core": "11.1.0-dev.8",
+    "@progress/kendo-theme-utils": "11.1.0-dev.8"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "2bfdc0d1f3d785894ad99f35f140cc6219c06fa2"
+  "gitHead": "af53b1e95dabc215115b604f2e80c6716be3d3cb"
 }

package/scss/button/_layout.scss

@@ -302,6 +302,23 @@
         }
     }
 
+    // Button generating state
+    .k-button.k-generating {
+        animation: k-button-pulsing 1.5s ease-in-out 0.5s infinite;
+    }
+
+    @keyframes k-button-pulsing {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: $kendo-button-pulsing-opacity;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
 
     // Button group
     .k-button-group {

package/scss/button/_variables.scss

@@ -119,6 +119,10 @@ $kendo-button-link-focus-offset: 0 !default;
 /// @group button
 $kendo-button-link-focus-outline-width: 1px !default;
 
+/// The opacity of the pulsing animation for the generating Button.
+/// @group button
+$kendo-button-pulsing-opacity: .6 !default;
+
 // The theme variations for the Button.
 
 $kendo-button-brand-colors: (

package/scss/index.scss

@@ -15,6 +15,7 @@
 @forward "./stacklayout/_index.scss";
 @forward "./virtual-scroller/_index.scss";
 @forward "./no-data/_index.scss";
+@forward "./suggestion/_index.scss";
 @forward "./avatar/_index.scss";
 @forward "./badge/_index.scss";
 @forward "./color-preview/_index.scss";
@@ -143,6 +144,7 @@
 @use "./table/index.scss" as *;
 @use "./virtual-scroller/index.scss" as *;
 @use "./no-data/index.scss" as *;
+@use "./suggestion/index.scss" as *;
 @use "./column-menu/_index.scss" as *;
 
 
@@ -320,6 +322,7 @@
     @include kendo-table--styles();
     @include kendo-virtual-scroller--styles();
     @include kendo-no-data--styles();
+    @include kendo-suggestion--styles();
     @include kendo-column-menu--styles();
 
 

package/scss/speech-to-text-button/_layout.scss

@@ -4,19 +4,7 @@
 
     .k-speech-to-text-button {
         &.k-listening {
-            animation: k-speech-to-text-button-listening 1.5s ease-in-out 0.5s infinite;
-        }
-    }
-
-    @keyframes k-speech-to-text-button-listening {
-        0% {
-            opacity: 1;
-        }
-        50% {
-            opacity: $kendo-speech-to-text-button-listening-opacity;
-        }
-        100% {
-            opacity: 1;
+            animation: k-button-pulsing 1.5s ease-in-out 0.5s infinite;
         }
     }
 }

package/scss/speech-to-text-button/_variables.scss

@@ -1,3 +1 @@
-/// The opacity applied to the listening SpeechToTextButton
-/// @group speech-to-text-button
-$kendo-speech-to-text-button-listening-opacity: 0.6 !default;
+// Speech-to-text button

package/scss/suggestion/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-suggestion--styles() {
+    @include import-once( "suggestion" ) {
+        @include core-styles();
+        @include kendo-suggestion--layout();
+        @include kendo-suggestion--theme();
+    }
+}

package/scss/suggestion/_layout.scss

@@ -0,0 +1,43 @@
+@use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
+
+@mixin kendo-suggestion--layout() {
+     .k-suggestion-scrollwrap {
+        width: 100%;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+        gap: $kendo-suggestion-spacing;
+
+        .k-suggestion-group {
+            padding-block: $kendo-suggestion-padding-y;
+            flex: 1 1 auto;
+            flex-wrap: nowrap;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+
+    .k-suggestion-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $kendo-suggestion-spacing;
+
+    }
+    .k-suggestion {
+        @include border-radius( $kendo-suggestion-border-radius );
+        padding-block: $kendo-suggestion-padding-y;
+        padding-inline: $kendo-suggestion-padding-x;
+        box-sizing: border-box;
+        border-width: $kendo-suggestion-border-width;
+        border-style: $kendo-suggestion-border-style;
+        line-height: $kendo-suggestion-line-height;
+        flex: 0 0 auto;
+        transition-property: color, background-color, border-color;
+        transition-duration: .2s;
+        transition-timing-function: ease-in-out;
+        outline: none;
+    }
+}

package/scss/suggestion/_theme.scss

@@ -0,0 +1,79 @@
+@use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
+
+@mixin kendo-suggestion--theme() {
+    .k-suggestion {
+        @include fill(
+            $kendo-suggestion-text,
+            $kendo-suggestion-bg,
+            $kendo-suggestion-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-suggestion-hover-text,
+                $kendo-suggestion-hover-bg,
+                $kendo-suggestion-hover-border
+            );
+        }
+
+        &:active,
+        &.k-active {
+            @include fill(
+                $kendo-suggestion-active-text,
+                $kendo-suggestion-active-bg,
+                $kendo-suggestion-active-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            outline: 1px solid k-color(surface);
+            outline-offset: -2px;
+            box-shadow: inset 0 0 $kendo-suggestion-focus-shadow-blur $kendo-suggestion-focus-shadow-spread $kendo-suggestion-focus-shadow-color;
+        }
+    }
+
+    @each $name, $props in $kendo-suggestion-theme-colors {
+        
+        $_suggestion-text: k-color(#{$name}-on-subtle);
+        $_suggestion-bg: k-color(#{$name}-subtle);
+        $_suggestion-border: k-color(#{$name}-emphasis);
+
+        $_suggestion-hover-text: k-color(#{$name}-on-subtle);
+        $_suggestion-hover-bg: k-color(#{$name}-subtle-hover);
+        $_suggestion-hover-border: k-color(#{$name}-emphasis);
+
+        $_suggestion-active-text: k-color(#{$name}-on-subtle);
+        $_suggestion-active-bg: k-color(#{$name}-subtle-active);
+        $_suggestion-active-border: k-color(#{$name}-emphasis);
+
+            
+        .k-suggestion-#{$name} {
+            @include fill(
+                $_suggestion-text,
+                $_suggestion-bg,
+                $_suggestion-border
+            );
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $_suggestion-hover-text,
+                    $_suggestion-hover-bg,
+                    $_suggestion-hover-border
+                );
+            }
+
+            &:active,
+            &.k-active {
+                @include fill(
+                    $_suggestion-active-text,
+                    $_suggestion-active-bg,
+                    $_suggestion-active-border
+                );
+            }
+        }
+    }
+}

package/scss/suggestion/_variables.scss

@@ -0,0 +1,70 @@
+@use "../core/_index.scss" as *;
+
+
+/// The vertical padding of the Suggestion wrapper.
+/// @group suggestion
+$kendo-suggestion-padding-y: k-spacing(2) !default;
+/// The horizontal padding of the Suggestion wrapper.
+/// @group suggestion
+$kendo-suggestion-padding-x: k-spacing(3) !default;
+/// The horizontal padding of the Suggestion wrapper.
+/// @group suggestion
+$kendo-suggestion-spacing: k-spacing(2) !default;
+/// The border width of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-border-width: 1px !default;
+/// The border style of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-border-style: solid !default;
+
+/// The line height of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-line-height: var( --kendo-line-height, normal ) !default;
+/// The border radius of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-border-radius: k-border-radius(xxl) !default;
+
+/// The background color of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-bg: k-color(base-subtle) !default;
+/// The text color of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-text: k-color(base-on-subtle) !default;
+/// The border color of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-border: k-color(base-emphasis) !default;
+
+/// The background color of the hovered Suggestion.
+/// @group suggestion
+$kendo-suggestion-hover-bg: k-color(base-subtle-hover) !default;
+/// The text color of the hovered Suggestion.
+/// @group suggestion
+$kendo-suggestion-hover-text: k-color(base-on-subtle) !default;
+/// The border color of the hovered Suggestion.
+/// @group suggestion
+$kendo-suggestion-hover-border: k-color(base-emphasis) !default;
+
+/// The background color of the active Suggestion.
+/// @group suggestion
+$kendo-suggestion-active-bg: k-color(base-subtle-active) !default;
+/// The text color of the active Suggestion.
+/// @group suggestion
+$kendo-suggestion-active-text: k-color(base-on-subtle) !default;
+/// The border color of the active Suggestion.
+/// @group suggestion
+$kendo-suggestion-active-border: k-color(base-emphasis) !default;
+
+/// The shadow blur of the focused Suggestion.
+/// @group suggestion
+$kendo-suggestion-focus-shadow-blur: 0 !default;
+/// The shadow spread of the focused Suggestion.
+/// @group suggestion
+$kendo-suggestion-focus-shadow-spread: 2px !default;
+/// The shadow color of the focused Suggestion.
+/// @group suggestion
+$kendo-suggestion-focus-shadow-color: k-color(border-alt) !default;
+
+$kendo-suggestion-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary)
+) !default;