@ebay/skin 18.3.2 → 18.4.0

package/dist/table/table.css

@@ -1,10 +1,35 @@
 .table {
     overflow-x: auto;
     position: relative;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scroll-snap-type: proximity;
+    scroll-snap-type: x proximity;
+}
+
+.table::-webkit-scrollbar {
+    background-color: var(--color-background-faint);
+    border-radius: 12px;
+}
+
+.table::-webkit-scrollbar:vertical {
+    width: 6px;
+}
+
+.table::-webkit-scrollbar:horizontal {
+    height: 6px;
+}
+
+.table::-webkit-scrollbar-thumb {
+    background-color: var(--color-foreground-secondary);
+    border-color: transparent;
+    border-radius: 12px;
+    border-right-style: inset;
+    box-shadow: none;
 }
 
 .table table {
-    border-collapse: collapse;
+    border-collapse: initial;
     border-spacing: 0;
     width: 100%;
 }
@@ -39,8 +64,36 @@
     padding: 16px;
 }
 
+.table--frozen-header thead {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+}
+
+.table--freeze-column-1 tr td:nth-child(-n + 1),
+.table--freeze-column-1 tr th:nth-child(-n + 1),
+.table--freeze-column-2 tr td:nth-child(-n + 2),
+.table--freeze-column-2 tr th:nth-child(-n + 2),
+.table--freeze-column-3 tr td:nth-child(-n + 3),
+.table--freeze-column-3 tr th:nth-child(-n + 3) {
+    left: 0;
+    position: sticky;
+}
+
+.table--full-height {
+    max-height: unset;
+}
+
+.table--constrained-height {
+    max-height: 90vh;
+}
+
+.table th a,
 .table th button {
+    align-items: center;
+    display: flex;
     font-weight: 700;
+    text-decoration: none;
 }
 
 .table tbody tr:last-child td,
@@ -102,6 +155,9 @@
     text-align: center;
     width: 48px;
 }
+.table--mode-selection tr:has(input:checked) :where(td, th) {
+    background-color: var(--color-background-secondary);
+}
 
 .table tbody th {
     font-weight: 400;

package/dist/tokens/evo-dark.css

@@ -3,6 +3,7 @@
         --color-background-primary: var(--color-neutral-900);
         --color-background-secondary: var(--color-neutral-800);
         --color-background-tertiary: var(--color-neutral-700);
+        --color-background-faint: rgba(var(--color-neutral-100-rgb), 0.05);
         --color-background-disabled: var(--color-neutral-600);
         --color-background-inverse: var(--color-neutral-300);
         --color-background-attention: var(--color-red-400);

package/dist/tokens/evo-light.css

@@ -2,6 +2,7 @@
     --color-background-primary: var(--color-neutral-100);
     --color-background-secondary: var(--color-neutral-200);
     --color-background-tertiary: var(--color-neutral-300);
+    --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);
     --color-background-disabled: var(--color-neutral-400);
     --color-background-inverse: var(--color-neutral-700);
     --color-background-attention: var(--color-red-600);

package/dist/utility/utility.css

@@ -101,3 +101,31 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+.scrollbars-permanent {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scroll-snap-type: proximity;
+    scroll-snap-type: x proximity;
+}
+
+.scrollbars-permanent::-webkit-scrollbar {
+    background-color: var(--color-background-faint);
+    border-radius: 12px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar:vertical {
+    width: 6px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar:horizontal {
+    height: 6px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar-thumb {
+    background-color: var(--color-foreground-secondary);
+    border-color: transparent;
+    border-radius: 12px;
+    border-right-style: inset;
+    box-shadow: none;
+}

package/index.browser.json

@@ -38,6 +38,7 @@
     "require: ./inline-notice.js",
     "require: ./lightbox-dialog.js",
     "require: ./link.js",
+    "require: ./list.js",
     "require: ./listbox.js",
     "require: ./listbox-button.js",
     "require: ./marketsans.js",

package/index.css

@@ -36,6 +36,7 @@
 @import "./inline-notice.css";
 @import "./lightbox-dialog.css";
 @import "./link.css";
+@import "./list.css";
 @import "./listbox.css";
 @import "./listbox-button.css";
 @import "./marketsans.css";

package/index.js

@@ -36,6 +36,7 @@ require('./infotip.js');
 require('./inline-notice.js');
 require('./lightbox-dialog.js');
 require('./link.js');
+require('./list.js');
 require('./listbox.js');
 require('./listbox-button.js');
 require('./marketsans.js');

package/index.mjs

@@ -36,6 +36,7 @@ import './infotip.css';
 import './inline-notice.css';
 import './lightbox-dialog.css';
 import './link.css';
+import './list.css';
 import './listbox.css';
 import './listbox-button.css';
 import './marketsans.css';

package/list.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./list.js"] }

package/list.css

@@ -0,0 +1 @@
+@import "./dist/list/list.css";

package/list.js

@@ -0,0 +1 @@
+require('./dist/list/list.css');

package/list.mjs

@@ -0,0 +1 @@
+import './dist/list/list.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "18.3.2",
+    "version": "18.4.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -30,6 +30,7 @@
         "start": "marko-run",
         "test": "npm run build:css",
         "deploy": "node scripts/jekyll-config && BASE_URL=/skin/ marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/archive && touch _site/.nojekyll",
+        "deploy:only": "node scripts/jekyll-config && marko-run build -o ./_site && npm run build:storybook && ncp docs/archive _site/archive && touch _site/.nojekyll",
         "prebuild": "npm run clean",
         "prepublishOnly": "node scripts gen",
         "postpublish": "node scripts clean",