@workday/canvas-kit-css 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0075-next.0

package/badge.css

@@ -1,4 +1,4 @@
-@keyframes animation-3brz9i {
+@keyframes animation-2n4jp4 {
   from {
     transform: scale(0.85);
   }
@@ -12,7 +12,7 @@
 .cnvs-count-badge {
   box-sizing: border-box;
   align-items: center;
-  animation: animation-3brz9i 0.2s ease;
+  animation: animation-2n4jp4 0.2s ease;
   border-radius: var(--cnvs-sys-shape-round);
   display: inline-flex;
   font-family: var(--cnvs-sys-font-family-default);

package/loading-dots.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "15.0.0-alpha.0064-next.0",
+  "version": "15.0.0-alpha.0075-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": "74d356998c8a3fe27e6a54ef1db7128320b4b2ed"
+  "gitHead": "85c5dfa329d29263f96a49be74ef55f551990c7b"
 }

package/pill.css

@@ -0,0 +1,229 @@
+.cnvs-pill-icon {
+  box-sizing: border-box;
+  margin-inline-start: calc(var(--cnvs-sys-space-x1) * -1);
+  --cnvs-svg-size: 1.25rem;
+  flex: 0 0 auto;
+}
+
+
+.cnvs-pill-icon-button {
+  box-sizing: border-box;
+  margin-inline-end: calc(0.4375rem * -1);
+  margin-inline-start: calc(0.125rem * -1);
+  border-radius: var(--cnvs-sys-shape-half);
+  height: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
+  width: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
+  padding: var(--cnvs-sys-space-zero);
+  overflow: visible;
+  flex: 0 0 auto;
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+  --cnvs-svg-size: var(--cnvs-sys-space-x6);
+}
+
+.cnvs-pill-icon-button ::after {
+  content: "";
+  height: var(--cnvs-sys-space-x8);
+  width: var(--cnvs-sys-space-x8);
+  position: absolute;
+  left: calc(0.4375rem * -1);
+  bottom: calc(0.4375rem * -1);
+  margin: var(--cnvs-sys-space-zero);
+  pointer-events: all;
+}
+
+.cnvs-pill-icon-button:focus-visible, .cnvs-pill-icon-button.focus {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+.cnvs-pill-icon-button:hover, .cnvs-pill-icon-button.hover {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
+}
+
+.cnvs-pill-icon-button:active, .cnvs-pill-icon-button.active {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+}
+
+.cnvs-pill-icon-button:disabled, .cnvs-pill-icon-button.disabled {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+
+.cnvs-pill-count {
+  box-sizing: border-box;
+  border-start-start-radius: var(--cnvs-sys-shape-zero);
+  border-start-end-radius: var(--cnvs-sys-shape-x1);
+  border-end-start-radius: var(--cnvs-sys-shape-zero);
+  border-end-end-radius: var(--cnvs-sys-shape-x1);
+  border-width: 0.0625rem;
+  border-inline-start-width: var(--cnvs-sys-space-zero);
+  border-style: solid;
+  border-color: var(--cnvs-pill-count-border-color, var(--cnvs-sys-color-border-transparent));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.375rem;
+  width: var(--cnvs-sys-space-x6);
+  padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
+  margin-inline-end: calc(var(--cnvs-sys-space-x2) * -1);
+  margin-inline-start: var(--cnvs-sys-space-x1);
+  background-color: var(--cnvs-pill-count-background-color, var(--cnvs-sys-color-bg-alt-stronger));
+  flex: 0 0 auto;
+}
+
+
+.cnvs-pill-avatar {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-small);
+  font-size: var(--cnvs-sys-font-size-subtext-small);
+  letter-spacing: var(--cnvs-base-letter-spacing-50);
+}
+
+.cnvs-pill-avatar:disabled, .cnvs-pill-avatar.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+
+.cnvs-pill-label {
+  box-sizing: border-box;
+  flex-shrink: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+.cnvs-pill {
+  box-sizing: border-box;
+  display: initial;
+  flex-direction: row;
+  align-items: center;
+  border-radius: var(--cnvs-sys-shape-x1);
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  line-height: var(--cnvs-sys-line-height-subtext-small);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  box-shadow: none;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: fit-content;
+  padding: 0.125rem var(--cnvs-sys-space-x2);
+  height: var(--cnvs-sys-space-x6);
+  position: relative;
+  gap: var(--cnvs-sys-space-x1);
+  max-width: var(--cnvs-pill-max-width);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-border-color: transparent;
+}
+
+.cnvs-pill:has(span) {
+  display: flex;
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+}
+
+.cnvs-pill:hover, .cnvs-pill.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
+  --cnvs-pill-count-border-color: transparent;
+}
+
+.cnvs-pill:active, .cnvs-pill.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
+  --cnvs-pill-count-border-color: transparent;
+}
+
+.cnvs-pill:focus-visible, .cnvs-pill.focus {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  border-color: var(--cnvs-sys-color-border-primary-default);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-border-color: var(--cnvs-sys-color-border-primary-default);
+  box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default),0 0 0 0px var(--cnvs-sys-color-border-primary-default);
+}
+
+.cnvs-pill:disabled, .cnvs-pill.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-disabled);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-disabled);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-background-color: var(--cnvs-sys-color-bg-alt-strong);
+  --cnvs-pill-count-border-color: transparent;
+}
+
+
+.cnvs-pill.variant-read-only {
+  border: 0.0625rem solid var(--cnvs-sys-color-border-container);
+  cursor: default;
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:hover, .cnvs-pill.variant-read-only.hover {
+  border-color: var(--cnvs-sys-color-border-container);
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:focus-visible, .cnvs-pill.variant-read-only.focus {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:active, .cnvs-pill.variant-read-only.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:disabled, .cnvs-pill.variant-read-only.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+
+.cnvs-pill.variant-removable {
+  cursor: default;
+  overflow: revert;
+  position: relative;
+}
+
+.cnvs-pill.variant-removable:focus-visible, .cnvs-pill.variant-removable.focus {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  box-shadow: none;
+}
+
+.cnvs-pill.variant-removable:hover, .cnvs-pill.variant-removable.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
+}
+
+.cnvs-pill.variant-removable:active, .cnvs-pill.variant-removable.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+}
+
+.cnvs-pill.variant-removable:disabled, .cnvs-pill.variant-removable.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: currentColor;
+}
+

package/popup.css

@@ -3,7 +3,7 @@
 }
 
 
-@keyframes animation-3ri6jd {
+@keyframes animation-3iww3 {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -31,7 +31,7 @@
   padding: var(--cnvs-sys-space-x6);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-3ri6jd;
+  animation-name: animation-3iww3;
   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-3voyq6 {
+@keyframes animation-1uyxkk {
   from {
     opacity: 0.4;
   }
@@ -49,7 +49,7 @@
 
 .cnvs-skeleton {
   box-sizing: border-box;
-  animation: animation-3voyq6 0.8s linear infinite alternate;
+  animation: animation-1uyxkk 0.8s linear infinite alternate;
   position: relative;
   overflow: hidden;
   height: 100%;

package/tooltip.css

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