@ebay/skin 17.2.0-next.0 → 17.3.0-next.0

package/dist/date-textbox/date-textbox.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .date-textbox {
   --calendar-month-width: 311px;
@@ -10,7 +11,7 @@
 .date-textbox__popover {
   background-color: var(--calendar-background-color, var(--color-background-elevated));
   border-radius: var(--spacing-200);
-  filter: var(--bubble-filter);
+  box-shadow: var(--bubble-shadow);
   margin-left: calc(var(--spacing-100) * -1);
   padding: var(--spacing-200);
   position: absolute;

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/filter-menu-button/filter-menu-button.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 div.filter-group {
   display: flex;
@@ -98,8 +99,8 @@ button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"]:hov
   background-color: var(--filter-menu-item-background-color, var(--color-background-elevated));
   border: none;
   border-radius: 16px;
+  box-shadow: var(--bubble-shadow);
   display: none;
-  filter: var(--bubble-filter);
   max-width: 288px;
   min-width: 144px;
   overflow: hidden;

package/dist/infotip/infotip.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .infotip {
   position: relative;
@@ -9,7 +10,7 @@ span.infotip {
 }
 .infotip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  filter: var(--bubble-filter);
+  box-shadow: var(--bubble-shadow);
   font-size: 14px;
   left: 0;
   max-width: 344px;

package/dist/listbox/listbox.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 div.listbox {
   margin: var(--spacing-200) 0;
@@ -30,6 +31,8 @@ div.listbox__options--reverse[role="listbox"] {
 }
 div.listbox__option[role="option"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

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

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .listbox-button {
   line-height: normal;
@@ -21,9 +22,9 @@ span.listbox-button--fluid .btn {
 div.listbox-button__listbox {
   background-color: var(--listbox-button-listbox-background-color, var(--color-background-elevated));
   border-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
+  box-shadow: var(--bubble-shadow);
   box-sizing: border-box;
   display: none;
-  filter: var(--bubble-filter);
   left: 0;
   max-height: 400px;
   min-width: 100%;
@@ -44,12 +45,12 @@ 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"]).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"]).btn--form:hover,
+.listbox-button:not(.listbox-button--error) button:not([disabled], [aria-disabled="true"]).btn--form:focus,
+.listbox-button:not(.listbox-button--error) button:not([disabled], [aria-disabled="true"]).btn--form:active {
   border-color: inherit;
 }
 .listbox-button button.expand-btn--borderless,
@@ -76,7 +77,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));
@@ -128,6 +129,8 @@ div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
 }
 div.listbox-button__option[role="option"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

package/dist/menu/menu.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .menu__items,
 .fake-menu__items {
@@ -46,6 +47,8 @@ button.fake-menu__item,
 a.fake-menu__item,
 div.menu__item[role^="menuitem"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

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

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .menu-button,
 .fake-menu-button {
@@ -10,9 +11,9 @@
 .fake-menu-button__menu {
   background-color: var(--menu-button-menu-background-color, var(--color-background-elevated));
   border-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
+  box-shadow: var(--bubble-shadow);
   box-sizing: border-box;
   display: none;
-  filter: var(--bubble-filter);
   left: 0;
   max-height: 400px;
   min-width: 100%;
@@ -42,6 +43,8 @@ span.fake-menu-button__button {
 }
 div.menu-button__item[role^="menuitem"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;
@@ -115,6 +118,8 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

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

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tooltip {
   position: relative;
@@ -9,8 +10,8 @@ span.tooltip {
 }
 .tooltip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  box-shadow: var(--bubble-shadow);
   display: none;
-  filter: var(--bubble-filter);
   font-size: 14px;
   left: 0;
   max-width: 344px;

package/dist/tourtip/tourtip.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tourtip {
   position: relative;
@@ -9,8 +10,8 @@ span.tourtip {
 }
 .tourtip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-100));
+  box-shadow: var(--bubble-shadow);
   display: none;
-  filter: var(--bubble-filter);
   font-size: 14px;
   left: 0;
   max-width: 344px;

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