@ebay/skin 19.4.0 → 19.5.1

package/dist/filter-input/filter-input.css

@@ -0,0 +1,55 @@
+.filter-input {
+    display: inline-block;
+    width: 100%;
+}
+
+.filter-input__clear-btn {
+    display: none;
+}
+
+.filter-input .textbox {
+    border-radius: var(--border-radius-150);
+    max-width: 480px;
+    min-width: 200px;
+}
+
+.filter-input .textbox__control {
+    height: 40px;
+}
+
+.filter-input
+    .textbox__control:not(:placeholder-shown)
+    ~ .filter-input__clear-btn {
+    display: block;
+}
+
+.filter-input .textbox__control::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    display: none;
+}
+
+.filter-input .textbox button.icon-btn.icon-btn--transparent.icon-btn--small {
+    min-width: 32px;
+}
+
+.filter-input .textbox .icon-btn:last-child {
+    flex-shrink: 0;
+    margin-inline-end: var(--spacing-50);
+    margin-inline-start: 0;
+}
+
+.filter-input--small .textbox .icon-btn:last-child {
+    margin-inline-end: 0;
+}
+
+.filter-input--large .textbox .icon-btn:last-child {
+    margin-inline-end: var(--spacing-100);
+}
+
+.filter-input--small .textbox__control {
+    height: 32px;
+}
+
+.filter-input--large .textbox__control {
+    height: 48px;
+}

package/dist/filter-menu-button/filter-menu-button.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 div.filter-group {
     display: flex;

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -1,7 +1,7 @@
 /*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
-    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .fullscreen-dialog[role="dialog"] {

package/dist/infotip/infotip.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 .infotip {
     position: relative;

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

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
     --dialog-lightbox-max-width: 616px;
     --dialog-lightbox-wide-max-width: 896px;
     --dialog-lightbox-narrow-max-width: 480px;
@@ -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/listbox/listbox.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 div.listbox {
     margin: var(--spacing-200) 0;

package/dist/listbox-button/listbox-button.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 .listbox-button {
     line-height: normal;

package/dist/menu/menu.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 .fake-menu__items,
 .menu__items {

package/dist/menu-button/menu-button.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 .fake-menu-button,
 .menu-button {

package/dist/mixins/_utility-mixins.scss

@@ -32,7 +32,7 @@
     position: relative;
 
     &::after {
-        background: rgb(0, 0, 0, 0.05);
+        background: rgb(0 0 0 / 0.05);
         bottom: 0;
         content: "";
         display: block;

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/panel-dialog/panel-dialog.css

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .panel-dialog[role="dialog"] {

package/dist/snackbar-dialog/snackbar-dialog.css

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .snackbar-dialog {

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/dist/toast-dialog/toast-dialog.css

@@ -1,6 +1,6 @@
 :root {
-    --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
-    --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
     --dialog-lightbox-max-width: 616px;
 }
 .toast-dialog {

package/dist/tooltip/tooltip.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 .tooltip {
     position: relative;

package/dist/tourtip/tourtip.css

@@ -1,5 +1,5 @@
 :root {
-    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
 }
 .tourtip {
     position: relative;

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';