@progress/kendo-theme-default 10.1.0-dev.4 → 10.1.0-dev.6

package/scss/checkbox/_layout.scss

@@ -26,6 +26,13 @@
 
     // Checkbox indicator
     .k-checkbox::before {
+        @if $kendo-checkbox-indicator-type == "image" {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            mask-repeat: no-repeat;
+        }
         @if $kendo-checkbox-indicator-type == "glyph" {
             content: $kendo-checkbox-checked-glyph;
             width: 1em;
@@ -40,12 +47,14 @@
         }
     }
 
-
     // Checked state
     .k-checkbox:checked,
     .k-checkbox.k-checked {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: $kendo-checkbox-checked-image;
+            &::before {
+                background-color: currentColor;
+                mask-image: $kendo-checkbox-checked-image;
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "glyph" {
@@ -60,7 +69,10 @@
     .k-checkbox:indeterminate,
     .k-checkbox.k-indeterminate {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: $kendo-checkbox-indeterminate-image;
+            &::before {
+                background-color: currentColor;
+                mask-image: $kendo-checkbox-indeterminate-image;
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "glyph" {

package/scss/checkbox/_variables.scss

@@ -160,10 +160,10 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// The image for a checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image for a indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // CheckBox label

package/scss/dock-manager/_layout.scss

@@ -157,6 +157,10 @@
         z-index: 10;
     }
 
+    .k-dock-manager-window:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin kendo-dock-navigator--layout() {

package/scss/index.scss

@@ -114,6 +114,7 @@
 @forward "./map/_index.scss";
 @forward "./orgchart/_index.scss";
 @forward "./signature/_index.scss";
+@forward "./otp/_index.scss";
 
 
 // Use component modules
@@ -200,6 +201,7 @@
 @use "./switch/_index.scss" as *;
 @use "./upload/_index.scss" as *;
 @use "./dropzone/_index.scss" as *;
+@use "./otp/_index.scss" as *;
 
 
 // Command interfaces
@@ -372,6 +374,7 @@
     @include kendo-switch--styles();
     @include kendo-upload--styles();
     @include kendo-dropzone--styles();
+    @include kendo-otp--styles();
 
 
     // Command interfaces

package/scss/input/_layout.scss

@@ -237,6 +237,58 @@
         }
     }
 
+    // Input group
+    .k-input-group {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        box-sizing: border-box;
+        list-style: none;
+        outline: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        > .k-input + .k-input {
+            margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width );
+        }
+
+        > .k-input:hover,
+        > .k-input.k-hover,
+        > .k-input:focus,
+        > .k-input:focus-within,
+        > .k-input.k-focus,
+        > .k-input:active,
+        > .k-input.k-active,
+        > .k-input.k-selected {
+            z-index: 2;
+        }
+
+        .k-input:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+        > .k-input:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+        > .k-input:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+    }
 
     // Input with icon styles
     .k-input-icon,

package/scss/input/_theme.scss

@@ -10,6 +10,7 @@
             $kendo-input-bg,
             $kendo-input-border
         );
+        @include box-shadow( $kendo-input-shadow );
 
         // Hover
         &:hover,

package/scss/input/_variables.scss

@@ -72,6 +72,13 @@ $kendo-input-md-line-height: $kendo-input-line-height !default;
 /// @group input
 $kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
+/// The calculated height of the Input.
+/// @group input
+$kendo-input-calc-size: calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+
 /// The sizes map for the Input components.
 /// @group input
 $kendo-input-sizes: (

package/scss/otp/_index.scss

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

package/scss/otp/_layout.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+@mixin kendo-otp--layout-base() {
+    // OTP
+    .k-otp {
+        display: flex;
+        width: min-content;
+        align-items: center;
+        flex-direction: row;
+
+        .k-otp-input > .k-input-inner {
+            text-align: center;
+            padding-inline: 0;
+        }
+    }
+
+    @each $size, $size-props in $kendo-otp-sizes {
+        $_gap: map.get($size-props, gap);
+        $_separator-padding-x: map.get($size-props, separator-padding-x);
+        $_input-width: map.get($size-props, input-width);
+
+        .k-otp-#{$size} {
+            gap: $_gap;
+
+            .k-otp-input {
+                min-width: $_input-width;
+            }
+
+            .k-otp-separator:not(:empty) {
+                padding-inline: $_separator-padding-x;
+            }
+        }
+    }
+}
+
+@mixin kendo-otp--layout() {
+    @include kendo-otp--layout-base();
+}

package/scss/otp/_theme.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+@mixin kendo-otp--theme-base() {
+
+    // OTP
+    .k-otp {};
+
+}
+
+@mixin kendo-otp--theme() {
+    @include kendo-otp--theme-base();
+}

package/scss/otp/_variables.scss

@@ -0,0 +1,61 @@
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+// OTP
+
+/// The gap between the items in the OTP.
+/// @group one-time-password
+$kendo-otp-gap: k-spacing(1.5) !default;
+/// The gap between the items in the small OTP.
+/// @group one-time-password
+$kendo-otp-sm-gap: k-spacing(1) !default;
+/// The gap between the items in the medium OTP.
+/// @group one-time-password
+$kendo-otp-md-gap: $kendo-otp-gap !default;
+/// The gap between the items in the large OTP.
+/// @group one-time-password
+$kendo-otp-lg-gap: k-spacing(2) !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-input-width: $kendo-input-calc-size !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-input-width: $kendo-otp-input-width !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
+
+$kendo-otp-sizes: (
+    sm: (
+        gap: $kendo-otp-sm-gap,
+        separator-padding-x: $kendo-otp-sm-separator-padding-x,
+        input-width: $kendo-otp-sm-input-width
+    ),
+    md: (
+        gap: $kendo-otp-md-gap,
+        separator-padding-x: $kendo-otp-md-separator-padding-x,
+        input-width: $kendo-otp-md-input-width
+    ),
+    lg: (
+        gap: $kendo-otp-lg-gap,
+        separator-padding-x: $kendo-otp-lg-separator-padding-x,
+        input-width: $kendo-otp-lg-input-width
+    )
+) !default;

package/scss/pdf-viewer/_layout.scss

@@ -149,6 +149,7 @@
 
                 section {
                     position: absolute;
+                    pointer-events: auto;
                 }
 
                 .k-annotation-text-content {
@@ -160,6 +161,14 @@
                     user-select: none;
                     pointer-events: none;
                 }
+
+                .k-link-annotation > a {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                }
             }
 
             .k-annotation-editor-layer {
@@ -193,6 +202,12 @@
                         height: 100%;
                         pointer-events: auto;
                     }
+
+                    &.k-highlight-editor-disabled {
+                        .k-internal {
+                            pointer-events: none;
+                        }
+                    }
                 }
 
                 .k-free-text-editor {

package/scss/radio/_layout.scss

@@ -40,6 +40,14 @@
             top: 50%;
             left: 50%;
         }
+
+        @if $kendo-radio-indicator-type == "image" {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            mask-repeat: no-repeat;
+        }
     }
 
 
@@ -47,7 +55,10 @@
     .k-radio:checked,
     .k-radio.k-checked {
         @if $kendo-radio-indicator-type == "image" {
-            background-image: $kendo-radio-checked-image;
+            &::before {
+                background-color: currentColor;
+                mask-image: $kendo-radio-checked-image;
+            }
         }
 
         @if $kendo-radio-indicator-type == "glyph" {

package/scss/radio/_variables.scss

@@ -153,7 +153,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// The image of the checked RadioButton indicator.
 /// @group radio
-$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#ffffff'/></svg>") ) !default;
 /// The image of the disabled and checked RadioButton indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

package/scss/tabstrip/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
@@ -169,11 +170,94 @@
     // Scrolling
     .k-tabstrip-scrollable {
         > .k-tabstrip-items-wrapper {
-
             > .k-tabstrip-items {
                 flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
+
+                &.k-tabstrip-items-scroll {
+                    scrollbar-width: none;
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items.k-tabstrip-items-scroll {
+                overflow-x: auto;
+            }
+        }
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            .k-tabstrip-items.k-tabstrip-items-scroll {
+                overflow-y: auto;
+            }
+        }
+    }
+
+    .k-tabstrip-scrollable-overlay {
+        .k-tabstrip-items-wrapper {
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                z-index: 3;
+            }
+        }
+
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before,
+                &::after {
+                    height: 100%;
+                    aspect-ratio: 1;
+                }
+                &::before {
+                    inset-inline-start: 0;
+                }
+
+                &::after {
+                    inset-inline-end: 0;
+                }
+            }
+        }
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            .k-tabstrip-items-wrapper {
+                &::before,
+                &::after {
+                    width: 100%;
+                }
+                &::before {
+                    inset-block-start: 0;
+                }
+
+                &::after {
+                    inset-block-end: 0;
+                }
+            }
+        }
+
+        &.k-tabstrip-scrollable-start {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    display: none;
+                }
+            }
+        }
+
+        &.k-tabstrip-scrollable-end {
+            .k-tabstrip-items-wrapper {
+                &::after {
+                    display: none;
+                }
             }
         }
     }
@@ -375,6 +459,30 @@
 
     }
 
+     // TabStrip sizes
+     @each $size, $size-props in $kendo-tabstrip-sizes {
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_item-padding-x: map.get( $size-props, item-padding-x );
+        $_item-padding-y: map.get( $size-props, item-padding-y );
+
+        .k-tabstrip-#{$size} {
+            .k-tabstrip-items .k-link {
+                font-size: $_font-size;
+                line-height: $_line-height;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
+            }
+
+            :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
+                &::before,
+                &::after {
+                    height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
+                }
+            }
+        }
+    }
+
 }
 
 

package/scss/tabstrip/_theme.scss

@@ -101,6 +101,53 @@
         }
     }
 
+    // Scrolling
+    .k-tabstrip-scrollable-overlay {
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                }
+            }
+        }
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay);
+                }
+            }
+        }
+    }
+}
+
+// RTL
+.k-rtl,
+[dir="rtl"] {
+    &.k-tabstrip-scrollable-overlay {
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
+                }
+            }
+        }
+    }
 }
 
 

package/scss/tabstrip/_variables.scss

@@ -27,6 +27,25 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -62,6 +81,24 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(1) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -162,3 +199,30 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
+
+/// The left and right scroll overlay of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-md-font-size,
+        line-height: $kendo-tabstrip-md-line-height,
+        item-padding-x: $kendo-tabstrip-md-item-padding-x,
+        item-padding-y: $kendo-tabstrip-md-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;