@workday/canvas-kit-css 13.0.0-alpha.1075-next.0 → 13.0.0-alpha.1084-next.0

package/avatar.css

@@ -15,7 +15,7 @@
   height: var(--cnvs-avatar-size);
 }
 
-.cnvs-avatar:focus-visible:not([disabled]), .cnvs-avatar.focus:not([disabled]) {
+.cnvs-avatar:focus-visible, .cnvs-avatar.focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
 }
@@ -25,20 +25,26 @@
   pointer-events: auto;
 }
 
-.cnvs-avatar>[data-part="avatar-icon"] {
+.cnvs-avatar:disabled, .cnvs-avatar.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+.cnvs-avatar [data-part="avatar-icon"] {
   transition: opacity 150ms linear;
   display: flex;
   align-items: center;
   justify-content: center;
   --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
+  opacity: 1;
 }
 
-.cnvs-avatar>[data-part="avatar-image"] {
+.cnvs-avatar [data-part="avatar-image"] {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 999px;
   transition: opacity 150ms linear;
+  opacity: 0;
 }
 
 
@@ -170,15 +176,6 @@
 }
 
 
-.cnvs-avatar.is-image-loaded-false [data-part="avatar-icon"] {
-  opacity: 1;
-}
-
-.cnvs-avatar.is-image-loaded-false>[data-part="avatar-image"] {
-  opacity: 0;
-}
-
-
 .cnvs-avatar.is-image-loaded [data-part="avatar-icon"] {
   opacity: 0;
 }

package/badge.css

@@ -1,4 +1,4 @@
-@keyframes animation-c6q43n {
+@keyframes animation-q8d73n {
   from {
     transform: scale(0.85);
   }
@@ -12,7 +12,7 @@
 .cnvs-count-badge {
   box-sizing: border-box;
   align-items: center;
-  animation: animation-c6q43n 0.2s ease;
+  animation: animation-q8d73n 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/banner.css

@@ -0,0 +1,95 @@
+.cnvs-banner-icon {
+  box-sizing: border-box;
+  margin-inline-end: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-banner-label {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0%;
+}
+
+
+.cnvs-action-bar-text {
+  box-sizing: border-box;
+  text-decoration: underline;
+  display: inline;
+}
+
+
+.cnvs-action-bar-text.is-sticky {
+  display: none;
+}
+
+
+.cnvs-banner {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  border: 0;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  border-start-start-radius: var(--cnvs-sys-shape-x1);
+  border-start-end-radius: var(--cnvs-sys-shape-x1);
+  border-end-start-radius: var(--cnvs-sys-shape-x1);
+  border-end-end-radius: var(--cnvs-sys-shape-x1);
+  cursor: pointer;
+  transition: background-color 120ms;
+  outline: var(--cnvs-sys-space-x1) solid transparent;
+}
+
+.cnvs-banner:focus-visible, .cnvs-banner.focus {
+  outline: var(--cnvs-sys-shape-x1) double transparent;
+  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+
+.cnvs-banner.has-errors {
+  background-color: var(--cnvs-brand-error-base);
+  color: var(--cnvs-brand-error-accent);
+}
+
+.cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
+  background: var(--cnvs-brand-error-dark);
+}
+
+.cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
+  --cnvs-system-icon-accent-color: var(--cnvs-brand-error-accent);
+  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
+  --cnvs-system-icon-background-color: none;
+}
+
+
+.cnvs-banner.has-errors-false {
+  background-color: var(--cnvs-brand-alert-base);
+  color: var(--cnvs-sys-color-fg-contrast-default);
+}
+
+.cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
+  background: var(--cnvs-brand-alert-dark);
+}
+
+.cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
+  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-background-color: none;
+}
+
+
+.cnvs-banner.is-sticky {
+  width: 13.875rem;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+
+.cnvs-banner.is-sticky-false {
+  width: 20.5rem;
+}
+

package/expandable.css

@@ -0,0 +1,93 @@
+.cnvs-expandable-content {
+  box-sizing: border-box;
+  background: var(--cnvs-sys-color-bg-transparent);
+  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-expandable-target {
+  box-sizing: border-box;
+  background: var(--cnvs-sys-color-bg-transparent);
+  border-color: var(--cnvs-sys-color-bg-transparent);
+  border-radius: var(--cnvs-sys-shape-x1);
+  border-width: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: start;
+  padding: var(--cnvs-sys-space-x2);
+  cursor: pointer;
+  width: 100%;
+}
+
+.cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
+  background-color: var(--cnvs-sys-color-bg-alt-default);
+}
+
+
+.cnvs-expandable-icon {
+  box-sizing: border-box;
+  padding: var(--cnvs-sys-space-x1);
+}
+
+
+
+
+
+
+
+.cnvs-expandable-icon.position-end.is-expanded {
+  margin-inline-start: auto;
+  transform: rotate(180deg);
+  padding-inline-end: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-expandable-icon.position-end.is-expanded {
+  margin-inline-start: auto;
+  padding-inline-start: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-expandable-icon.position-start.is-expanded {
+  margin-inline-end: var(--cnvs-sys-space-x2);
+  transform: rotate(90deg);
+}
+
+.cnvs-expandable-icon.position-start.is-expanded :dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+
+.cnvs-expandable-icon.position-start.is-expanded {
+  margin-inline-end: var(--cnvs-sys-space-x2);
+  transform: rotate(180deg);
+}
+
+
+.cnvs-expandable-title {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-body-medium);
+  font-size: var(--cnvs-sys-font-size-body-medium);
+  color: var(--cnvs-sys-color-text-strong);
+  padding: 0.125rem var(--cnvs-sys-space-zero);
+  text-align: left;
+}
+
+
+.cnvs-expandable-avatar {
+  box-sizing: border-box;
+  margin-inline-end: var(--cnvs-sys-space-x2);
+  flex-shrink: 0;
+}
+
+
+.cnvs-expandable-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: var(--cnvs-sys-space-x2);
+}
+

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-c6q458 {
+@keyframes animation-q8d75w {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -26,7 +26,7 @@
   outline: 0.125rem solid transparent;
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-c6q458;
+  animation-name: animation-q8d75w;
   animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

package/menu.css

@@ -137,3 +137,18 @@
   color: var(--cnvs-system-icon-color);
 }
 
+
+.cnvs-menu-group-heading {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  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);
+}
+

package/modal.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "13.0.0-alpha.1075-next.0",
+  "version": "13.0.0-alpha.1084-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": "423e097625d8c1cf8e48dcfc794313aae00ded67"
+  "gitHead": "7e212f823aba1ffbb1965c6ffdf8e270ad575a96"
 }

package/popup.css

@@ -1,4 +1,4 @@
-@keyframes animation-c6q4x {
+@keyframes animation-q8d7x {
   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-c6q4x;
+  animation-name: animation-q8d7x;
   animation-duration: 150ms;
   animation-timing-function: ease-out;
   transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);

package/skeleton.css

@@ -36,7 +36,7 @@
 }
 
 
-@keyframes animation-c6q45n {
+@keyframes animation-q8d76b {
   from {
     opacity: 0.4;
   }
@@ -49,7 +49,7 @@
 
 .cnvs-skeleton {
   box-sizing: border-box;
-  animation: animation-c6q45n 0.8s linear infinite alternate;
+  animation: animation-q8d76b 0.8s linear infinite alternate;
   position: relative;
   overflow: hidden;
   height: 100%;

package/tooltip.css

@@ -1,4 +1,4 @@
-@keyframes animation-c6q42r {
+@keyframes animation-q8d72r {
   0% {
     opacity: 0;
     transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
@@ -22,7 +22,7 @@
   position: relative;
   padding: var(--cnvs-sys-space-x3);
   color: var(--cnvs-sys-color-text-inverse);
-  animation-name: animation-c6q42r;
+  animation-name: animation-q8d72r;
   animation-duration: 150ms;
   animation-timing-function: ease-out;
   transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);