@workday/canvas-kit-css 14.0.0-alpha.1133-next.0 → 14.0.0-alpha.1140-next.0

package/badge.css

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

@@ -109,7 +109,7 @@
 
 .cnvs-system-icon-circle {
   box-sizing: border-box;
-  background: var(--cnvs-system-icon-circle-background-color, var(--cnvs-base-palette-soap-200));
+  background: var(--cnvs-system-icon-circle-background, var(--cnvs-base-palette-soap-200));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -120,7 +120,7 @@
   width: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
   height: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
   --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10)) * 0.625);
-  --cnvs-system-icon-color: var(--cnvs-system-icon-circle-icon-color);
+  --cnvs-system-icon-color: var(--cnvs-system-icon-circle-color);
 }
 
 .cnvs-system-icon-circle img {

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-vkpl66 {
+@keyframes animation-jknd66 {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -26,7 +26,7 @@
   outline: 0.125rem solid transparent;
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-vkpl66;
+  animation-name: animation-jknd66;
   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-vkpl68 {
+@keyframes animation-jknd68 {
   0% {
     background: none;
   }
@@ -18,7 +18,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-bg-overlay);
   animation-duration: 0.3s;
-  animation-name: animation-vkpl68;
+  animation-name: animation-jknd68;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "14.0.0-alpha.1133-next.0",
+  "version": "14.0.0-alpha.1140-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": "eb3759bc235f1a76edeae94e6e09d4395bcb90a4"
+  "gitHead": "2a00c1cb2d5d9535216908ec4a12db43e6a81d73"
 }

package/pagination.css

@@ -0,0 +1,143 @@
+.cnvs-pagination-controls {
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--cnvs-sys-space-x1);
+  align-items: center;
+}
+
+
+.cnvs-pagination-list {
+  box-sizing: border-box;
+  display: flex;
+  margin-block: var(--cnvs-sys-space-zero);
+  margin-inline: var(--cnvs-sys-space-zero);
+  padding: var(--cnvs-sys-space-zero);
+  list-style: none;
+}
+
+
+.cnvs-pagination-list-item {
+  box-sizing: border-box;
+  display: flex;
+}
+
+
+.cnvs-pagination-page-list {
+  box-sizing: border-box;
+  display: flex;
+  margin: var(--cnvs-sys-space-zero);
+  padding-inline-start: var(--cnvs-sys-space-zero);
+  padding-inline-end: var(--cnvs-sys-space-zero);
+  gap: var(--cnvs-sys-space-x1);
+}
+
+
+.cnvs-pagination-page-button {
+  box-sizing: border-box;
+  min-width: var(--cnvs-sys-space-x8);
+  padding: var(--cnvs-sys-space-zero);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-default);
+}
+
+.cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+}
+
+.cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active, .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+}
+
+.cnvs-pagination-page-button:disabled, .cnvs-pagination-page-button.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
+}
+
+
+.cnvs-pagination-page-button.toggled {
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  --cnvs-button-background: var(--cnvs-brand-primary-base);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
+}
+
+.cnvs-pagination-page-button.toggled:hover, .cnvs-pagination-page-button.toggled.hover, .cnvs-pagination-page-button.toggled:active, .cnvs-pagination-page-button.toggled.active, .cnvs-pagination-page-button.toggled:focus-visible, .cnvs-pagination-page-button.toggled.focus {
+  --cnvs-button-background: var(--cnvs-brand-primary-base);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
+}
+
+.cnvs-pagination-page-button.toggled:disabled, .cnvs-pagination-page-button.toggled.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
+}
+
+
+.cnvs-pagination-additional-details {
+  box-sizing: border-box;
+  display: flex;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-medium);
+  font-size: var(--cnvs-sys-font-size-subtext-medium);
+  letter-spacing: var(--cnvs-base-letter-spacing-100);
+  color: var(--cnvs-sys-color-text-hint);
+  margin-block-start: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-pagination-additional-details.should-hide-details {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1px;
+  min-height: 1px;
+  width: 1px;
+  min-width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  margin-block-start: var(--cnvs-sys-space-zero);
+}
+
+
+.cnvs-pagination-go-to-form {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--cnvs-sys-space-x2);
+}
+
+.cnvs-pagination-go-to-form :dir(rtl) {
+  padding-inline-start: var(--cnvs-sys-space-x2);
+  padding-inline-end: var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-pagination-go-to-text-input {
+  box-sizing: border-box;
+  min-width: 3.4375rem;
+  width: 3.4375rem;
+}
+
+
+.cnvs-pagination-go-to-label {
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+
+.cnvs-pagination {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.cnvs-pagination-nav {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+

package/popup.css

@@ -3,7 +3,7 @@
 }
 
 
-@keyframes animation-vkply {
+@keyframes animation-jkndy {
   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-vkply;
+  animation-name: animation-jkndy;
   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-vkpl6n {
+@keyframes animation-jknd6z {
   from {
     opacity: 0.4;
   }
@@ -49,7 +49,7 @@
 
 .cnvs-skeleton {
   box-sizing: border-box;
-  animation: animation-vkpl6n 0.8s linear infinite alternate;
+  animation: animation-jknd6z 0.8s linear infinite alternate;
   position: relative;
   overflow: hidden;
   height: 100%;

package/tooltip.css

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