feat(listgroup): add fluent styles

packages/fluent/scss/index.scss

@@ -20,7 +20,7 @@
 
 // Primitive components
 @use "list";
-// @use "listgroup";
+@use "listgroup";
 @use "overlay";
 @use "popup";
 // @use "ripple";
@@ -184,7 +184,7 @@
 
     // Primitive components
     @include list.styles();
-    // @include listgroup.styles();
+    @include listgroup.styles();
     @include overlay.styles();
     @include popup.styles();
     // @include ripple.styles();

packages/fluent/scss/listgroup/_layout.scss

@@ -0,0 +1,189 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listgroup--layout() {
+
+    .k-listgroup {
+        @include border-radius( var( --kendo-listgroup-border-radius, #{$kendo-listgroup-border-radius} ) );
+        margin: 0;
+        padding: 0;
+        border-width: var( --kendo-listgroup-border-width, #{$kendo-listgroup-border-width} );
+        border-style: solid;
+        font-size: var( --kendo-listgroup-font-size, #{$kendo-listgroup-font-size} );
+        line-height: var( --kendo-listgroup-line-height, #{$kendo-listgroup-line-height} );
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+
+        > ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+        }
+
+        // Borders of items
+        .k-listgroup-item + .k-listgroup-item {
+            border-top-width: var( --kendo-listgroup-item-border-width, #{$kendo-listgroup-item-border-width} );
+        }
+    }
+    .k-listgroup-flush {
+        @include border-radius( 0 );
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+
+    .k-listgroup-item {
+        padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
+        padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 0 0 auto;
+        position: relative;
+
+        > .k-link {
+            margin-inline: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
+            margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+            padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
+            padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+            color: inherit;
+            text-decoration: none;
+            outline: 0;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1 1 auto;
+            position: relative;
+
+            > .k-select {
+                padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+                padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+                display: flex;
+                align-items: center;
+                flex: 0 0 auto;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+            }
+        }
+    }
+    .k-listgroup-item-segmented {
+        align-items: stretch;
+
+        > .k-link {
+            margin-inline-end: 0;
+        }
+
+        > .k-select {
+            margin-inline-start: 0;
+            margin-inline-end: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
+            margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+            padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+            padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+            border-width: 0 0 0 1px;
+            border-style: solid;
+            border-color: inherit;
+            cursor: pointer;
+        }
+    }
+
+
+    // Forms in listgroup
+    .k-listgroup-form-row {
+        margin-inline: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
+        margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+        padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
+        padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1 1 auto;
+        position: relative;
+
+        .k-listgroup-form-field-label {
+            width: 40%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-listgroup-form-field-wrapper {
+            width: 50%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            text-align: end;
+            position: relative;
+
+            select,
+            input[type="text"],
+            input[type="password"],
+            input[type="date"],
+            input[type="time"],
+            input[type="datetime-local"],
+            input[type="number"],
+            textarea {
+                width: 100%;
+                box-sizing: border-box;
+                flex: 1 1 100%;
+            }
+
+            textarea {
+                min-height: 4em;
+                resize: vertical;
+            }
+        }
+    }
+    .k-listgroup-item.k-listgroup-form-row {
+        margin: 0;
+    }
+
+
+    // RTL Styles
+    [dir="rtl"] {
+
+        .k-listgroup-item {
+
+            > .k-link {
+
+                > .k-select {
+                    right: auto;
+                    left: 0;
+
+                    .k-icon {
+                        transform: scaleX(-1);
+                    }
+                }
+
+            }
+
+        }
+        .k-listgroup-item-segmented {
+
+            > .k-select {
+                border-right-width: 1px;
+                border-left-width: 0;
+
+                .k-icon {
+                    transform: scaleX(-1);
+                }
+            }
+
+        }
+    }
+
+}
+

packages/fluent/scss/listgroup/_theme.scss

@@ -0,0 +1,14 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listgroup--theme() {
+
+    .k-listgroup {
+        @include fill(
+            var( --kendo-listgroup-text, #{$kendo-listgroup-text} ),
+            var( --kendo-listgroup-bg, #{$kendo-listgroup-bg} ),
+            var( --kendo-listgroup-border, #{$kendo-listgroup-border} )
+        );
+    }
+
+}

packages/fluent/scss/listgroup/_variables.scss

@@ -0,0 +1,36 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Border width of the listgroup.
+/// @group listgroup
+$kendo-listgroup-border-width: 1px !default;
+/// Border radius of the listgroup.
+/// @group listgroup
+$kendo-listgroup-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Font size of the listgroup.
+/// @group listgroup
+$kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the listgroup.
+/// @group listgroup
+$kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the listgroup component.
+/// @group listgroup
+$kendo-listgroup-bg: $kendo-component-bg !default;
+/// Text color of the listgroup component.
+/// @group listgroup
+$kendo-listgroup-text: $kendo-component-text !default;
+/// Border color of the listgroup component.
+/// @group listgroup
+$kendo-listgroup-border: $kendo-component-border !default;
+
+/// Horizontal padding of the listgroup items.
+/// @group listgroup
+$kendo-listgroup-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the listgroup items.
+/// @group listgroup
+$kendo-listgroup-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the listgroup item.
+/// @group listgroup
+$kendo-listgroup-item-border-width: 1px !default;

packages/fluent/scss/listgroup/index.scss

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