@workday/canvas-kit-css 13.0.0-alpha.1052-next.0 → 13.0.0-alpha.1064-next.0

package/avatar.css

@@ -174,7 +174,7 @@
   opacity: 1;
 }
 
-.cnvs-avatar.is-image-loaded-false [data-part="avatar-image"] {
+.cnvs-avatar.is-image-loaded-false>[data-part="avatar-image"] {
   opacity: 0;
 }
 

package/badge.css

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

@@ -39,6 +39,8 @@
   border-color: var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));
   color: var(--cnvs-button-color-prop-focus-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
   --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
   box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-brand-common-focus-outline)));
 }
 
@@ -67,6 +69,20 @@
   --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
 }
 
+@media (prefers-contrast: more) {
+.cnvs-button[aria-pressed="true"] {
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.0625rem;
+}
+
+.cnvs-button[aria-pressed="true"]:focus-visible, .cnvs-button[aria-pressed="true"].focus {
+  outline: 0.25rem double transparent;
+  outline-offset: 0;
+}
+
+
+}
+
 
 .cnvs-button.size-large {
   font-family: var(--cnvs-sys-font-family-default);

package/icon.css

@@ -97,6 +97,15 @@
   fill: var(--cnvs-deprecated-system-icon-background-hover, var(--cnvs-system-icon-background-color, transparent));
 }
 
+@media (prefers-contrast: more) {
+.cnvs-system-icon .wd-icon-fill, .cnvs-system-icon .wd-icon-accent {
+  color: currentColor;
+  fill: currentColor;
+}
+
+
+}
+
 
 .cnvs-system-icon-circle {
   box-sizing: border-box;
@@ -130,3 +139,20 @@
   --cnvs-svg-width: 100%;
 }
 
+
+.cnvs-graphic-image {
+  box-sizing: border-box;
+}
+
+.cnvs-graphic-image [data-part="graphic-img"] {
+  width: var(--cnvs-graphic-image-width);
+  height: var(--cnvs-graphic-image-height);
+  max-width: 100%;
+  max-height: 100%;
+}
+
+
+.cnvs-graphic-image.grow [data-part="graphic-img"] {
+  width: 100%;
+}
+

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-dmlh54 {
+@keyframes animation-bwd456 {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -23,9 +23,10 @@
   height: var(--cnvs-sys-space-x4);
   font-size: var(--cnvs-sys-space-zero);
   border-radius: var(--cnvs-sys-shape-round);
+  outline: 0.125rem solid transparent;
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-dmlh54;
+  animation-name: animation-bwd456;
   animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

package/menu.css

@@ -42,8 +42,9 @@
 
 .cnvs-menu-item:is(.focus, :focus) {
   color: var(--cnvs-brand-primary-accent);
-  outline: none;
   background-color: var(--cnvs-brand-primary-base);
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.125rem;
 }
 
 .cnvs-menu-item:is(:disabled, [aria-disabled=true]) {

package/modal.css

@@ -1,4 +1,4 @@
-@keyframes animation-dmlh56 {
+@keyframes animation-bwd458 {
   0% {
     background: none;
   }
@@ -18,7 +18,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-bg-overlay);
   animation-duration: 0.3s;
-  animation-name: animation-dmlh56;
+  animation-name: animation-bwd458;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {
@@ -55,6 +55,7 @@
   margin: var(--cnvs-sys-space-x10);
   width: calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));
   border-width: var(--cnvs-sys-space-zero);
+  outline: 0.0625rem solid transparent;
   box-shadow: var(--cnvs-sys-depth-6);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "13.0.0-alpha.1052-next.0",
+  "version": "13.0.0-alpha.1064-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": "7dab7ee02b928735125088175e2e13aa1a354bcc"
+  "gitHead": "1a4bdb3f6b6debe5a2f179bab153b38ef7ac804e"
 }

package/popup.css

@@ -1,4 +1,4 @@
-@keyframes animation-dmlhx {
+@keyframes animation-bwd4x {
   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-dmlhx;
+  animation-name: animation-bwd4x;
   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-dmlh5j {
+@keyframes animation-bwd45l {
   from {
     opacity: 0.4;
   }
@@ -49,7 +49,7 @@
 
 .cnvs-skeleton {
   box-sizing: border-box;
-  animation: animation-dmlh5j 0.8s linear infinite alternate;
+  animation: animation-bwd45l 0.8s linear infinite alternate;
   position: relative;
   overflow: hidden;
   height: 100%;

package/tabs.css

@@ -23,7 +23,7 @@
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
 }
 
-.cnvs-tab-item:has([data-part="system-icon"]), .cnvs-tab-item:has([data-part="ellipsis-text"]) {
+.cnvs-tab-item:has(span) {
   display: flex;
   gap: var(--cnvs-sys-space-x2);
 }

package/text-input.css

@@ -34,7 +34,7 @@
 .cnvs-text-input:is(:focus-visible, .focus):where(:not([disabled])) {
   border-color: var(--cnvs-brand-common-focus-outline);
   box-shadow: inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);
-  outline: none;
+  outline: 0.125rem solid transparent;
 }
 
 .cnvs-text-input:is(:disabled, .disabled) {
@@ -70,12 +70,14 @@
 
 .cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
   box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+  outline-offset: 0.125rem;
 }
 
 
 .cnvs-text-input.error-alert {
   border-color: var(--cnvs-brand-alert-darkest);
   box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
+  outline-offset: 0.125rem;
 }
 
 .cnvs-text-input.error-alert:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {

package/tooltip.css

@@ -1,4 +1,4 @@
-@keyframes animation-dmlh2p {
+@keyframes animation-bwd42r {
   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-dmlh2p;
+  animation-name: animation-bwd42r;
   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);
@@ -36,6 +36,8 @@
 .cnvs-tooltip-container:before {
   content: "";
   border-radius: var(--cnvs-sys-shape-x1);
+  outline: 0.0625rem solid transparent;
+  outline-offset: -0.0625rem;
   z-index: -1;
   margin: var(--cnvs-sys-space-x1);
   background-color: var(--cnvs-sys-color-bg-translucent);