@progress/kendo-theme-fluent 5.7.0

package/scss/tabstrip/_layout.scss

@@ -0,0 +1,428 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-tabstrip--layout() {
+
+    .k-tabstrip-wrapper {
+        padding-inline: var( --kendo-tabstrip-wrapper-padding-x, #{ $kendo-tabstrip-wrapper-padding-x} ) ;
+        padding-block: var( --kendo-tabstrip-wrapper-padding-y, #{ $kendo-tabstrip-wrapper-padding-y} ) ;
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .k-tabstrip {
+        border-width: 0;
+        border-color: transparent;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-tabstrip-font-family, #{$kendo-tabstrip-font-family} );
+        font-size: var( --kendo-tabstrip-font-size, #{$kendo-tabstrip-font-size} );
+        line-height: var( --kendo-tabstrip-line-height, #{$kendo-tabstrip-line-height} );
+        color: inherit;
+        background-color: transparent;
+        display: flex;
+        flex-flow: column nowrap;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        .k-tabstrip-wrapper > & {
+            flex: 1 1 auto;
+        }
+    }
+
+    .k-tabstrip-items-wrapper {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        position: relative;
+        z-index: 2;
+    }
+
+    .k-tabstrip-items {
+        box-sizing: border-box;
+        outline: 0;
+        display: flex;
+        flex-flow: row wrap;
+        flex: 0 0 auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-item {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            position: relative;
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: row;
+            align-items: stretch;
+            justify-items: stretch;
+            outline: 0;
+
+            &::before {
+                content: "";
+                border-style: solid;
+                border-color: var( --kendo-tabstrip-item-ripple-border, #{$kendo-tabstrip-item-ripple-border} );
+                display: block;
+                position: absolute;
+                z-index: 2;
+                opacity: 0;
+                transition: opacity .3s, transform .3s;
+                pointer-events: none;
+            }
+        }
+
+        .k-tab-on-top {
+            z-index: 1;
+        }
+
+        .k-link {
+            padding-inline: var( --kendo-tabstrip-item-padding-x, #{$kendo-tabstrip-item-padding-x} );
+            padding-block: var( --kendo-tabstrip-item-padding-y, #{$kendo-tabstrip-item-padding-y} );
+            color: inherit;
+            cursor: pointer;
+            display: inline-flex;
+            vertical-align: middle;
+            flex: 1 1 auto;
+            flex-direction: row;
+            align-content: center;
+            align-items: center;
+        }
+    }
+    .k-ie11 .k-tabstrip-items {
+        white-space: nowrap;
+    }
+
+    .k-tabstrip-content,
+    .k-tabstrip > .k-content {
+        padding-inline: var( --kendo-tabstrip-content-padding-x, #{$kendo-tabstrip-content-padding-x} ) ;
+        padding-block: var( --kendo-tabstrip-content-padding-y, #{$kendo-tabstrip-content-padding-y} ) ;
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        display: none;
+        overflow: auto;
+        flex: 1 1 auto;
+        position: relative;
+        z-index: 1;
+
+        &:active,
+        &.k-active {
+            display: block;
+        }
+    }
+
+    // Loading
+    .k-tabstrip-items .k-loading {
+        width: 20%;
+        height: 0;
+        border: 0;
+        border-top: 1px solid transparent;
+        border-color: inherit;
+        background: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: width .2s linear;
+
+        // TODO: a better name
+        display: none;
+
+        &.k-complete {
+            width: 100%;
+            border-top-width: 0;
+        }
+    }
+
+
+    // Scrolling
+    .k-tabstrip-scrollable {
+        > .k-tabstrip-items-wrapper {
+
+            > .k-tabstrip-items {
+                flex: 1 1 auto;
+                flex-wrap: nowrap;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+
+            > .k-button {
+                width: auto;
+                height: auto;
+                flex: none;
+                align-self: stretch;
+                aspect-ratio: auto;
+
+                .k-button-icon {
+                    min-width: auto;
+                    min-height: auto;
+                }
+            }
+            // TODO: Think of a less verbose name
+            &.k-hstack {
+                > .k-button {
+                    padding-inline: var( --kendo-tabstrip-scrollable-button-padding-x, #{$kendo-tabstrip-scrollable-button-padding-x} );
+                }
+            }
+
+            &.k-vstack {
+                > .k-button {
+                    padding-block: var( --kendo-tabstrip-scrollable-button-padding-y, #{$kendo-tabstrip-scrollable-button-padding-y} );
+                }
+            }
+        }
+    }
+
+
+    // Tabstrip variants
+    .k-tabstrip-top {
+        > .k-tabstrip-items-wrapper {
+            border-bottom-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
+            margin-block-end: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
+
+            > .k-tabstrip-items {
+                width: 100%;
+            }
+
+            .k-item {
+                margin-block-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
+
+                &::before {
+                    width: 100%;
+                    border-width: 0 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0;
+                    inset-block-end: 0;
+                    transform: scaleX(0);
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
+
+                    &::before {
+                        opacity: 1;
+                        transform: scaleX(1);
+                    }
+                }
+            }
+
+            .k-item + .k-item {
+                margin-inline-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
+            }
+
+        }
+    }
+    .k-tabstrip-bottom {
+        > .k-tabstrip-items-wrapper {
+            border-top-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
+            margin-block-start: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
+
+            > .k-tabstrip-items {
+                width: 100%;
+            }
+
+            .k-item {
+                margin-block-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
+
+                &::before {
+                    width: 100%;
+                    border-width: var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0 0 0;
+                    inset-block-start: 0;
+                    transform: scaleX(0);
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
+
+                    &::before {
+                        opacity: 1;
+                        transform: scaleX(1);
+                    }
+
+                }
+
+            }
+
+            .k-item + .k-item {
+                margin-inline-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
+            }
+
+        }
+    }
+    .k-tabstrip-left {
+        flex-direction: row;
+
+        > .k-tabstrip-items-wrapper {
+            border-right-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
+            margin-inline-end: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
+
+            > .k-tabstrip-items {
+                height: 100%;
+                display: inline-flex;
+                flex-direction: column;
+            }
+
+            .k-item {
+                margin-inline-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
+
+                &::before {
+                    height: 100%;
+                    border-width: 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0 0;
+                    inset-inline-end: 0;
+                    transform: scaleY(0);
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
+
+                    &::before {
+                        opacity: 1;
+                        transform: scaleY(1);
+                    }
+
+                }
+
+            }
+
+            .k-item + .k-item {
+                margin-block-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
+            }
+        }
+
+        > .k-content,
+        > .k-tabstrip-content {
+            margin: 0 !important; // sass-lint:disable-line no-important
+        }
+
+    }
+    .k-tabstrip-right {
+        flex-direction: row-reverse;
+
+        > .k-tabstrip-items-wrapper {
+            border-left-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
+            margin-inline-start: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
+
+            > .k-tabstrip-items {
+                height: 100%;
+                display: inline-flex;
+                flex-direction: column;
+            }
+
+            .k-item {
+                margin-inline-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
+
+                &::before {
+                    height: 100%;
+                    border-width: 0 0 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} );
+                    inset-inline-start: 0;
+                    transform: scaleY(0);
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
+
+                    &::before {
+                        opacity: 1;
+                        transform: scaleY(1);
+                    }
+
+                }
+
+            }
+
+            .k-item + .k-item {
+                margin-block-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
+            }
+        }
+
+        > .k-content,
+        > .k-tabstrip-content {
+            margin: 0 !important; // sass-lint:disable-line no-important
+        }
+    }
+
+    // Hide tabstrip ripple when dragging
+    .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
+        &::before {
+            display: none !important; // sass-lint:disable-line no-important
+        }
+    }
+
+    // Selected indicator
+    @if ($kendo-tabstrip-indicator-size) {
+
+        .k-tabstrip-items-wrapper {
+
+            .k-item::after {
+                content: "";
+                border-width: 0;
+                border-style: solid;
+                display: none;
+                position: absolute;
+                z-index: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+
+                // Variants
+                .k-tabstrip-top > & {
+                    border-bottom-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+                }
+                .k-tabstrip-bottom > & {
+                    border-top-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+                }
+                .k-tabstrip-left > & {
+                    border-right-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+                }
+                .k-tabstrip-right > & {
+                    border-left-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+                }
+            }
+            .k-item.k-active::after {
+                display: block;
+            }
+
+            .k-item > .k-link {
+                z-index: 1;
+            }
+        }
+
+    }
+
+    .k-rtl .k-tabstrip,
+    .k-tabstrip[dir="rtl"] {
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            > .k-tabstrip-items-wrapper {
+                order: 1;
+            }
+
+            > .k-content { order: 0; }
+            > .k-tabstrip-content { order: 0; }
+        }
+
+        .k-tabstrip-prev,
+        .k-tabstrip-next {
+            transform: scaleX(-1);
+        }
+
+    }
+
+}

package/scss/tabstrip/_theme.scss

@@ -0,0 +1,102 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-tabstrip--theme() {
+
+    // Wrapper
+    .k-tabstrip-wrapper {
+        @include fill(
+            var( --kendo-tabstrip-wrapper-text, #{$kendo-tabstrip-wrapper-text} ),
+            var( --kendo-tabstrip-wrapper-bg, #{$kendo-tabstrip-wrapper-bg} ),
+            var( --kendo-tabstrip-wrapper-border, #{$kendo-tabstrip-wrapper-border} )
+        );
+    }
+
+    // Items
+    .k-tabstrip-items-wrapper {
+        @include fill(
+            var( --kendo-tabstrip-text, #{$kendo-tabstrip-text} ),
+            var( --kendo-tabstrip-bg, #{$kendo-tabstrip-bg} ),
+            var( --kendo-tabstrip-border, #{$kendo-tabstrip-border} )
+        );
+
+        .k-item {
+            @include fill(
+                var( --kendo-tabstrip-item-text, #{$kendo-tabstrip-item-text} ),
+                var( --kendo-tabstrip-item-bg, #{$kendo-tabstrip-item-bg} ),
+                var( --kendo-tabstrip-item-border, #{$kendo-tabstrip-item-border} )
+            );
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    var( --kendo-tabstrip-item-hovered-text, #{$kendo-tabstrip-item-hovered-text} ),
+                    var( --kendo-tabstrip-item-hovered-bg, #{$kendo-tabstrip-item-hovered-bg} ),
+                    var( --kendo-tabstrip-item-hovered-border, #{$kendo-tabstrip-item-hovered-border} )
+                );
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( var( --kendo-tabstrip-item-focused-shadow, #{$kendo-tabstrip-item-focused-shadow} ) );
+            }
+
+            &:active,
+            &.k-active,
+            &.k-selected {
+                @include fill(
+                    $color: var( --kendo-tabstrip-item-selected-text, #{$kendo-tabstrip-item-selected-text} ),
+                    $bg: var( --kendo-tabstrip-item-selected-bg, #{$kendo-tabstrip-item-selected-bg} )
+                );
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $bg: var( --kendo-tabstrip-item-hovered-bg, #{$kendo-tabstrip-item-hovered-bg} )
+                    );
+                }
+
+            }
+
+            &:disabled,
+            &[disabled],
+            &.k-disabled {
+                @include fill(
+                    var( --kendo-tabstrip-item-disabled-text, #{$kendo-tabstrip-item-disabled-text} ),
+                    var( --kendo-tabstrip-item-disabled-bg, #{$kendo-tabstrip-item-disabled-bg} ),
+                    var( --kendo-tabstrip-item-disabled-border, #{$kendo-tabstrip-item-disabled-border} )
+                );
+            }
+
+            &.k-tabstrip-dragging {
+                @include fill( $color: var( --kendo-tabstrip-item-dragging-text, #{$kendo-tabstrip-item-dragging-text} ) );
+            }
+        }
+
+    }
+
+    // Content
+    .k-tabstrip-content,
+    .k-tabstrip > .k-content {
+        @include fill(
+            var( --kendo-tabstrip-content-text, #{$kendo-tabstrip-content-text} ),
+            var( --kendo-tabstrip-content-bg, #{$kendo-tabstrip-content-bg} ),
+            var( --kendo-tabstrip-content-border, #{$kendo-tabstrip-content-border} )
+        );
+
+        &:focus,
+        &.k-focus {
+            outline-color: var( --kendo-tabstrip-content-border-focused, #{$kendo-tabstrip-content-border-focused} );
+        }
+    }
+
+    // Selected indicator
+    @if ($kendo-tabstrip-indicator-size) {
+        .k-tabstrip-items-wrapper {
+            .k-item.k-active::after {
+                border-color: var( --kendo-tabstrip-indicator-color, #{$kendo-tabstrip-indicator-color} );
+            }
+        }
+    }
+
+}

package/scss/tabstrip/_variables.scss

@@ -0,0 +1,145 @@
+@use "../core/" as *;
+@use "../list/_variables.scss" as *;
+
+/// The horizontal padding of the tabstrip wrapper
+/// @group tabstrip
+$kendo-tabstrip-wrapper-padding-x: 0px !default;
+/// The vertical padding of the tabstrip wrapper
+/// @group tabstrip
+$kendo-tabstrip-wrapper-padding-y: 0px !default;
+/// The width of the border around the tabstrip wrapper
+/// @group tabstrip
+$kendo-tabstrip-wrapper-border-width: 0px !default;
+/// The background color of the tabstrip wrapper
+/// @group tabstrip
+$kendo-tabstrip-wrapper-bg: transparent !default;
+/// The text color of the tabstrip wrapper
+/// @group tabstrip
+$kendo-tabstrip-wrapper-text: initial !default;
+/// The border color of the tabstrip wrapper
+/// @group tabstrip
+$kendo-tabstrip-wrapper-border: initial !default;
+
+/// The font family of the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
+/// The width of the border around the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-border-width: 0px !default;
+/// The background color of the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-bg: transparent !default;
+/// The text color of the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-text: var( --kendo-component-text, initial ) !default;
+/// The border color of the tabstrip
+/// @group tabstrip
+$kendo-tabstrip-border: transparent !default;
+
+/// The horizontal padding of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+/// The vertical padding of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-padding-y: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, 1 ) !default;
+/// The width of the border around the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-border-width: 0px !default;
+/// The border width of the tabstrip ripple
+/// @group tabstrip
+$kendo-tabstrip-item-ripple-border-width: map-get( $kendo-spacing, thin ) !default;
+/// The border color of the tabstrip ripple
+/// @group tabstrip
+$kendo-tabstrip-item-ripple-border: get-theme-color-var( primary-100 ) !default;
+/// The border radius of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// The gap between the tabstrip items
+/// @group tabstrip
+$kendo-tabstrip-item-gap: map-get( $kendo-spacing, 2 ) !default;
+///  The background color of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-bg: transparent !default;
+/// The text color of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-text: var( --kendo-component-text, initial ) !default;
+/// The border color of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-border: transparent !default;
+/// The text color of the disabled tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
+/// The background color of the disabled tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-bg: none !default;
+/// The border color of the disabled tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-disabled-border: var( --kendo-disabled-border, initial ) !default;
+
+/// The background color of hovered tabs
+/// @group tabstrip
+$kendo-tabstrip-item-hovered-bg: var( --kendo-hover-bg, inherit ) !default;
+/// The text color of hovered tabs
+/// @group tabstrip
+$kendo-tabstrip-item-hovered-text: var( --kendo-hover-text, inherit ) !default;
+/// The border color of hovered tabs
+/// @group tabstrip
+$kendo-tabstrip-item-hovered-border: var( --kendo-hover-bg, inherit ) !default;
+/// The background color of selected tabs
+/// @group tabstrip
+$kendo-tabstrip-item-selected-bg: var( --kendo-component-bg, transparent ) !default;
+/// The text color of selected tabs
+/// @group tabstrip
+$kendo-tabstrip-item-selected-text: get-theme-color-var( neutral-190 ) !default;
+/// The border color of selected tabs
+/// @group tabstrip
+$kendo-tabstrip-item-selected-border: get-theme-color-var( primary-100 ) !default;
+/// The background gradient of selected tabs
+/// @group tabstrip
+$kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+/// The focus shadow of the tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
+/// The text color of the sortable tabstrip item
+/// @group tabstrip
+$kendo-tabstrip-item-dragging-text: get-theme-color-var( primary-100 ) !default;
+
+// Indicator
+$kendo-tabstrip-indicator-size: null !default;
+$kendo-tabstrip-indicator-color: null !default;
+
+/// The horizontal padding of tabstrip content
+/// @group tabstrip
+$kendo-tabstrip-content-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// The vertical padding of tabstrip content
+/// @group tabstrip
+$kendo-tabstrip-content-padding-y: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+/// The width of border around tabstrip content
+/// @group tabstrip
+$kendo-tabstrip-content-border-width: 1px !default;
+
+/// The background color of tabstrip content
+/// @group tabstrip
+$kendo-tabstrip-content-bg: var( --kendo-component-bg, transparent ) !default;
+/// The text color of tabstrip content
+/// @group tabstrip
+$kendo-tabstrip-content-text: var( --kendo-component-text, inherit ) !default;
+/// The border color of tabstrip content
+/// @group tabstrip
+$kendo-tabstrip-content-border: transparent !default;
+/// The border color of tabstrip focused content
+/// @group tabstrip
+$kendo-tabstrip-content-border-focused: var( --kendo-component-text, initial ) !default;
+
+/// The horizontal button padding of the scrollable tabstrip
+/// @group tabstrip
+$kendo-tabstrip-scrollable-button-padding-x: map-get( $kendo-spacing, 1 ) !default;
+// The vertical button padding of the scrollable tabstrip
+/// @group tabstrip
+$kendo-tabstrip-scrollable-button-padding-y: map-get( $kendo-spacing, 1 ) !default;

package/scss/tabstrip/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "tabstrip",
+    dependencies: (
+        "icon",
+        "button",
+        "list"
+    )
+);
+
+
+// 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( "tabstrip" ) {
+        @include kendo-tabstrip--layout();
+        @include kendo-tabstrip--theme();
+    }
+}