@ebay/skin 17.2.0 → 17.3.0

package/dist/education-notice/education-notice.css

@@ -0,0 +1,61 @@
+.education-notice {
+  background-color: var(--education-notice-default-background-color, var(--color-background-secondary));
+  border-radius: var(--education-notice-border-radius, var(--border-radius-100));
+  color: var(--color-foreground-primary);
+  font-size: var(--font-size-default);
+  padding: var(--spacing-300);
+}
+.education-notice--prominent {
+  background-color: var(--education-notice-education-background-color, var(--color-background-education));
+}
+.education-notice__header {
+  align-items: center;
+  display: flex;
+}
+.education-notice__title {
+  flex-grow: 1;
+  font-size: var(--font-size-medium);
+  font-weight: bold;
+  line-height: 1.5em;
+  margin: 0;
+  -webkit-margin-start: var(--spacing-150);
+          margin-inline-start: var(--spacing-150);
+}
+.education-notice__main {
+  margin-top: var(--spacing-200);
+}
+.education-notice__dismiss {
+  -webkit-margin-start: var(--spacing-150);
+          margin-inline-start: var(--spacing-150);
+}
+.education-notice button.icon-btn {
+  background-color: transparent;
+}
+.education-notice__header .icon--prominent {
+  color: var(--color-foreground-accent);
+}
+.education-notice__footer a {
+  color: var(--education-notice-foreground-color, var(--color-foreground-primary));
+  font-size: var(--font-size-default);
+  font-weight: 700;
+  white-space: nowrap;
+}
+.education-notice__footer button.fake-link {
+  font-size: var(--font-size-default);
+  font-weight: bold;
+}
+.education-notice__main p {
+  font-size: var(--font-size-default);
+  margin: 0;
+}
+.education-notice__footer {
+  margin-top: var(--spacing-200);
+}
+.education-notice__header button.fake-link,
+.education-notice__header button.fake-link:hover {
+  color: var(--education-notice-foreground-color, var(--color-foreground-primary));
+  font-size: var(--font-size-default);
+  font-weight: bold;
+  height: 24px;
+  width: 24px;
+}

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

@@ -45,12 +45,28 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button button[aria-invalid="true"] {
   border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention));
 }
-.listbox-button:not(.listbox-button--error) button.btn--form {
+.listbox-button:not(.listbox-button--error) button:not(
+        [disabled],
+        [aria-disabled="true"],
+        [aria-invalid="true"]
+    ).btn--form {
   border-color: var(--listbox-button-border-color, var(--color-stroke-default));
 }
-.listbox-button:not(.listbox-button--error) button.btn--form:hover,
-.listbox-button:not(.listbox-button--error) button.btn--form:focus,
-.listbox-button:not(.listbox-button--error) button.btn--form:active {
+.listbox-button:not(.listbox-button--error) button:not(
+        [disabled],
+        [aria-disabled="true"],
+        [aria-invalid="true"]
+    ).btn--form:hover,
+.listbox-button:not(.listbox-button--error) button:not(
+        [disabled],
+        [aria-disabled="true"],
+        [aria-invalid="true"]
+    ).btn--form:focus,
+.listbox-button:not(.listbox-button--error) button:not(
+        [disabled],
+        [aria-disabled="true"],
+        [aria-invalid="true"]
+    ).btn--form:active {
   border-color: inherit;
 }
 .listbox-button button.expand-btn--borderless,
@@ -77,7 +93,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button[disabled],
 .listbox-button.listbox-button--form button[aria-disabled="true"] {
   border-color: var(--listbox-button-disabled-border-color, var(--color-background-disabled));
-  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-primary));
+  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-disabled));
 }
 .listbox-button.listbox-button--form button:focus {
   background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary));
@@ -104,6 +120,9 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
   font-weight: bold;
   margin-right: auto;
 }
+.listbox-button__options {
+  border-radius: var(--listbox-button-border-radius, var(--border-radius-50));
+}
 .listbox-button__options[role="listbox"]:focus .listbox-button__option--active[role="option"] {
   background-color: var(--color-state-primary-hover);
 }

package/dist/progress-bar-expressive/progress-bar-expressive.css

@@ -0,0 +1,277 @@
+:root {
+  --progress-bar-expressive-color-1: #e53238;
+  --progress-bar-expressive-color-2: #0064d2;
+  --progress-bar-expressive-color-3: #f5af02;
+  --progress-bar-expressive-color-4: #86b817;
+  --progress-bar-expressive-line-border-radius: 2px;
+  --progress-bar-expressive-line-count: 12;
+  --progress-bar-expressive-line-gap: var(--spacing-50);
+  --progress-bar-expressive-line-height: 6px;
+  --progress-bar-expressive-line-scale-duration: 3s;
+  --progress-bar-expressive-line-scroll-duration: 20s;
+  /* Each line has a final width of 10% - 40% of the lines container.
+       In each set of four lines, the widths add up to 100%.
+       These widths are defined in CSS variables so they can more 
+       easily be randomized in Javascript, if desired. */
+  --progress-bar-expressive-line-width-a1: 25%;
+  --progress-bar-expressive-line-width-a2: 15%;
+  --progress-bar-expressive-line-width-a3: 40%;
+  --progress-bar-expressive-line-width-a4: 20%;
+  --progress-bar-expressive-line-width-b1: 17%;
+  --progress-bar-expressive-line-width-b2: 21%;
+  --progress-bar-expressive-line-width-b3: 30%;
+  --progress-bar-expressive-line-width-b4: 32%;
+  --progress-bar-expressive-line-width-c1: 39%;
+  --progress-bar-expressive-line-width-c2: 29%;
+  --progress-bar-expressive-line-width-c3: 20%;
+  --progress-bar-expressive-line-width-c4: 12%;
+  --progress-bar-expressive-message-animatein-duration: 833ms;
+  --progress-bar-expressive-message-animateout-duration: 400ms;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --progress-bar-expressive-color-1: #f0343b;
+    --progress-bar-expressive-color-2: #0078fc;
+    --progress-bar-expressive-color-3: #e8a502;
+    --progress-bar-expressive-color-4: #86b817;
+  }
+}
+.progress-bar-expressive {
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-content: end;
+  margin: 0 auto;
+  max-width: 375px;
+  row-gap: var(--spacing-300);
+  width: 100%;
+}
+.progress-bar-expressive--loaded {
+  display: none;
+}
+.progress-bar-expressive__messages {
+  color: var(--color-foreground-primary);
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-regular);
+  line-height: calc(var(--spacing-50) + var(--spacing-300));
+  margin: 0 var(--spacing-200);
+  min-height: 3rem;
+  position: relative;
+  text-align: center;
+}
+.progress-bar-expressive__messages--medium {
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--spacing-300);
+}
+.progress-bar-expressive__message {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+.progress-bar-expressive__message[role="status"] {
+  opacity: 1;
+}
+.progress-bar-expressive__message[aria-hidden="true"] {
+  opacity: 0;
+}
+.progress-bar-expressive__message--in {
+  animation: progress-bar-expressive-message-animatein var(--progress-bar-expressive-message-animatein-duration) cubic-bezier(0.3, 0, 0, 1) both;
+}
+.progress-bar-expressive__message--out {
+  animation: progress-bar-expressive-message-animateout var(--progress-bar-expressive-message-animateout-duration) cubic-bezier(0.3, 0, 0, 1) both;
+}
+.progress-bar-expressive__progress[role="progressbar"] {
+  border-radius: var(--progress-bar-expressive-line-border-radius);
+  margin: 0 var(--spacing-200);
+  overflow: hidden;
+}
+.progress-bar-expressive__lines {
+  display: flex;
+  overflow: visible;
+  width: calc(100% - (3 * var(--progress-bar-expressive-line-gap)));
+}
+.progress-bar-expressive__line {
+  /* Default animation behavior: Lines scroll and resize.
+       Animate line's width from 0% to its pre-defined width.
+       Simultaneously cycle the line's order in its flex container
+       to push its siblings forward and achieve an infinite loop. 
+
+       Note that Safari < 14 does not support flex order animations.
+       In these browsers, the lines do not appear to infinitely
+       scroll. Instead, they scale up, reset their size, and repeat. */
+  animation: progress-bar-expressive-line-reorder var(--progress-bar-expressive-line-scale-duration) steps(var(--progress-bar-expressive-line-count)) infinite, progress-bar-expressive-line-scale-width var(--progress-bar-expressive-line-scale-duration) infinite;
+  border-radius: var(--progress-bar-expressive-line-border-radius);
+  display: inline-block;
+  flex-shrink: 0;
+  height: var(--progress-bar-expressive-line-height);
+  line-height: 0;
+  order: 1;
+}
+.progress-bar-expressive__line:nth-child(4n + 1) {
+  background-color: var(--progress-bar-expressive-color-4);
+}
+.progress-bar-expressive__line:nth-child(4n + 2) {
+  background-color: var(--progress-bar-expressive-color-3);
+}
+.progress-bar-expressive__line:nth-child(4n + 3) {
+  background-color: var(--progress-bar-expressive-color-2);
+}
+.progress-bar-expressive__line:nth-child(4n + 4) {
+  background-color: var(--progress-bar-expressive-color-1);
+}
+.progress-bar-expressive__line:nth-child(1) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)));
+  width: var(--progress-bar-expressive-line-width-a1);
+}
+.progress-bar-expressive__line:nth-child(2) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 2)));
+  width: var(--progress-bar-expressive-line-width-a2);
+}
+.progress-bar-expressive__line:nth-child(3) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 3)));
+  width: var(--progress-bar-expressive-line-width-a3);
+}
+.progress-bar-expressive__line:nth-child(4) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 4)));
+  width: var(--progress-bar-expressive-line-width-a4);
+}
+.progress-bar-expressive__line:nth-child(5) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 5)));
+  width: var(--progress-bar-expressive-line-width-b1);
+}
+.progress-bar-expressive__line:nth-child(6) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 6)));
+  width: var(--progress-bar-expressive-line-width-b2);
+}
+.progress-bar-expressive__line:nth-child(7) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 7)));
+  width: var(--progress-bar-expressive-line-width-b3);
+}
+.progress-bar-expressive__line:nth-child(8) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 8)));
+  width: var(--progress-bar-expressive-line-width-b4);
+}
+.progress-bar-expressive__line:nth-child(9) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 9)));
+  width: var(--progress-bar-expressive-line-width-c1);
+}
+.progress-bar-expressive__line:nth-child(10) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 10)));
+  width: var(--progress-bar-expressive-line-width-c2);
+}
+.progress-bar-expressive__line:nth-child(11) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 11)));
+  width: var(--progress-bar-expressive-line-width-c3);
+}
+.progress-bar-expressive__line:nth-child(12) {
+  animation-delay: calc(-1 * (var(--progress-bar-expressive-line-scale-duration) - ((var(--progress-bar-expressive-line-scale-duration) / var(--progress-bar-expressive-line-count)) * 12)));
+  width: var(--progress-bar-expressive-line-width-c4);
+}
+/* With reduced motion, there are no animated transitions
+   between messages and the lines scroll but do not resize. */
+@media (prefers-reduced-motion) {
+  .progress-bar-expressive__message--in,
+  .progress-bar-expressive__message--out {
+    animation: none;
+  }
+  .progress-bar-expressive__message[aria-hidden="true"] {
+    display: none;
+  }
+  .progress-bar-expressive__messages:not(
+            .progress-bar-expressive__messages--medium
+        ) .progress-bar-expressive__message--initial[role="status"] {
+    animation: progress-bar-expressive-message-fadein var(--progress-bar-expressive-message-animatein-duration) cubic-bezier(0.3, 0, 0, 1) both;
+  }
+  .progress-bar-expressive__lines {
+    animation: progress-bar-expressive-reduced-motion-line-scroll var(--progress-bar-expressive-line-scroll-duration) linear infinite;
+    overflow: visible;
+  }
+  .progress-bar-expressive__line {
+    animation: none;
+    animation-delay: none;
+    margin-right: var(--progress-bar-expressive-line-gap);
+  }
+  .progress-bar-expressive__line:nth-child(4n + 1) {
+    background-color: var(--progress-bar-expressive-color-1);
+  }
+  .progress-bar-expressive__line:nth-child(4n + 2) {
+    background-color: var(--progress-bar-expressive-color-2);
+  }
+  .progress-bar-expressive__line:nth-child(4n + 3) {
+    background-color: var(--progress-bar-expressive-color-3);
+  }
+  .progress-bar-expressive__line:nth-child(4n + 4) {
+    background-color: var(--progress-bar-expressive-color-4);
+  }
+  .progress-bar-expressive__line:nth-child(9) {
+    width: var(--progress-bar-expressive-line-width-a1);
+  }
+  .progress-bar-expressive__line:nth-child(10) {
+    width: var(--progress-bar-expressive-line-width-a2);
+  }
+  .progress-bar-expressive__line:nth-child(11) {
+    width: var(--progress-bar-expressive-line-width-a3);
+  }
+  .progress-bar-expressive__line:nth-child(12) {
+    width: var(--progress-bar-expressive-line-width-a4);
+  }
+}
+@keyframes progress-bar-expressive-message-animateout {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(calc(var(--font-size-24) * -1));
+  }
+}
+@keyframes progress-bar-expressive-message-animatein {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--font-size-24));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes progress-bar-expressive-message-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes progress-bar-expressive-line-reorder {
+  0% {
+    order: 0;
+  }
+  100% {
+    order: var(--progress-bar-expressive-line-count);
+  }
+}
+@keyframes progress-bar-expressive-line-scale-width {
+  0% {
+    margin-right: 0;
+    width: 0;
+  }
+  12.5% {
+    margin-right: var(--progress-bar-expressive-line-gap);
+  }
+  50%,
+  100% {
+    margin-right: var(--progress-bar-expressive-line-gap);
+  }
+}
+@keyframes progress-bar-expressive-reduced-motion-line-scroll {
+  0% {
+    transform: translateX(calc(-200% - 8 * var(--progress-bar-expressive-line-gap)));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/toggle-button-group/toggle-button-group.css

@@ -6,7 +6,7 @@
   width: 100%;
 }
 .toggle-button-group li {
-  display: inline-table;
+  display: inline-block;
   margin-bottom: var(--spacing-50);
   margin-left: var(--spacing-50);
   margin-right: var(--spacing-50);

package/education-notice.browser.json

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

package/education-notice.css

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

package/education-notice.js

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

package/education-notice.mjs

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

package/index.browser.json

@@ -16,6 +16,7 @@
     "require: ./date-textbox.js",
     "require: ./details.js",
     "require: ./drawer-dialog.js",
+    "require: ./education-notice.js",
     "require: ./eek.js",
     "require: ./field.js",
     "require: ./filter-button.js",
@@ -42,6 +43,7 @@
     "require: ./pagination.js",
     "require: ./panel-dialog.js",
     "require: ./progress-bar.js",
+    "require: ./progress-bar-expressive.js",
     "require: ./progress-spinner.js",
     "require: ./progress-stepper.js",
     "require: ./radio.js",

package/index.css

@@ -14,6 +14,7 @@
 @import "./date-textbox.css";
 @import "./details.css";
 @import "./drawer-dialog.css";
+@import "./education-notice.css";
 @import "./eek.css";
 @import "./field.css";
 @import "./filter-button.css";
@@ -40,6 +41,7 @@
 @import "./pagination.css";
 @import "./panel-dialog.css";
 @import "./progress-bar.css";
+@import "./progress-bar-expressive.css";
 @import "./progress-spinner.css";
 @import "./progress-stepper.css";
 @import "./radio.css";

package/index.js

@@ -14,6 +14,7 @@ require('./cta-button.js');
 require('./date-textbox.js');
 require('./details.js');
 require('./drawer-dialog.js');
+require('./education-notice.js');
 require('./eek.js');
 require('./field.js');
 require('./filter-button.js');
@@ -40,6 +41,7 @@ require('./page-notice.js');
 require('./pagination.js');
 require('./panel-dialog.js');
 require('./progress-bar.js');
+require('./progress-bar-expressive.js');
 require('./progress-spinner.js');
 require('./progress-stepper.js');
 require('./radio.js');

package/index.mjs

@@ -14,6 +14,7 @@ import './cta-button.css';
 import './date-textbox.css';
 import './details.css';
 import './drawer-dialog.css';
+import './education-notice.css';
 import './eek.css';
 import './field.css';
 import './filter-button.css';
@@ -40,6 +41,7 @@ import './page-notice.css';
 import './pagination.css';
 import './panel-dialog.css';
 import './progress-bar.css';
+import './progress-bar-expressive.css';
 import './progress-spinner.css';
 import './progress-stepper.css';
 import './radio.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.2.0",
+    "version": "17.3.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -24,7 +24,7 @@
         "build": "npm run build:css && npm run lint:js && npm run bundle && npm run build:site && npm run copy",
         "build:css": "npm run lint:less && rimraf dist && gulp && npm run lint:css",
         "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
-        "build:jekyll": "bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
+        "build:jekyll": "node scripts/jekyll-config && bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
         "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./docs/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
@@ -45,7 +45,7 @@
         "copy:tokensToDocs": "ncp src/tokens docs/static",
         "copy:tokensToDist": "ncp src/tokens dist/tokens",
         "verify": "node scripts verify",
-        "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs && changeset version",
+        "version": "npm run build:storybook && npm run build && git add -A dist docs && changeset version && node scripts/jekyll-config",
         "release": "npm run build && changeset publish",
         "transpile": "babel docs/src/js --out-dir docs/_babel",
         "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
@@ -61,19 +61,19 @@
         "prerelease:end": "changeset pre exit"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.9",
-        "@babel/core": "^7.23.9",
-        "@babel/preset-env": "^7.23.9",
+        "@babel/cli": "^7.24.1",
+        "@babel/core": "^7.24.3",
+        "@babel/preset-env": "^7.24.3",
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "^2.27.1",
-        "@commitlint/cli": "^18.6.1",
-        "@commitlint/config-conventional": "^18.6.2",
-        "@ebay/browserslist-config": "^2.7.0",
+        "@commitlint/cli": "^19.2.1",
+        "@commitlint/config-conventional": "^19.1.0",
+        "@ebay/browserslist-config": "^2.8.0",
         "@floating-ui/dom": "^1.6.3",
-        "@percy/cli": "^1.28.0",
+        "@percy/cli": "^1.28.2",
         "@percy/storybook": "^5.0.1",
-        "@storybook/html": "^7.6.17",
-        "@storybook/html-webpack5": "^7.6.17",
+        "@storybook/html": "^8.0.2",
+        "@storybook/html-webpack5": "^8.0.2",
         "babel-loader": "^9.1.3",
         "browser-sync": "^3.0.2",
         "btoa": "^1",
@@ -107,9 +107,9 @@
         "makeup-key-emitter": "~0.3.1",
         "makeup-lightbox-dialog": "0.1.0",
         "makeup-listbox": "~0.3.2",
-        "makeup-listbox-button": "~0.4.2",
+        "makeup-listbox-button": "~0.4.4",
         "makeup-menu": "~0.3.0",
-        "makeup-menu-button": "~0.3.3",
+        "makeup-menu-button": "~0.3.4",
         "makeup-modal": "~0.4.1",
         "makeup-panel-dialog": "0.1.0",
         "makeup-prevent-scroll-keys": "~0.2.1",
@@ -121,19 +121,19 @@
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^8.1.0",
+        "postcss-loader": "^8.1.1",
         "prettier": "^3.2.5",
         "rimraf": "^5",
-        "storybook": "^7.6.17",
+        "storybook": "^8.0.2",
         "stylelint": "^16.2.1",
         "stylelint-config-standard": "^36",
         "stylelint-no-unsupported-browser-features": "^8",
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
         "svgo": "^3.2.0",
-        "webpack": "^5.90.3",
+        "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
-        "winston": "^3.11.0",
+        "winston": "^3.12.0",
         "xmlserializer": "^0.6.1",
         "yargs": "^17.7.2"
     },

package/progress-bar-expressive.browser.json

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

package/progress-bar-expressive.css

@@ -0,0 +1 @@
+@import "./dist/progress-bar-expressive/progress-bar-expressive.css";

package/progress-bar-expressive.js

@@ -0,0 +1 @@
+require('./dist/progress-bar-expressive/progress-bar-expressive.css');

package/progress-bar-expressive.mjs

@@ -0,0 +1 @@
+import './dist/progress-bar-expressive/progress-bar-expressive.css';

package/src/less/bundles/skin-headless.less

@@ -18,6 +18,7 @@
 @import "../date-textbox/date-textbox.less";
 @import "../details/details.less";
 @import "../drawer-dialog/drawer-dialog.less";
+@import "../education-notice/education-notice.less";
 @import "../eek/eek.less";
 @import "../field/field.less";
 @import "../filter-button/filter-button.less";
@@ -43,6 +44,7 @@
 @import "../pagination/pagination.less";
 @import "../panel-dialog/panel-dialog.less";
 @import "../progress-bar/progress-bar.less";
+@import "../progress-bar-expressive/progress-bar-expressive.less";
 @import "../progress-spinner/progress-spinner.less";
 @import "../progress-stepper/progress-stepper.less";
 @import "../radio/radio.less";

package/src/less/button/button.less

@@ -354,7 +354,10 @@ a.fake-btn--form {
     border-color: inherit;
     .border-radius-token(expand-btn-border-radius, border-radius-50);
     max-width: 100%;
+}
 
+button.btn--form:not([disabled], [aria-disabled="true"]),
+a.fake-btn--form:not([href]) {
     &:hover,
     &:focus {
         background-color: var(--color-state-primary-hover);