@workday/canvas-kit-css 12.0.0-alpha.906-next.0 → 12.0.0-alpha.908-next.0

package/badge.css

@@ -1,4 +1,4 @@
-@keyframes animation-znlb3c {
+@keyframes animation-e3033e {
   from {
     transform: scale(0.85);
   }
@@ -12,7 +12,7 @@
 .cnvs-count-badge {
   box-sizing: border-box;
   align-items: center;
-  animation: animation-znlb3c 0.2s ease;
+  animation: animation-e3033e 0.2s ease;
   background: var(--cnvs-sys-color-static-red-default);
   border-radius: var(--cnvs-sys-shape-round);
   color: var(--cnvs-sys-color-text-inverse);

package/combobox.css

@@ -2,15 +2,3 @@
   box-sizing: border-box;
 }
 
-
-.cnvs-combobox-menu-item-icon {
-  box-sizing: border-box;
-  align-self: start;
-}
-
-
-.cnvs-combobox-menu-item {
-  box-sizing: border-box;
-  min-height: var(--cnvs-sys-space-x10);
-}
-

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-znlb4y {
+@keyframes animation-e3034y {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -19,7 +19,7 @@
   border-radius: var(--cnvs-sys-shape-round);
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-znlb4y;
+  animation-name: animation-e3034y;
   animation-duration: calc(var(--cnvs-single-loading-dot-animation-duration-ms) * 35);
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

package/menu.css

@@ -1,3 +1,69 @@
+.cnvs-menu-item {
+  box-sizing: border-box;
+  font-family: var(--cnvs-base-font-family-50);
+  font-weight: var(--cnvs-base-font-weight-400);
+  line-height: var(--cnvs-base-line-height-100);
+  font-size: var(--cnvs-base-font-size-75);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  cursor: pointer;
+  color: var(--cnvs-sys-color-fg-default);
+  border-width: 0;
+  text-align: start;
+  transition: background-color 80ms,color 80ms;
+  background-color: inherit;
+  min-height: var(--cnvs-sys-space-x10);
+  --cnvs-system-icon-color: currentcolor;
+}
+
+.cnvs-menu-item :where([data-part="menu-item-selected"]) {
+  transition: opacity 80ms linear;
+  opacity: var(--cnvs-sys-opacity-zero);
+}
+
+.cnvs-menu-item:where(:has(span)) {
+  display: flex;
+}
+
+.cnvs-menu-item:is([aria-selected=true]) {
+  color: var(--cnvs-brand-primary-dark);
+  background-color: var(--cnvs-brand-primary-lightest);
+}
+
+.cnvs-menu-item:is(.hover, :hover) {
+  color: var(--cnvs-sys-color-fg-strong);
+  background-color: var(--cnvs-brand-neutral-lightest);
+}
+
+.cnvs-menu-item:is(.focus, :focus) {
+  color: var(--cnvs-brand-primary-accent);
+  outline: none;
+  background-color: var(--cnvs-brand-primary-base);
+}
+
+.cnvs-menu-item:is(:disabled, [aria-disabled=true]) {
+  color: var(--cnvs-sys-color-text-disabled);
+  cursor: default;
+}
+
+.cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.focus, :focus) {
+  background-color: var(--cnvs-brand-primary-light);
+}
+
+.cnvs-menu-item :where([data-part="menu-item-text"]) {
+  flex-grow: 1;
+  align-self: center;
+}
+
+.cnvs-menu-item :where([data-part="menu-icon-icon"]) {
+  align-self: start;
+}
+
+
 .cnvs-menu-card {
   --cnvs-menu-card-min-width: 0.0625rem;
   --cnvs-menu-card-transform-origin-vertical: top;
@@ -43,3 +109,19 @@
   flex-direction: row;
 }
 
+
+.cnvs-menu-option {
+  box-sizing: border-box;
+}
+
+.cnvs-menu-option:where([aria-selected=true]) :where([data-part="menu-item-selected"]) {
+  opacity: var(--cnvs-sys-opacity-full);
+}
+
+.cnvs-menu-option:where([aria-selected=true]):where(.focus, :focus) {
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
+  outline: none;
+  background-color: var(--cnvs-brand-primary-base);
+  color: var(--cnvs-system-icon-color);
+}
+

package/modal.css

@@ -1,4 +1,4 @@
-@keyframes animation-znlb51 {
+@keyframes animation-e30351 {
   0% {
     background: none;
   }
@@ -18,7 +18,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-bg-overlay);
   animation-duration: 0.3s;
-  animation-name: animation-znlb51;
+  animation-name: animation-e30351;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "12.0.0-alpha.906-next.0",
+  "version": "12.0.0-alpha.908-next.0",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -25,5 +25,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "b796b56840b04395e0b4f4d643cad66be4103936"
+  "gitHead": "96aa087e44d928f9b530e0133be4326b8ff2fdce"
 }

package/popup.css

@@ -1,4 +1,4 @@
-@keyframes animation-znlbx {
+@keyframes animation-e303x {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -27,7 +27,7 @@
   padding: var(--cnvs-sys-space-x6);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-znlbx;
+  animation-name: animation-e303x;
   animation-duration: 150ms;
   animation-timing-function: ease-out;
   transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);