@workday/canvas-kit-css 14.0.0-alpha.1125-next.0 → 14.0.0-alpha.1127-next.0

package/badge.css

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

@@ -402,6 +402,102 @@
 }
 
 
+.cnvs-toolbar-icon-button {
+  box-sizing: border-box;
+  min-width: var(--cnvs-sys-space-x8);
+  padding: var(--cnvs-sys-space-zero);
+  height: var(--cnvs-sys-space-x8);
+  --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+}
+
+.cnvs-toolbar-icon-button:focus-visible, .cnvs-toolbar-icon-button.focus {
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
+}
+
+.cnvs-toolbar-icon-button:hover, .cnvs-toolbar-icon-button.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
+}
+
+.cnvs-toolbar-icon-button:active, .cnvs-toolbar-icon-button.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+}
+
+.cnvs-toolbar-icon-button:disabled, .cnvs-toolbar-icon-button.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-toolbar-icon-button[aria-pressed='true'] {
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
+  --cnvs-button-background: var(--cnvs-brand-primary-lightest);
+}
+
+.cnvs-toolbar-icon-button[aria-pressed='true']:hover, .cnvs-toolbar-icon-button[aria-pressed='true'].hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
+}
+
+.cnvs-toolbar-icon-button[aria-pressed='true']:active, .cnvs-toolbar-icon-button[aria-pressed='true'].active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
+}
+
+.cnvs-toolbar-icon-button[aria-pressed='true']:disabled, .cnvs-toolbar-icon-button[aria-pressed='true'].disabled {
+  --cnvs-button-background: var(--cnvs-brand-primary-lightest);
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-light);
+}
+
+
+.cnvs-toolbar-dropdown-button {
+  box-sizing: border-box;
+  padding: var(--cnvs-sys-space-zero);
+  min-width: var(--cnvs-sys-space-x8);
+  gap: var(--cnvs-sys-space-zero);
+  --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+}
+
+.cnvs-toolbar-dropdown-button:focus-visible, .cnvs-toolbar-dropdown-button.focus {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
+}
+
+.cnvs-toolbar-dropdown-button:hover, .cnvs-toolbar-dropdown-button.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
+}
+
+.cnvs-toolbar-dropdown-button:active, .cnvs-toolbar-dropdown-button.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
+}
+
+.cnvs-toolbar-dropdown-button:disabled, .cnvs-toolbar-dropdown-button.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-toolbar-dropdown-button [data-part="toolbar-dropdown-btn-custom-icon"] {
+  margin-inline-start: var(--cnvs-sys-space-x1);
+  margin-inline-end: calc(0.125rem * -1);
+}
+
+.cnvs-toolbar-dropdown-button [data-part="toolbar-dropdown-btn-arrow"] {
+  margin: 0;
+  margin-inline-end: 0.125rem;
+}
+
+
+.cnvs-toolbar-dropdown-button.should-mirror-icon [data-part="toolbar-dropdown-btn-custom-icon"] {
+  margin-inline-end: 0;
+  margin-inline-start: 0.125rem;
+}
+
+
 .cnvs-hyperlink {
   box-sizing: border-box;
   font-family: var(--cnvs-sys-font-family-default);

package/loading-dots.css

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

package/modal.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "14.0.0-alpha.1125-next.0",
+  "version": "14.0.0-alpha.1127-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": "ee47fa92ba08cdc812effdaebe0c83417f8d78de"
+  "gitHead": "3067be6c028bb5eee066f8dc3ef82a5788b3fa98"
 }

package/popup.css

@@ -3,7 +3,7 @@
 }
 
 
-@keyframes animation-vzkcy {
+@keyframes animation-ylkmy {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -32,7 +32,7 @@
   padding: var(--cnvs-sys-space-x6);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-vzkcy;
+  animation-name: animation-ylkmy;
   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/segmented-control.css

@@ -0,0 +1,75 @@
+.cnvs-segmented-control-button {
+  box-sizing: border-box;
+  border-inline-start: none;
+  min-width: auto;
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
+  --cnvs-button-border: var(--cnvs-sys-color-border-container);
+  --cnvs-button-border-radius: var(--cnvs-sys-shape-zero);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+}
+
+.cnvs-segmented-control-button:hover, .cnvs-segmented-control-button.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
+}
+
+.cnvs-segmented-control-button:active, .cnvs-segmented-control-button.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+}
+
+.cnvs-segmented-control-button:disabled, .cnvs-segmented-control-button.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
+  --cnvs-button-border: var(--cnvs-sys-color-border-container);
+  --cnvs-system-icon-color: var(--cnvs-base-palette-soap-600);
+}
+
+.cnvs-segmented-control-button:first-of-type {
+  border-radius: var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);
+  border-inline-start: 0.0625rem solid var(--cnvs-sys-color-border-container);
+}
+
+.cnvs-segmented-control-button:last-of-type {
+  border-radius: 0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;
+}
+
+.cnvs-segmented-control-button[aria-pressed="true"] {
+  --cnvs-button-background: var(--cnvs-brand-primary-base);
+  --cnvs-button-border: var(--cnvs-brand-primary-base);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
+}
+
+.cnvs-segmented-control-button[aria-pressed="true"]:first-of-type {
+  border-inline-start-color: var(--cnvs-brand-primary-base);
+}
+
+.cnvs-segmented-control-button[aria-pressed="true"]:disabled, .cnvs-segmented-control-button[aria-pressed="true"].disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
+  --cnvs-button-border: var(--cnvs-sys-color-border-container);
+  --cnvs-system-icon-color: var(--cnvs-base-palette-soap-600);
+}
+
+.cnvs-segmented-control-button:focus-visible, .cnvs-segmented-control-button.focus {
+  border-radius: var(--cnvs-sys-shape-x1);
+  z-index: 1;
+  animation: none;
+  transition: all 120ms border-radius 1ms;
+}
+
+
+.cnvs-segmented-control-button.segmented-control-button-size-small {
+  width: var(--cnvs-sys-space-x8);
+  height: var(--cnvs-sys-space-x8);
+}
+
+
+.cnvs-segmented-control-button.segmented-control-button-size-medium {
+  width: var(--cnvs-sys-space-x10);
+  height: var(--cnvs-sys-space-x10);
+}
+
+
+.cnvs-segmented-control-button.segmented-control-button-size-large {
+  width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
+  height: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
+}
+

package/skeleton.css

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

package/tooltip.css

@@ -1,4 +1,4 @@
-@keyframes animation-vzkc2s {
+@keyframes animation-ylkm2v {
   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-vzkc2s;
+  animation-name: animation-ylkm2v;
   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);