Feat/list group/align with sdl

docs/components/layout-navigation/cards.md

@@ -202,7 +202,7 @@ Create organized lists within cards using flush list groups that integrate seaml
 
 ```html
 <div class="card">
-  <ul class="list-group list-group-flush">
+  <ul class="list-group list-group-legacy list-group-flush">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>
@@ -215,7 +215,7 @@ Combine list groups with card headers for better content organization.
 ```html
 <div class="card">
   <div class="card-header">Header text</div>
-  <ul class="list-group list-group-flush">
+  <ul class="list-group list-group-legacy list-group-flush">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>
@@ -227,7 +227,7 @@ Add footers to provide additional context or actions for list content.
 
 ```html
 <div class="card">
-  <ul class="list-group list-group-flush">
+  <ul class="list-group list-group-legacy list-group-flush">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>

docs/components/lists-tables-trees/list-group.md

@@ -39,6 +39,15 @@ contained `list-group-item` elements with the supported heights of the [Datatabl
 - CSS class `.list-group-md` set a minimum height of `48px`.
 - CSS class `.list-group-lg` set a minimum height of `64px`.
 
+### Appearances
+
+List groups are Filled by default. Use an appearance class for the alternatives:
+
+- `.list-group-ghost` removes item fills and dividers.
+- `.list-group-dividers` displays a divider below each item.
+- `.list-group-outline` displays individual outlined items.
+- `.list-group-legacy` restores the previous connected-item styling for migration purposes.
+
 ### Example
 
 <si-docs-component example="list-group/list-group" height="400"></si-docs-component>

playwright/snapshots/static.spec.ts-snapshots/list-group--list-group.yaml

@@ -1,10 +1,25 @@
-- heading "Basic" [level=2]
+- heading "Filled" [level=2]
 - list:
   - listitem: Cras justo odio
   - listitem: Dapibus ac facilisis in
   - listitem: Morbi leo risus
   - listitem: Porta ac consectetur ac
   - listitem: Vestibulum at eros
+- heading "Ghost" [level=2]
+- list:
+  - listitem: Cras justo odio
+  - listitem: Dapibus ac facilisis in
+  - listitem: Morbi leo risus
+- heading "Dividers" [level=2]
+- list:
+  - listitem: Cras justo odio
+  - listitem: Dapibus ac facilisis in
+  - listitem: Morbi leo risus
+- heading "Outline" [level=2]
+- list:
+  - listitem: Cras justo odio
+  - listitem: Dapibus ac facilisis in
+  - listitem: Morbi leo risus
 - heading "Large list group items with large status indication" [level=2]
 - list:
   - listitem:

projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html

@@ -9,7 +9,7 @@
   </button>
 </div>
 <div class="modal-body text-pre-wrap text-break overflow-y-auto widget-list">
-  <div class="list-group">
+  <div class="list-group list-group-legacy">
     <button
       type="button"
       class="list-group-item list-group-item-action d-flex align-items-center"

projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html

@@ -17,7 +17,7 @@
             {{ labelWidgetCatalogList | translate }}
           </span>
           <ul
-            class="si-layout-fixed-height list-group overflow-auto mb-0"
+            class="si-layout-fixed-height list-group list-group-legacy overflow-auto mb-0"
             aria-labelledby="widget-catalog-list-description"
             cdkListbox
             [cdkListboxValue]="selectedWidgets()"

projects/element-ng/about/si-about.component.html

@@ -5,7 +5,7 @@
         {{ aboutTitle() }}
       </div>
 
-      <div>
+      <div class="list-group list-group-legacy">
         <div class="list-group-item text-center">
           @let appIcon = iconName();
           @if (icon()) {
@@ -73,7 +73,7 @@ <h3>{{ appName() }}</h3>
 
       <div class="h-100">
         @if (licenseInfo().text) {
-          <pre class="list-group-item">{{ licenseInfo().text }}</pre>
+          <pre class="border-0 border-bottom my-0 px-6 py-4">{{ licenseInfo().text }}</pre>
         }
 
         @if (sanitizedUrl()) {

projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.html

@@ -11,7 +11,7 @@
 @let filteredListWidgetItemsList = filteredListWidgetItems();
 @if (!showLoadingIndicator() && filteredListWidgetItemsList) {
   @if (filteredListWidgetItemsList.length > 0) {
-    <div class="list-group list-group-lg" role="list">
+    <div class="list-group list-group-legacy list-group-lg" role="list">
       @for (item of filteredListWidgetItemsList; track $index) {
         <si-list-widget-item [value]="item" />
       }
@@ -20,7 +20,7 @@
     <ng-content select="[empty-state]" />
   }
 } @else {
-  <div class="list-group list-group-lg" role="list">
+  <div class="list-group list-group-legacy list-group-lg" role="list">
     @for (some of ghosts(); track $index) {
       <si-list-widget-item [value]="undefined" />
     }

projects/element-theme/src/styles/bootstrap/_list-group.scss

@@ -2,15 +2,16 @@
 
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
+@use '../variables/spacers';
 @use '../variables/typography';
 @use 'mixins/breakpoints';
 @use 'variables';
 
 .list-group {
   display: flex;
   flex-direction: column;
+  gap: map.get(spacers.$spacers, 2);
   padding-inline-start: 0;
-  border-radius: variables.$list-group-border-radius;
 }
 
 .list-group-numbered {
@@ -55,27 +56,14 @@
   color: variables.$list-group-color;
   text-decoration: none;
   background-color: variables.$list-group-bg;
-  border: variables.$list-group-border-width solid variables.$list-group-border-color;
-  border-radius: 0;
-  border-inline-width: 0;
+  border: 0;
+  border-radius: variables.$list-group-border-radius;
   margin: 0;
 
   .list-group-item-heading {
     color: variables.$headings-color;
   }
 
-  &:first-child {
-    border-block-start: none;
-    border-start-start-radius: inherit;
-    border-start-end-radius: inherit;
-  }
-
-  &:last-child {
-    border-block-end-color: transparent;
-    border-end-start-radius: inherit;
-    border-end-end-radius: inherit;
-  }
-
   &:is(.disabled, :disabled) {
     color: variables.$list-group-disabled-color;
     pointer-events: none;
@@ -90,12 +78,55 @@
     border-color: variables.$list-group-active-border-color;
   }
 
-  & + & {
-    border-block-start-width: 0;
+}
+
+.list-group-ghost,
+.list-group-dividers {
+  gap: 0;
+
+  > .list-group-item {
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+.list-group-dividers > .list-group-item {
+  border-block-end: variables.$list-group-border-width solid variables.$list-group-border-color;
+}
+
+.list-group-outline > .list-group-item {
+  background-color: transparent;
+  border: variables.$list-group-border-width solid variables.$list-group-border-color;
+}
 
-    &.active {
-      margin-block-start: -(variables.$list-group-border-width);
-      border-block-start-width: variables.$list-group-border-width;
+.list-group-legacy {
+  gap: 0;
+  border-radius: variables.$list-group-border-radius;
+
+  > .list-group-item {
+    border: variables.$list-group-border-width solid variables.$list-group-border-color;
+    border-radius: 0;
+    border-inline-width: 0;
+
+    &:first-child {
+      border-block-start: none;
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    &:last-child {
+      border-block-end-color: transparent;
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    + .list-group-item {
+      border-block-start-width: 0;
+
+      &.active {
+        margin-block-start: -(variables.$list-group-border-width);
+        border-block-start-width: variables.$list-group-border-width;
+      }
     }
   }
 }
@@ -124,7 +155,7 @@
     .list-group-horizontal#{$infix} {
       flex-direction: row;
 
-      > .list-group-item {
+      &.list-group-legacy > .list-group-item {
         border-block-width: 0;
 
         &:first-child {
@@ -155,9 +186,12 @@
 }
 
 .list-group-flush {
+  gap: 0;
   border-radius: 0;
 
   > .list-group-item {
+    background-color: transparent;
+    border-radius: 0;
     border-inline-width: 0;
     border-block-width: 0 variables.$list-group-border-width;
 
@@ -167,6 +201,10 @@
   }
 }
 
+.list-group-legacy.list-group-flush > .list-group-item {
+  background-color: variables.$list-group-bg;
+}
+
 .list-group-item-secondary {
   background-color: semantic-tokens.$element-ui-4;
   color: semantic-tokens.$element-text-primary;

projects/element-theme/src/styles/bootstrap/_variables.scss

@@ -620,7 +620,7 @@ $list-group-action-color: semantic-tokens.$element-text-primary !default;
 $list-group-action-hover-color: $list-group-action-color !important !default;
 
 $list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: semantic-tokens.$element-base-0 !default;
+$list-group-action-active-bg: semantic-tokens.$element-base-1-selected !default;
 
 // Image thumbnails
 

src/app/examples/drag-drop/drag-drop.html

@@ -4,7 +4,7 @@ <h2>Reorder within list or Move between list</h2>
     <ul
       #cdkListOne="cdkDropList"
       aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown Cmd+X Cmd+V"
-      class="list-group list-group-flush"
+      class="list-group list-group-legacy list-group-flush"
       cdkListbox
       cdkDropList
       [cdkDropListConnectedTo]="cdkListTwo"
@@ -34,7 +34,7 @@ <h2>Reorder within list or Move between list</h2>
     <ul
       #cdkListTwo="cdkDropList"
       aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown Cmd+X Cmd+V"
-      class="list-group list-group-flush"
+      class="list-group list-group-legacy list-group-flush"
       cdkListbox
       cdkDropList
       [cdkDropListData]="listTwo"