@workday/canvas-kit-css 13.0.0-alpha.1021-next.0 → 13.0.0-alpha.1024-next.0

package/badge.css

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

@@ -1,4 +1,4 @@
-@keyframes animation-kpd952 {
+@keyframes animation-br8952 {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -25,7 +25,7 @@
   border-radius: var(--cnvs-sys-shape-round);
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-kpd952;
+  animation-name: animation-br8952;
   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-kpd954 {
+@keyframes animation-br8954 {
   0% {
     background: none;
   }
@@ -18,7 +18,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-bg-overlay);
   animation-duration: 0.3s;
-  animation-name: animation-kpd954;
+  animation-name: animation-br8954;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "13.0.0-alpha.1021-next.0",
+  "version": "13.0.0-alpha.1024-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": "83a8c87bbc32ebeac0451f0558502f33a38bc9ed"
+  "gitHead": "698ba5a6dcaf31c0a081fa13ec319480d4061319"
 }

package/popup.css

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

package/tabs.css

@@ -0,0 +1,122 @@
+.cnvs-tab-item {
+  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);
+  border: none;
+  background-color: transparent;
+  flex: 0 0 auto;
+  min-width: var(--cnvs-sys-space-zero);
+  align-items: center;
+  padding: var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);
+  height: 3.25rem;
+  cursor: pointer;
+  color: var(--cnvs-sys-color-fg-muted-default);
+  position: relative;
+  border-radius: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);
+  transition: background 150ms ease,color 150ms ease;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  --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"]) {
+  display: flex;
+  gap: var(--cnvs-sys-space-x2);
+}
+
+.cnvs-tab-item:hover, .cnvs-tab-item.hover, .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
+  background-color: var(--cnvs-base-palette-soap-200);
+  color: var(--cnvs-base-palette-black-pepper-400);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
+}
+
+.cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
+  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
+  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
+}
+
+.cnvs-tab-item:disabled, .cnvs-tab-item.disabled, .cnvs-tab-item[aria-disabled] {
+  color: var(--cnvs-sys-color-text-disabled);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-tab-item:disabled:hover, .cnvs-tab-item.disabled:hover, .cnvs-tab-item[aria-disabled]:hover {
+  cursor: auto;
+  background-color: var(--cnvs-sys-color-bg-transparent);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-tab-item[aria-selected=true] {
+  color: var(--cnvs-brand-primary-base);
+  cursor: default;
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
+}
+
+.cnvs-tab-item[aria-selected=true]:after {
+  position: absolute;
+  height: var(--cnvs-sys-space-x1);
+  border-radius: var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);
+  background-color: var(--cnvs-brand-primary-base);
+  bottom: var(--cnvs-sys-space-zero);
+  content: '';
+  left: var(--cnvs-sys-space-zero);
+  margin-block-start: calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);
+  width: 100%;
+}
+
+.cnvs-tab-item[aria-selected=true]:hover, .cnvs-tab-item[aria-selected=true].hover, .cnvs-tab-item[aria-selected=true]:focus-visible, .cnvs-tab-item[aria-selected=true].focus {
+  background-color: var(--cnvs-sys-color-bg-transparent);
+  color: var(--cnvs-brand-primary-base);
+}
+
+
+.cnvs-tabs-list {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
+  gap: var(--cnvs-sys-space-x3);
+  padding-inline: var(--cnvs-sys-space-x6);
+  mask-image: none;
+}
+
+
+.cnvs-tabs-list.modality-touch {
+  padding-inline: var(--cnvs-sys-space-zero);
+}
+
+
+
+
+
+
+
+
+
+
+.cnvs-tabs-list.modality-touch.is-dragging.direction-left {
+  mask-image: linear-gradient(to left, white 80%, transparent);
+}
+
+
+.cnvs-tabs-list.modality-touch.is-dragging.direction-right {
+  mask-image: linear-gradient(to right, white 80%, transparent);
+}
+
+
+.cnvs-tabs-overflow-button {
+  box-sizing: border-box;
+}
+
+.cnvs-tabs-overflow-button:has([data-part="tabs-overflow-button-icon"]) {
+  display: flex;
+  gap: var(--cnvs-sys-space-zero);
+}
+