@sebgroup/green-core 3.17.1 → 3.17.2-rc.20260707133047604

package/components/list/list.component.d.ts

@@ -10,11 +10,13 @@ import { GdsFlex } from '../flex/flex.component';
  * @slot - Default slot for `gds-list-item` children.
  */
 export declare class GdsList extends GdsFlex {
+    #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**
-     * Renders dividers (borders) between list items and removes the default gap.
+     * Renders dividers (borders) between list items. Hides the previous border on sibling items when hovering over a navigational item.
      */
     dividers: boolean;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/components/list/list.component.js

@@ -1,6 +1,9 @@
 import {
-  __decorateClass
+  __decorateClass,
+  __privateAdd,
+  __privateGet
 } from "../../chunks/chunk.CAV4X6PU.js";
+var _handleHover;
 import { property } from "lit/decorators.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
@@ -10,15 +13,34 @@ let GdsList = class extends GdsFlex {
   constructor() {
     super(...arguments);
     this.dividers = false;
+    __privateAdd(this, _handleHover, (e) => {
+      if (!this.dividers)
+        return;
+      const item = e.target.closest?.("[href]:not([selectable])");
+      if (item?.parentElement !== this)
+        return;
+      item.previousElementSibling?.toggleAttribute(
+        "hide-prev-border",
+        e.type === "pointerover"
+      );
+    });
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "list");
+    this.addEventListener("pointerover", __privateGet(this, _handleHover));
+    this.addEventListener("pointerout", __privateGet(this, _handleHover));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerover", __privateGet(this, _handleHover));
+    this.removeEventListener("pointerout", __privateGet(this, _handleHover));
   }
   render() {
     return html`<slot></slot>`;
   }
 };
+_handleHover = new WeakMap();
 GdsList.styles = [tokens, ListStyles];
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/components/list/list.styles.js

@@ -4,11 +4,15 @@ const style = css`
   :host {
     display: flex;
     flex-direction: column;
-    gap: var(--gds-sys-space-m);
+    gap: 0;
   }
 
-  :host([dividers]) {
-    gap: 0;
+  :host ::slotted(*:not(:first-child)) {
+    padding-top: var(--gds-sys-space-s);
+  }
+
+  :host ::slotted(*:not(:last-child)) {
+    padding-bottom: var(--gds-sys-space-s);
   }
 
   :host([dividers]) ::slotted(*:not(:last-child)) {
@@ -16,8 +20,15 @@ const style = css`
     border-radius: 0;
   }
 
-  :host([dividers]) ::slotted([href]) {
-    padding: var(--gds-sys-space-s) 0;
+  @media (pointer: fine) {
+    :host([dividers])
+      ::slotted([href]:not([selectable]):not(:last-child):hover) {
+      border-bottom-color: transparent;
+    }
+
+    :host([dividers]) ::slotted([hide-prev-border]:not(:last-child)) {
+      border-bottom-color: transparent;
+    }
   }
 `;
 var list_styles_default = style;