@ebay/skin 19.4.0 → 19.5.0

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -148,24 +148,41 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog__title--center {
     text-align: center;
 }
-
 .lightbox-dialog--hide.lightbox-dialog--mask-fade,
-.lightbox-dialog--show.lightbox-dialog--mask-fade {
-    transition: background-color 0.16s ease-out;
+.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
+    transition: background-color var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,
+.lightbox-dialog--hide .lightbox-dialog__window--fade {
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate {
+    transition:
+        transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),
+        opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate > * {
+    transition: opacity var(--motion-duration-short-2)
+        var(--motion-easing-continuous);
+}
+.lightbox-dialog--show.lightbox-dialog--mask-fade,
 .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
-    transition: background-color 0.32s ease-out;
+    transition: background-color var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--fade,
 .lightbox-dialog--show .lightbox-dialog__window--fade {
-    transition: opacity 0.16s ease-out;
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--animate,
 .lightbox-dialog--show .lightbox-dialog__window--animate {
     transition:
-        opacity 0.16s ease-out,
-        transform 0.32s ease-out;
+        transform var(--motion-duration-medium-3) var(--motion-easing-standard),
+        opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--show .lightbox-dialog__window--animate > * {
+    transition: opacity var(--motion-duration-medium-2)
+        var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
 
 .lightbox-dialog--hide.lightbox-dialog--hide,
@@ -180,15 +197,14 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-hide);
 }
+.lightbox-dialog--hide .lightbox-dialog__window--animate,
+.lightbox-dialog--hide .lightbox-dialog__window--animate > *,
 .lightbox-dialog--hide .lightbox-dialog__window--fade,
+.lightbox-dialog--show-init .lightbox-dialog__window--animate,
+.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,
 .lightbox-dialog--show-init .lightbox-dialog__window--fade {
     opacity: 0;
 }
-.lightbox-dialog--hide .lightbox-dialog__window--animate,
-.lightbox-dialog--show-init .lightbox-dialog__window--animate {
-    opacity: 0;
-    transform: translateY(100%);
-}
 
 .lightbox-dialog--hide-init.lightbox-dialog--hide-init,
 .lightbox-dialog--hide-init.lightbox-dialog--show,
@@ -202,15 +218,54 @@ button.icon-btn.lightbox-dialog__prev {
 .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-show);
 }
+.lightbox-dialog--hide-init .lightbox-dialog__window--animate,
+.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,
 .lightbox-dialog--hide-init .lightbox-dialog__window--fade,
+.lightbox-dialog--show .lightbox-dialog__window--animate,
+.lightbox-dialog--show .lightbox-dialog__window--animate > *,
 .lightbox-dialog--show .lightbox-dialog__window--fade {
     opacity: 1;
 }
+
+@media (prefers-reduced-motion) {
+    .lightbox-dialog--hide.lightbox-dialog--mask-fade,
+    .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
+        transition: background-color var(--motion-duration-short-3)
+            var(--motion-easing-soft-exit);
+    }
+    .lightbox-dialog--hide .lightbox-dialog__window--animate,
+    .lightbox-dialog--hide .lightbox-dialog__window--fade {
+        transition: opacity var(--motion-duration-short-3)
+            var(--motion-easing-soft-exit);
+    }
+    .lightbox-dialog--hide .lightbox-dialog__window--animate > * {
+        transition: opacity var(--motion-duration-short-2)
+            var(--motion-soft-exit);
+    }
+    .lightbox-dialog--show.lightbox-dialog--mask-fade,
+    .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
+        transition: background-color var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter);
+    }
+    .lightbox-dialog--show .lightbox-dialog__window--animate,
+    .lightbox-dialog--show .lightbox-dialog__window--fade {
+        transition: opacity var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter);
+    }
+    .lightbox-dialog--show .lightbox-dialog__window--animate > * {
+        transition: opacity var(--motion-duration-medium-2)
+            var(--motion-easing-soft-enter) var(--motion-duration-short-3);
+    }
+}
 .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
 .lightbox-dialog--show .lightbox-dialog__window--animate {
-    opacity: 1;
     transform: translateY(0);
 }
+
+.lightbox-dialog--hide .lightbox-dialog__window--animate,
+.lightbox-dialog--show-init .lightbox-dialog__window--animate {
+    transform: translateY(100%);
+}
 .lightbox-dialog__handle:after {
     background-color: var(--dialog-handle-color, var(--color-stroke-default));
     border-radius: 3px;
@@ -264,11 +319,21 @@ button.icon-btn.lightbox-dialog__prev {
         margin-left: var(--spacing-100);
         margin-top: 0;
     }
+    .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
+    .lightbox-dialog--show .lightbox-dialog__window--animate {
+        transform: scale(1);
+    }
+    .lightbox-dialog--hide .lightbox-dialog__window--animate,
+    .lightbox-dialog--show-init .lightbox-dialog__window--animate {
+        transform: scale(0.75);
+    }
+}
+@media (min-width: 512px) and (prefers-reduced-motion) {
     .lightbox-dialog--hide .lightbox-dialog__window--animate,
     .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
     .lightbox-dialog--show .lightbox-dialog__window--animate,
     .lightbox-dialog--show-init .lightbox-dialog__window--animate {
-        transform: translateY(0);
+        transform: scale(1);
     }
 }
 @media (min-width: 768px) {

package/dist/number-input/number-input.css

@@ -0,0 +1,48 @@
+.number-input .textbox {
+    background: transparent;
+}
+
+.number-input label:first-child {
+    flex-grow: 1;
+    padding-left: var(--spacing-200);
+}
+
+.number-input label:first-child ~ input.textbox__control {
+    flex-grow: 0;
+}
+
+.icon-btn.number-input__delete {
+    display: none;
+    margin-inline-end: calc(var(--spacing-100) * -1);
+    order: -1;
+    padding-inline-start: var(--spacing-200);
+}
+
+.number-input--show-delete .number-input__delete {
+    display: block;
+}
+
+.number-input--show-delete .number-input__decrement {
+    display: none;
+}
+
+.number-input .textbox .textbox__control {
+    font-weight: 700;
+    text-align: center;
+    width: 48px;
+}
+.number-input .textbox .textbox__control::-webkit-inner-spin-button,
+.number-input .textbox .textbox__control::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.number-input .textbox .textbox__control[type="number"] {
+    -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+    appearance: textfield;
+}
+
+.number-input .textbox .icon-btn:not(:disabled) svg {
+    color: var(--color-foreground-primary);
+    fill: currentColor;
+}

package/dist/table/table.css

@@ -64,6 +64,10 @@
     padding: 16px;
 }
 
+.table--frozen-header {
+    max-height: 90vh;
+}
+
 .table--frozen-header thead {
     position: sticky;
     top: 0;

package/dist/textbox/textbox.css

@@ -166,12 +166,12 @@ input.textbox__control {
     display: inline-flex;
     height: 1lh;
     pointer-events: none;
-    width: 14px;
     fill: var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox > span:first-child,
 .textbox > svg:first-child {
+    flex-shrink: 0;
     margin-inline-start: var(--spacing-200);
 }
 

package/eslint.config.mjs

@@ -1,15 +1,15 @@
-import ebayConfig from 'eslint-config-ebay';
+import ebayConfig from "eslint-config-ebay";
 import eslintConfigPrettier from "eslint-config-prettier";
 
 export default [
     {
-        "plugins": {
+        plugins: {
             ebayConfig,
             eslintConfigPrettier,
         },
         languageOptions: {
             ecmaVersion: 2020,
             sourceType: "module",
-        }
-    }
+        },
+    },
 ];

package/filter-input.browser.json

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

package/filter-input.css

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

package/filter-input.js

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

package/filter-input.mjs

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

package/index.browser.json

@@ -27,6 +27,7 @@
     "require: ./file-preview-card.js",
     "require: ./file-preview-card-group.js",
     "require: ./filter-button.js",
+    "require: ./filter-input.js",
     "require: ./filter-menu.js",
     "require: ./filter-menu-button.js",
     "require: ./flag.js",
@@ -49,6 +50,7 @@
     "require: ./marketsans.js",
     "require: ./menu.js",
     "require: ./menu-button.js",
+    "require: ./number-input.js",
     "require: ./page-grid.js",
     "require: ./page-notice.js",
     "require: ./pagination.js",

package/index.css

@@ -25,6 +25,7 @@
 @import "./file-preview-card.css";
 @import "./file-preview-card-group.css";
 @import "./filter-button.css";
+@import "./filter-input.css";
 @import "./filter-menu.css";
 @import "./filter-menu-button.css";
 @import "./flag.css";
@@ -47,6 +48,7 @@
 @import "./marketsans.css";
 @import "./menu.css";
 @import "./menu-button.css";
+@import "./number-input.css";
 @import "./page-grid.css";
 @import "./page-notice.css";
 @import "./pagination.css";

package/index.js

@@ -25,6 +25,7 @@ require('./file-input.js');
 require('./file-preview-card.js');
 require('./file-preview-card-group.js');
 require('./filter-button.js');
+require('./filter-input.js');
 require('./filter-menu.js');
 require('./filter-menu-button.js');
 require('./flag.js');
@@ -47,6 +48,7 @@ require('./listbox-button.js');
 require('./marketsans.js');
 require('./menu.js');
 require('./menu-button.js');
+require('./number-input.js');
 require('./page-grid.js');
 require('./page-notice.js');
 require('./pagination.js');

package/index.mjs

@@ -25,6 +25,7 @@ import './dist/file-input/file-input.css';
 import './dist/file-preview-card/file-preview-card.css';
 import './dist/file-preview-card-group/file-preview-card-group.css';
 import './dist/filter-button/filter-button.css';
+import './dist/filter-input/filter-input.css';
 import './dist/filter-menu/filter-menu.css';
 import './dist/filter-menu-button/filter-menu-button.css';
 import './dist/flag/flag.css';
@@ -47,6 +48,7 @@ import './dist/listbox-button/listbox-button.css';
 import './dist/marketsans/marketsans.css';
 import './dist/menu/menu.css';
 import './dist/menu-button/menu-button.css';
+import './dist/number-input/number-input.css';
 import './dist/page-grid/page-grid.css';
 import './dist/page-notice/page-notice.css';
 import './dist/pagination/pagination.css';

package/number-input.browser.json

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

package/number-input.css

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

package/number-input.js

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

package/number-input.mjs

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

package/package.json

@@ -1,20 +1,29 @@
 {
     "name": "@ebay/skin",
+    "version": "19.5.0",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "19.4.0",
-    "license": "MIT",
-    "main": "./index.js",
-    "module": "./index.mjs",
-    "maintainers": [
-        "Ian McBurnie <ianmcburnie@hotmail.com>",
-        "Andrew Gliga <agliga4@gmail.com>",
-        "Arthur Khachatryan <arthurk55@gmail.com>"
+    "keywords": [
+        "eBay",
+        "CSS",
+        "BEM",
+        "LassoJS",
+        "accessibility",
+        "WAI-ARIA",
+        "eBay MIND Patterns"
     ],
     "homepage": "https://opensource.ebay.com/skin/",
     "repository": {
         "type": "git",
         "url": "https://github.com/ebay/evo-core"
     },
+    "license": "MIT",
+    "maintainers": [
+        "Ian McBurnie <ianmcburnie@hotmail.com>",
+        "Andrew Gliga <agliga4@gmail.com>",
+        "Arthur Khachatryan <arthurk55@gmail.com>"
+    ],
+    "main": "./index.js",
+    "module": "./index.mjs",
     "files": [
         "dist",
         "tokens",
@@ -22,71 +31,61 @@
         "!.prettierrc.json",
         "!webpack.config.js",
         "!postcss.config.js",
-        "!vite.config.js",
-        "!webpack.config.js"
+        "!vite.config.js"
     ],
-    "devDependencies": {
-        "@marko/run-adapter-static": "^1.0.2"
-    },
     "scripts": {
-        "preview": "marko-run preview",
-        "start": "marko-run",
-        "test": "npm run build",
-        "deploy": "BASE_URL=/evo-web/skin/ marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && ncp docs/archive _site/public/archive && touch _site/public/.nojekyll",
-        "deploy:only": "marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && ncp docs/archive _site/public/archive --dereference=true && touch _site/public/.nojekyll",
         "prebuild": "npm run clean",
-        "prepublishOnly": "node scripts gen",
-        "postpublish": "node scripts clean",
         "build": "npm run build:css && npm run lint:js && npm run copy && node scripts gen-build",
         "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && node scripts/add-y-comments.js && prettier dist --write && npm run lint:css",
+        "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
-        "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "bundle": "sass src/sass:dist --no-source-map",
-        "postcss": "postcss dist/**/*.css -r ",
-        "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
-        "lint:sass": "stylelint docs/src/sass src/sass --config .stylelintrc",
-        "lint:css": "stylelint dist --config .stylelintrc",
-        "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
-        "format": "npx prettier --write .",
+        "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:svgToDocs && npm run copy:tokensToDist && npm run copy:assetsToStorybook",
-        "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins && ncp src/sass/gh dist/gh",
         "copy:assetsToStorybook": "node scripts storybook-copy",
+        "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins && ncp src/sass/gh dist/gh",
         "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",
         "copy:svgToDocs": "ncp src/svg src/routes/static && ncp src/svg/icons.svg src/components/master-icons.marko",
-        "copy:tokensToDocs": "ncp src/tokens src/routes/static",
         "copy:tokensToDist": "ncp src/tokens dist/tokens",
-        "verify": "node scripts verify",
-        "version": "npm run build",
+        "copy:tokensToDocs": "ncp src/tokens src/routes/static",
+        "deploy": "BASE_URL=/evo-web/skin/ marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && ncp docs/archive _site/public/archive && touch _site/public/.nojekyll",
+        "deploy:only": "marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && ncp docs/archive _site/public/archive --dereference=true && touch _site/public/.nojekyll",
+        "format": "npx prettier --write .",
+        "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
+        "lint:css": "stylelint dist --config .stylelintrc",
+        "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
+        "lint:sass": "stylelint docs/src/sass src/sass --config .stylelintrc",
+        "postcss": "postcss dist/**/*.css -r ",
+        "prepublishOnly": "node scripts gen",
+        "preview": "marko-run preview",
+        "postpublish": "node scripts clean",
         "release": "npm run build",
-        "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
+        "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
+        "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
         "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
         "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
         "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
-        "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
-        "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook"
-    },
-    "keywords": [
-        "eBay",
-        "CSS",
-        "BEM",
-        "LassoJS",
-        "accessibility",
-        "WAI-ARIA",
-        "eBay MIND Patterns"
-    ],
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org"
+        "start": "marko-run",
+        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook",
+        "test": "npm run build",
+        "verify": "node scripts verify",
+        "version": "npm run build"
     },
-    "browserslist": [
-        "extends @ebay/browserslist-config"
-    ],
     "commitlint": {
         "extends": "@commitlint/config-conventional"
     },
     "lint-staged": {
         "*.{js,css,md,scss,json}": "prettier --write",
         "*.{css,scss}": "stylelint --config .stylelintrc"
+    },
+    "browserslist": [
+        "extends @ebay/browserslist-config"
+    ],
+    "devDependencies": {
+        "@marko/run-adapter-static": "^1.0.2"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
     }
 }