feat(list): new component (#2468)

.changeset/strong-dingos-suffer.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(list): new component

dist/list/list.css

@@ -0,0 +1,76 @@
+.list {
+    max-width: 480px;
+}
+
+.list ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.list ul li > * {
+    align-items: center;
+    background-color: var(
+        --list-background-color,
+        var(--color-background-primary)
+    );
+    box-sizing: border-box;
+    color: var(--color-foreground-on-primary);
+    display: inline-flex;
+    font-size: var(--font-size-16);
+    margin-block: 1px;
+    min-height: var(--spacing-600);
+    padding: var(--spacing-150) var(--spacing-200);
+    width: 100%;
+}
+
+.list__leading {
+    margin-inline-end: var(--spacing-200);
+}
+
+.list__trailing {
+    margin-inline-start: var(--spacing-200);
+}
+
+.list__body {
+    flex: 1;
+}
+
+.list li > a,
+.list li > button {
+    border: none;
+    text-align: left;
+    text-decoration: none;
+}
+
+.list li > a:focus,
+.list li > a:hover,
+.list li > button:focus,
+.list li > button:hover {
+    color: var(--color-foreground-on-primary);
+}
+
+.list li > a:active,
+.list li > a:focus,
+.list li > a:hover,
+.list li > button:active,
+.list li > button:focus,
+.list li > button:hover {
+    background-color: var(
+        --list-background-hover-color,
+        var(--color-state-primary-hover)
+    );
+}
+
+.list hr {
+    border: 0;
+    border-top: 1px solid var(--color-stroke-subtle);
+    height: 1px;
+    margin-inline: var(--spacing-200);
+    padding: 0;
+}
+
+[dir="rtl"] .list li > a,
+[dir="rtl"] .list li > button {
+    text-align: right;
+}