@progress/kendo-theme-fluent 5.7.0

package/scss/scheduler/_theme.scss

@@ -0,0 +1,249 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-scheduler--theme() {
+
+    .k-scheduler {
+        @include fill(
+            var( --kendo-scheduler-text, #{$kendo-scheduler-text} ),
+            var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} ),
+            var( --kendo-scheduler-border, #{$kendo-scheduler-border} )
+        );
+    }
+
+    // Current time
+    .k-current-time {
+        background: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+
+        &.k-current-time-arrow-left {
+            border-right-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+        }
+
+        &.k-current-time-arrow-right {
+            border-left-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+        }
+
+        &.k-current-time-arrow-down {
+            border-top-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+        }
+    }
+
+    // Header and footer
+    .k-scheduler-toolbar {
+        @include fill(
+            var( --kendo-scheduler-toolbar-text, #{$kendo-scheduler-toolbar-text} ),
+            var( --kendo-scheduler-toolbar-bg, #{$kendo-scheduler-toolbar-bg} ),
+            var( --kendo-scheduler-toolbar-border, #{$kendo-scheduler-toolbar-border} ),
+            var( --kendo-scheduler-toolbar-gradient, #{$kendo-scheduler-toolbar-gradient} )
+        );
+    }
+    .k-scheduler-footer {
+        @include fill(
+            var( --kendo-scheduler-footer-text, #{$kendo-scheduler-footer-text} ),
+            var( --kendo-scheduler-footer-bg, #{$kendo-scheduler-footer-bg} ),
+            var( --kendo-scheduler-footer-border, #{$kendo-scheduler-footer-border} ),
+            var( --kendo-scheduler-footer-gradient, #{$kendo-scheduler-footer-gradient} )
+        );
+    }
+
+    .k-scheduler-header {
+       background-color: var( --kendo-scheduler-toolbar-bg, #{$kendo-scheduler-toolbar-bg} );
+    }
+
+    .k-scheduler-header-wrap {
+        background-color: var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} );
+    }
+
+
+    //Scheduler navigation
+    .k-scheduler-navigation {}
+
+
+    // View switcher
+    .k-scheduler-views {}
+
+
+    // Scheduler footer
+    .k-scheduler-footer {}
+
+
+    // Scheduler content
+    .k-scheduler-content {}
+
+    .k-scheduler-nonwork,
+    .k-scheduler .k-nonwork-hour {
+        @include fill(
+            var( --kendo-scheduler-nonwork-text, #{$kendo-scheduler-nonwork-text} ),
+            var( --kendo-scheduler-nonwork-bg, #{$kendo-scheduler-nonwork-bg} )
+        );
+    }
+
+    .k-scheduler-other-month,
+    .k-scheduler .k-other-month {
+        @include fill(
+            var( --kendo-scheduler-othermonth-text, #{$kendo-scheduler-othermonth-text} ),
+            var( --kendo-scheduler-othermonth-bg, #{$kendo-scheduler-othermonth-bg} )
+        );
+    }
+
+    .k-scheduler-layout td.k-selected,
+    .k-scheduler-layout .k-scheduler-cell.k-selected {
+        background-color: var( --kendo-selected-bg, #{$kendo-selected-bg} );
+    }
+
+    .k-scheduler-layout-flex {
+        .k-scheduler-head,
+        .k-sticky-cell {
+            background-color: var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} );
+        }
+    }
+
+
+    // Events
+    .k-event {
+        @include fill(
+            var( --kendo-scheduler-event-text, #{$kendo-scheduler-event-text} ),
+            var( --kendo-scheduler-event-bg, #{$kendo-scheduler-event-bg} ),
+            var( --kendo-scheduler-event-border, #{$kendo-scheduler-event-border} ),
+            var( --kendo-scheduler-event-gradient, #{$kendo-scheduler-event-gradient} )
+        );
+        @include box-shadow( var( --kendo-scheduler-event-shadow, #{$kendo-scheduler-event-shadow} ) );
+
+        &.k-hover {
+            @include fill(
+                var( --kendo-scheduler-event-hover-text, #{$kendo-scheduler-event-hover-text} ),
+                var( --kendo-scheduler-event-hover-bg, #{$kendo-scheduler-event-hover-bg} ),
+                var( --kendo-scheduler-event-hover-border, #{$kendo-scheduler-event-hover-border} ),
+                var( --kendo-scheduler-event-hover-gradient, #{$kendo-scheduler-event-hover-gradient} )
+            );
+            @include box-shadow( var( --kendo-scheduler-event-hover-shadow, #{$kendo-scheduler-event-hover-shadow} ) );
+        }
+
+        &.k-selected {
+            @include fill(
+                var( --kendo-scheduler-event-selected-text, #{$kendo-scheduler-event-selected-text} ),
+                var( --kendo-scheduler-event-selected-bg, #{$kendo-scheduler-event-selected-bg} ),
+                var( --kendo-scheduler-event-selected-border, #{$kendo-scheduler-event-selected-border} ),
+                var( --kendo-scheduler-event-selected-gradient, #{$kendo-scheduler-event-selected-gradient} )
+            );
+            @include box-shadow( var( --kendo-scheduler-event-selected-shadow, #{$kendo-scheduler-event-selected-shadow} ) );
+        }
+    }
+
+   // .k-event-inverse {
+   //     color: contrast-wcag( $kendo-scheduler-event-text );
+   // }
+
+    .k-event-ongoing {
+        @include box-shadow( var( --kendo-scheduler-event-ongoing-shadow, #{$kendo-scheduler-event-ongoing-shadow} ) );
+    }
+
+
+    // Drag hint
+    .k-event-drag-hint {}
+
+
+    // Resizing
+    .k-scheduler-marquee {}
+    .k-scheduler-marquee::before,
+    .k-scheduler-marquee::after {
+        border-color: var( --kendo-scheduler-marquee-color, #{$kendo-scheduler-marquee-color} );
+    }
+
+    // Edit dialog
+    .k-scheduler-edit-dialog {
+        .k-dialog-buttongroup {
+            border-color: var( --kendo-scheduler-border, #{$kendo-scheduler-border} );
+        }
+    }
+
+    // Day view
+    .k-scheduler-dayview {}
+
+
+    // Workweek view
+    // sass-lint:disable class-name-format
+    .k-scheduler-workWeekview {}
+    // sass-lint:enable class-name-format
+
+
+    // Week view
+    .k-scheduler-weekview {}
+
+
+    // Month view
+    .k-scheduler-monthview {}
+
+
+    // Agenda view
+    .k-scheduler-agendaview {
+
+        // Hover
+        .k-scheduler-content tr:hover,
+        .k-scheduler-content tr.k-hover,
+        .k-scheduler-content .k-scheduler-row:hover,
+        .k-scheduler-content .k-scheduler-row.k-hover {
+            @include fill(
+                var( --kendo-hover-text, #{$kendo-hover-text} ),
+                var( --kendo-hover-bg, #{$kendo-hover-bg} ),
+                var( --kendo-hover-border, #{$kendo-hover-border} )
+            );
+        }
+
+        .k-scheduler-content tr:hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
+        .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
+            @include fill(
+                var( --kendo-scheduler-text, #{$kendo-scheduler-text} ),
+                var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} ),
+                var( --kendo-scheduler-border, #{$kendo-scheduler-border} )
+            );
+        }
+
+        // Selected
+        .k-scheduler-content tr.k-selected {
+            background-color: var( --kendo-selected-bg, #{$kendo-selected-bg} );
+        }
+
+        .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
+            background-color: var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} );
+        }
+    }
+
+
+    // Timeline view
+    .k-scheduler-timelineview {}
+
+
+    // Year view
+    .k-scheduler-yearview {
+
+        .k-day-indicator {
+            @include fill( $bg: var( --kendo-scheduler-yearview-indicator-bg, #{$kendo-scheduler-yearview-indicator-bg} ) );
+        }
+
+        .k-selected .k-day-indicator {
+            @include fill( $bg: var( --kendo-scheduler-yearview-indicator-selected-bg, #{$kendo-scheduler-yearview-indicator-selected-bg} ) );
+        }
+    }
+
+    .k-tooltip.k-scheduler-tooltip {
+        @include fill(
+            var( --kendo-scheduler-tooltip-text, #{$kendo-scheduler-tooltip-text} ),
+            var( --kendo-scheduler-tooltip-bg, #{$kendo-scheduler-tooltip-bg} ),
+            var( --kendo-scheduler-tooltip-border, #{$kendo-scheduler-tooltip-border} )
+        );
+        @include box-shadow( var( --kendo-scheduler-tooltip-shadow, #{$kendo-scheduler-tooltip-shadow} ) );
+
+        .k-callout {
+            @include fill( $color: var( --kendo-scheduler-tooltip-callout-color, #{$kendo-scheduler-tooltip-callout-color} ) );
+        }
+
+        .k-tooltip-title .k-day {
+            color: get-theme-color-var( primary-130 );
+        }
+    }
+}

package/scss/scheduler/_variables.scss

@@ -0,0 +1,260 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../calendar/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+
+/// Width of the border around the scheduler.
+/// @group scheduler
+$kendo-scheduler-border-width: 1px !default;
+/// Font family of the scheduler.
+/// @group scheduler
+$kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the scheduler.
+/// @group scheduler
+$kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the scheduler.
+/// @group scheduler
+$kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the scheduler.
+/// @group scheduler
+$kendo-scheduler-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the scheduler.
+/// @group scheduler
+$kendo-scheduler-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the scheduler.
+/// @group scheduler
+$kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
+
+/// Background color of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
+/// Text color of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
+/// Border color of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
+/// Gradient of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-gradient: null !default; // $kendo-toolbar-gradient
+
+/// Background color of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
+/// Text color of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
+/// Border color of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
+/// Gradient of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-gradient: null !default; // $kendo-toolbar-gradient
+
+/// Border radius of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Line height of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-line-height: $kendo-scheduler-line-height !default;
+/// Horizontal padding of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-padding-y: map-get( $kendo-spacing, thin ) !default;
+/// Minumum height of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-min-height: calc( $kendo-scheduler-line-height + 2 * $kendo-scheduler-event-padding-y ) !default;
+
+/// Background color of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-bg: get-theme-color-var( primary-100 ) !default;
+/// Text color of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-text: $white !default;
+/// Border color of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
+/// Gradient of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-gradient: null !default;
+/// Shadow of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-shadow: null !default;
+
+/// Background color of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+/// Text color of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-text: var( --kendo-hover-text, inherit ) !default;
+/// Boeswe color of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-border: var( --kendo-hover-border, inherit ) !default;
+/// Gradient of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-gradient: null !default;
+/// Shadow of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-shadow: null !default;
+
+/// Background color of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-bg: get-theme-color-var( primary-120 ) !default;
+/// Text color of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-text: $kendo-scheduler-event-text !default;
+/// Border color of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-border: $kendo-scheduler-event-bg !default;
+/// Gradient of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-gradient: null !default;
+/// Shadow of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-shadow: none !default;
+
+/// Shadow of the ongoing scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
+/// Horizontal padding of the scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Height of the scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-height: $kendo-line-height-em !default;
+/// Width of the scheduler date column.
+/// @group scheduler
+$kendo-scheduler-datecolumn-width: 12em !default;
+/// Width of the scheduler time column.
+/// @group scheduler
+$kendo-scheduler-timecolumn-width: 11em !default;
+
+/// Color of the current time marker in the scheduler.
+/// @group scheduler
+$kendo-scheduler-current-time-color: #ff0000 !default;
+
+/// Background color of the non-working hours in the scheduler.
+/// @group scheduler
+$kendo-scheduler-nonwork-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the non-working hours in the scheduler.
+/// @group scheduler
+$kendo-scheduler-nonwork-text: null !default;
+
+/// Background color of the weekends in the scheduler.
+/// @group scheduler
+$kendo-scheduler-weekend-bg: null !default;
+/// Text color of the weekends in the scheduler.
+/// @group scheduler
+$kendo-scheduler-weekend-text: null !default;
+
+/// Background color of the other months in the scheduler.
+/// @group scheduler
+$kendo-scheduler-othermonth-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the other months in the scheduler.
+/// @group scheduler
+$kendo-scheduler-othermonth-text: null !default;
+
+/// Horizontal padding of the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
+
+/// Spacing between the calendars in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-calendar-gap: map-get( $kendo-spacing, 3 ) !default;
+
+/// Days with events indicator size in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-size: 3px !default;
+/// Top position of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) ) !default;
+/// Left position of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) ) !default;
+/// Border radius of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-border-radius: 50% !default;
+/// Background color of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-bg: get-theme-color-var( primary-100 ) !default;
+/// Background color of the selected days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-selected-bg: $white !default;
+
+/// Horizontal padding of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
+/// Width of the border of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-border-width: 0 !default;
+/// Background color of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-bg: $white !default;
+/// Text color of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-text: get-theme-color-var( neutral-130 ) !default;
+/// Border color of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-border: null !default;
+/// Shadow of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2 ) !default;
+
+/// Vertical spacing of the scheduler tooltip title.
+/// @group scheduler
+$kendo-scheduler-tooltip-title-margin-y: map-get( $kendo-spacing, 3 ) !default;
+/// Font size of the month inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Font size of the day inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-day-font-size: calc( $kendo-scheduler-tooltip-month-font-size * 2 ) !default;
+
+/// Max height of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-events-max-height: 250px !default;
+/// Spacing between the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-events-gap: map-get( $kendo-spacing, 2 ) !default;
+
+/// Horizontal padding of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-event-padding-x !default;
+/// Vertical padding of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-event-padding-y !default;
+/// Border radius of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-event-border-radius !default;
+/// Spacing between the events items inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-gap:  map-get( $kendo-spacing, thin ) !default;
+
+/// Color of the scheduler tooltip callout.
+/// @group scheduler
+$kendo-scheduler-tooltip-callout-color: $kendo-scheduler-tooltip-bg !default;
+
+/// Width of the scheduler resize handle.
+/// @group scheduler
+$kendo-scheduler-resize-handle-width: 2em !default;
+
+/// Height of the scheduler more events button.
+/// @group scheduler
+$kendo-scheduler-more-btn-height: 13px !default;
+
+/// Color of the scheduler marquee.
+/// @group scheduler
+$kendo-scheduler-marquee-color: get-theme-color-var( primary-100 );

package/scss/scheduler/index.scss

@@ -0,0 +1,34 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "scheduler",
+    dependencies: (
+        "icon",
+        "forms",
+        "adaptive",
+        "button",
+        "datetimepicker",
+        "dropdownlist",
+        "dialog",
+        "tooltip",
+        "calendar",
+        "toolbar"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "scheduler" ) {
+        @include kendo-scheduler--layout();
+        @include kendo-scheduler--theme();
+    }
+}

package/scss/scroller/_layout.scss

@@ -0,0 +1,84 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-scroller--layout() {
+
+    // Layout
+    .km-scrollview,
+    .km-scroll-container {
+        user-select: none;
+        border-collapse: separate;
+    }
+    .km-scroll-wrapper {
+        position: relative;
+    }
+    .km-scroll-header {
+        position: absolute;
+        z-index: 1001;
+        width: 100%;
+        top: 0;
+        left: 0;
+    }
+
+
+    // Pull to refresh
+    .km-scroller-pull {
+        width: 100%;
+        display: block;
+        position: absolute;
+        line-height: 3em;
+        font-size: 1.4em;
+        text-align: center;
+        transform: translate3d(0, -3em, 0);
+    }
+    .km-scroller-pull .km-template {
+        display: inline-block;
+        min-width: 200px;
+        text-align: left;
+    }
+    .km-load-more .km-icon,
+    .km-widget .km-scroller-pull .km-icon {
+        display: inline-block;
+        height: 2rem;
+        margin-right: 1rem;
+        vertical-align: middle;
+        width: 2rem;
+        font-size: 2rem;
+        transform: rotate(0deg);
+        transition: transform 300ms linear;
+    }
+    .km-widget .km-scroller-release .km-icon {
+        transform: rotate(180deg);
+    }
+    .km-widget .km-scroller-refresh .km-icon {
+        transition: none;
+    }
+
+
+    // Scrollbar
+    .km-touch-scrollbar {
+        position: absolute;
+        visibility: hidden;
+        z-index: 200000;
+        height: .4em;
+        width: .4em;
+        opacity: 0;
+        transform-origin: 0 0;
+        transition: opacity .3s linear;
+
+        .k-map &,
+        .k-diagram & {
+            display: none;
+        }
+    }
+    .km-vertical-scrollbar {
+        height: 100%;
+        right: 2px;
+        top: 0;
+    }
+    .km-horizontal-scrollbar {
+        width: 100%;
+        left: 0;
+        bottom: 2px;
+    }
+
+}

package/scss/scroller/_theme.scss

@@ -0,0 +1,8 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-scroller--theme() {
+
+    .km-touch-scrollbar {
+        background-color: #333333;
+    }
+}

package/scss/scroller/_variables.scss

@@ -0,0 +1 @@
+@use "../core/color-system" as *;

package/scss/scroller/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "scroller",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "scroller" ) {
+        @include kendo-scroller--layout();
+        @include kendo-scroller--theme();
+    }
+}

package/scss/searchbox/_layout.scss

@@ -0,0 +1,22 @@
+@use "_variables.scss" as *;
+@use "../core/_variables.scss" as *;
+
+@mixin kendo-searchbox--layout() {
+
+    .k-searchbox {
+
+        .k-input-icon {
+            transition: var( --kendo-transition, none );
+        }
+
+        &:focus,
+        &:focus-within,
+        &.k-focus {
+            .k-input-icon {
+                width: 0;
+                opacity: 0;
+                transition: var( --kendo-transition, none );
+            }
+        }
+    }
+}