@workday/canvas-kit-css 13.0.0-alpha.998-next.0 → 13.0.1

package/action-bar.css

@@ -0,0 +1,32 @@
+.cnvs-action-bar-list {
+  box-sizing: border-box;
+  display: flex;
+  box-shadow: var(--cnvs-sys-depth-1);
+  gap: var(--cnvs-sys-space-x4);
+  background: var(--cnvs-sys-color-bg-default);
+  border-block-start: solid 1px var(--cnvs-sys-color-border-divider);
+  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10);
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+
+@media (max-width: 767.5px) {
+.cnvs-action-bar-list {
+  padding: var(--cnvs-sys-space-x4);
+}
+
+.cnvs-action-bar-list >* {
+  flex: 1;
+}
+
+
+}
+
+
+.cnvs-action-bar-overflow-button {
+  box-sizing: border-box;
+  flex: 0;
+}
+

package/avatar.css

@@ -9,34 +9,42 @@
   border: 0;
   overflow: hidden;
   cursor: default;
+  pointer-events: none;
   border-radius: var(--cnvs-sys-shape-round);
   width: var(--cnvs-avatar-size);
   height: var(--cnvs-avatar-size);
 }
 
-.cnvs-avatar:focus-visible:not([disabled]), .cnvs-avatar.focus:not([disabled]) {
+.cnvs-avatar:focus-visible, .cnvs-avatar.focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
 }
 
 .cnvs-avatar :is(button) {
   cursor: pointer;
+  pointer-events: auto;
 }
 
-.cnvs-avatar>[data-part="avatar-icon"] {
+.cnvs-avatar:disabled, .cnvs-avatar.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+.cnvs-avatar [data-part="avatar-icon"] {
   transition: opacity 150ms linear;
   display: flex;
   align-items: center;
   justify-content: center;
   --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
+  opacity: 1;
 }
 
-.cnvs-avatar>[data-part="avatar-image"] {
+.cnvs-avatar [data-part="avatar-image"] {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 999px;
   transition: opacity 150ms linear;
+  opacity: 0;
 }
 
 
@@ -176,12 +184,3 @@
   opacity: 1;
 }
 
-
-.cnvs-avatar.is-image-loaded-false [data-part="avatar-icon"] {
-  opacity: 1;
-}
-
-.cnvs-avatar.is-image-loaded-false [data-part="avatar-image"] {
-  opacity: 0;
-}
-

package/badge.css

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

@@ -0,0 +1,95 @@
+.cnvs-banner-icon {
+  box-sizing: border-box;
+  margin-inline-end: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-banner-label {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0%;
+}
+
+
+.cnvs-action-bar-text {
+  box-sizing: border-box;
+  text-decoration: underline;
+  display: inline;
+}
+
+
+.cnvs-action-bar-text.is-sticky {
+  display: none;
+}
+
+
+.cnvs-banner {
+  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);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  border: 0;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  border-start-start-radius: var(--cnvs-sys-shape-x1);
+  border-start-end-radius: var(--cnvs-sys-shape-x1);
+  border-end-start-radius: var(--cnvs-sys-shape-x1);
+  border-end-end-radius: var(--cnvs-sys-shape-x1);
+  cursor: pointer;
+  transition: background-color 120ms;
+  outline: var(--cnvs-sys-space-x1) solid transparent;
+}
+
+.cnvs-banner:focus-visible, .cnvs-banner.focus {
+  outline: var(--cnvs-sys-shape-x1) double transparent;
+  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+
+.cnvs-banner.has-errors {
+  background-color: var(--cnvs-brand-error-base);
+  color: var(--cnvs-brand-error-accent);
+}
+
+.cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
+  background: var(--cnvs-brand-error-dark);
+}
+
+.cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
+  --cnvs-system-icon-accent-color: var(--cnvs-brand-error-accent);
+  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
+  --cnvs-system-icon-background-color: none;
+}
+
+
+.cnvs-banner.has-errors-false {
+  background-color: var(--cnvs-brand-alert-base);
+  color: var(--cnvs-sys-color-fg-contrast-default);
+}
+
+.cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
+  background: var(--cnvs-brand-alert-dark);
+}
+
+.cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
+  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-background-color: none;
+}
+
+
+.cnvs-banner.is-sticky {
+  width: 13.875rem;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+
+.cnvs-banner.is-sticky-false {
+  width: 20.5rem;
+}
+

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);
@@ -434,6 +450,27 @@
 }
 
 
+.cnvs-external-hyperlink {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.cnvs-external-hyperlink [data-part="external-hyperlink-icon"] {
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-svg-size: 1em;
+  width: calc(1em - 0.0625rem);
+  min-width: calc(var(--cnvs-sys-space-x4) - 0.0625rem);
+  margin-inline-start: calc(var(--cnvs-sys-space-x1) - 0.125rem);
+}
+
+.cnvs-external-hyperlink [data-part="external-hyperlink-icon"]>svg {
+  min-width: var(--cnvs-sys-space-x4);
+  min-height: var(--cnvs-sys-space-x4);
+}
+
+
 .cnvs-primary-button {
   box-sizing: border-box;
   --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));

package/common.css

@@ -5,7 +5,9 @@
   overflow: hidden;
   white-space: nowrap;
   height: 1px;
+  min-height: 1px;
   width: 1px;
+  min-width: 1px;
   margin: -1px;
   padding: 0;
   border: 0;
@@ -46,12 +48,6 @@
   --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
   --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
   --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100);
-  --cnvs-brand-action-accent: var(--cnvs-base-palette-french-vanilla-100);
-  --cnvs-brand-action-darkest: var(--cnvs-base-palette-blueberry-600);
-  --cnvs-brand-action-dark: var(--cnvs-base-palette-blueberry-500);
-  --cnvs-brand-action-base: var(--cnvs-base-palette-blueberry-400);
-  --cnvs-brand-action-light: var(--cnvs-base-palette-blueberry-200);
-  --cnvs-brand-action-lightest: var(--cnvs-base-palette-blueberry-100);
   --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
 }
 

package/expandable.css

@@ -0,0 +1,93 @@
+.cnvs-expandable-content {
+  box-sizing: border-box;
+  background: var(--cnvs-sys-color-bg-transparent);
+  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-expandable-target {
+  box-sizing: border-box;
+  background: var(--cnvs-sys-color-bg-transparent);
+  border-color: var(--cnvs-sys-color-bg-transparent);
+  border-radius: var(--cnvs-sys-shape-x1);
+  border-width: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: start;
+  padding: var(--cnvs-sys-space-x2);
+  cursor: pointer;
+  width: 100%;
+}
+
+.cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
+  background-color: var(--cnvs-sys-color-bg-alt-default);
+}
+
+
+.cnvs-expandable-icon {
+  box-sizing: border-box;
+  padding: var(--cnvs-sys-space-x1);
+}
+
+
+
+
+
+
+
+.cnvs-expandable-icon.position-end.is-expanded {
+  margin-inline-start: auto;
+  transform: rotate(180deg);
+  padding-inline-end: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-expandable-icon.position-end.is-expanded {
+  margin-inline-start: auto;
+  padding-inline-start: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-expandable-icon.position-start.is-expanded {
+  margin-inline-end: var(--cnvs-sys-space-x2);
+  transform: rotate(90deg);
+}
+
+.cnvs-expandable-icon.position-start.is-expanded :dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+
+.cnvs-expandable-icon.position-start.is-expanded {
+  margin-inline-end: var(--cnvs-sys-space-x2);
+  transform: rotate(180deg);
+}
+
+
+.cnvs-expandable-title {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-body-medium);
+  font-size: var(--cnvs-sys-font-size-body-medium);
+  color: var(--cnvs-sys-color-text-strong);
+  padding: 0.125rem var(--cnvs-sys-space-zero);
+  text-align: left;
+}
+
+
+.cnvs-expandable-avatar {
+  box-sizing: border-box;
+  margin-inline-end: var(--cnvs-sys-space-x2);
+  flex-shrink: 0;
+}
+
+
+.cnvs-expandable-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: var(--cnvs-sys-space-x2);
+}
+

package/form-field.css

@@ -45,7 +45,9 @@
   overflow: hidden;
   white-space: nowrap;
   height: 1px;
+  min-height: 1px;
   width: 1px;
+  min-width: 1px;
   margin: -1px;
   padding: 0;
   border: 0;

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,27 @@
   --cnvs-svg-width: 100%;
 }
 
+
+.cnvs-graphic-image {
+  box-sizing: border-box;
+  width: var(--cnvs-graphic-image-width);
+  height: var(--cnvs-graphic-image-height);
+  display: inline-block;
+}
+
+.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 {
+  width: 100%;
+}
+
+.cnvs-graphic-image.grow [data-part="graphic-img"] {
+  width: 100%;
+}
+

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-ojw650 {
+@keyframes animation-znkd5w {
   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-ojw650;
+  animation-name: animation-znkd5w;
   animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

package/menu.css

@@ -30,11 +30,22 @@
   display: flex;
 }
 
-.cnvs-menu-item:is([aria-selected=true]) {
+.cnvs-menu-item[aria-selected=true] {
   color: var(--cnvs-brand-primary-dark);
   background-color: var(--cnvs-brand-primary-lightest);
 }
 
+.cnvs-menu-item[aria-selected=true] :where([data-part="menu-item-selected"]) {
+  opacity: var(--cnvs-sys-opacity-full);
+}
+
+.cnvs-menu-item[aria-selected=true]:where(.focus, :focus) {
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
+  outline: none;
+  background-color: var(--cnvs-brand-primary-base);
+  color: var(--cnvs-system-icon-color);
+}
+
 .cnvs-menu-item:is(.hover, :hover) {
   color: var(--cnvs-sys-color-fg-strong);
   background-color: var(--cnvs-brand-neutral-lightest);
@@ -42,8 +53,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]) {
@@ -60,7 +72,7 @@
   align-self: center;
 }
 
-.cnvs-menu-item :where([data-part="menu-icon-icon"]) {
+.cnvs-menu-item :where([data-part="menu-item-icon"]) {
   align-self: start;
 }
 
@@ -75,7 +87,7 @@
   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);
-  color: var(--cnvs-base-palette-black-pepper-300);
+  color: var(--cnvs-sys-color-text-default);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -84,6 +96,7 @@
   max-width: calc(100vw - var(--cnvs-sys-space-x8));
   box-shadow: var(--cnvs-sys-depth-3);
   min-width: var(--cnvs-menu-card-min-width);
+  max-height: var(--cnvs-menu-card-max-height);
   transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
 }
 
@@ -94,7 +107,7 @@
 
 .cnvs-menu-list {
   box-sizing: border-box;
-  background: var(--cnvs-base-palette-french-vanilla-100);
+  background: var(--cnvs-sys-color-bg-default);
   border-radius: var(--cnvs-sys-shape-zero);
   padding: var(--cnvs-sys-space-zero);
   gap: var(--cnvs-sys-space-zero);
@@ -111,18 +124,27 @@
 }
 
 
-.cnvs-menu-option {
+.cnvs-menu-divider {
   box-sizing: border-box;
+  display: block;
+  height: 0.0625rem;
+  border: var(--cnvs-sys-space-zero);
+  border-top: 0.0625rem solid var(--cnvs-sys-color-border-divider);
+  margin: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero);
 }
 
-.cnvs-menu-option:where([aria-selected=true]) :where([data-part="menu-item-selected"]) {
-  opacity: var(--cnvs-sys-opacity-full);
-}
 
-.cnvs-menu-option:where([aria-selected=true]):where(.focus, :focus) {
-  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
-  outline: none;
-  background-color: var(--cnvs-brand-primary-base);
-  color: var(--cnvs-system-icon-color);
+.cnvs-menu-group-heading {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  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);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
 }
 

package/modal.css

@@ -1,4 +1,4 @@
-@keyframes animation-ojw652 {
+@keyframes animation-znkd5y {
   0% {
     background: none;
   }
@@ -18,7 +18,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-bg-overlay);
   animation-duration: 0.3s;
-  animation-name: animation-ojw652;
+  animation-name: animation-znkd5y;
 }
 
 .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.998-next.0",
+  "version": "13.0.1",
   "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": "d95041596e2b948c0a371f4c763746a98c58b2da"
+  "gitHead": "bb1ae05330f359a59d9776efe8e99cdc20e99f52"
 }

package/popup.css

@@ -1,4 +1,9 @@
-@keyframes animation-ojw6x {
+.cnvs-disable-body-scroll {
+  overflow: hidden!important;
+}
+
+
+@keyframes animation-znkdy {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -27,7 +32,7 @@
   padding: var(--cnvs-sys-space-x6);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-ojw6x;
+  animation-name: animation-znkdy;
   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/select.css

@@ -1,23 +1,8 @@
 .cnvs-select-input {
   box-sizing: border-box;
-  caret-color: transparent;
-  cursor: default;
 }
 
-.cnvs-select-input::selection {
-  background-color: transparent;
-}
-
-
-.cnvs-select-icons {
-  box-sizing: border-box;
-  position: absolute;
-  pointer-events: none;
-}
-
-
-.cnvs-hidden-select-input {
-  box-sizing: border-box;
+.cnvs-select-input [data-part="select-hidden-input"] {
   position: absolute;
   top: var(--cnvs-sys-space-zero);
   bottom: var(--cnvs-sys-space-zero);
@@ -26,10 +11,27 @@
   opacity: var(--cnvs-sys-opacity-zero);
   cursor: default;
   pointer-events: none;
+  min-width: 100%;
+  width: 100%;
+}
+
+.cnvs-select-input [data-part="select-start-icon"], .cnvs-select-input [data-part="select-end-icon"], .cnvs-select-input [data-part="select-caret-container"], .cnvs-select-input [data-part="select-start-icon-container"] {
+  position: absolute;
+  pointer-events: none;
+}
+
+.cnvs-select-input [data-part="select-visual-input"] {
+  caret-color: transparent;
+  cursor: default;
+}
+
+.cnvs-select-input [data-part="select-visual-input"]::selection {
+  background-color: transparent;
 }
 
 
 .cnvs-select-card {
-  max-height: 18.75rem;
+  box-sizing: border-box;
+  --cnvs-menu-card-max-height: 18.75rem;
 }
 

package/skeleton.css

@@ -0,0 +1,73 @@
+.cnvs-skeleton-shape {
+  box-sizing: border-box;
+  background-color: var(--cnvs-skeleton-shape-background-color, var(--cnvs-sys-color-bg-alt-strong));
+  border-radius: var(--cnvs-skeleton-shape-border-radius, var(--cnvs-sys-space-zero));
+  height: var(--cnvs-skeleton-shape-height, 100%);
+  width: var(--cnvs-skeleton-shape-width);
+  margin-bottom: var(--cnvs-sys-space-x4);
+}
+
+
+.cnvs-skeleton-header {
+  box-sizing: border-box;
+  background-color: var(--cnvs-skeleton-header-background-color, var(--cnvs-sys-color-bg-alt-strong));
+  border-radius: 0;
+  height: var(--cnvs-skeleton-header-height, calc(var(--cnvs-sys-space-x1) * 7));
+  width: var(--cnvs-skeleton-header-width);
+  margin-bottom: var(--cnvs-sys-space-x4);
+}
+
+
+.cnvs-skeleton-text {
+  box-sizing: border-box;
+  margin-bottom: var(--cnvs-sys-space-x6);
+}
+
+.cnvs-skeleton-text [data-part="skeleton-text-lines"] {
+  background-color: var(--cnvs-skeleton-text-background-color, var(--cnvs-sys-color-bg-alt-strong));
+  height: 1.3125rem;
+  margin-block-end: var(--cnvs-sys-space-x3);
+  border-radius: var(--cnvs-sys-shape-half);
+  width: 100%;
+}
+
+.cnvs-skeleton-text [data-part="skeleton-text-lines"]:last-child {
+  width: 60%;
+}
+
+
+@keyframes animation-znkd69 {
+  from {
+    opacity: 0.4;
+  }
+  
+  to {
+    opacity: 1;
+  }
+  
+}
+
+.cnvs-skeleton {
+  box-sizing: border-box;
+  animation: animation-znkd69 0.8s linear infinite alternate;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+.cnvs-skeleton [data-part="skeleton-accessible-hide"] {
+  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;
+}
+

package/switch.css

@@ -87,3 +87,7 @@
   transform: translateX(var(--cnvs-sys-space-x4));
 }
 
+.cnvs-switch-circle.checked :dir(rtl) {
+  transform: translateX(calc(var(--cnvs-sys-space-x4) * -1));
+}
+

package/table.css

@@ -1,53 +1,41 @@
-.cnvs-table-head {
+.cnvs-base-table-head {
   box-sizing: border-box;
-  display: grid;
   background-color: var(--cnvs-sys-color-bg-alt-softer);
   min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));
 }
 
-.cnvs-table-head th:first-of-type {
+.cnvs-base-table-head th:first-of-type {
   border-inline-start: none;
 }
 
-.cnvs-table-head th:last-of-type {
+.cnvs-base-table-head th:last-of-type {
   border-inline-end: none;
 }
 
 
-.cnvs-table-body {
+.cnvs-base-table-body {
   box-sizing: border-box;
-  display: grid;
 }
 
-.cnvs-table-body tr:last-of-type td, .cnvs-table-body tr:last-of-type th {
+.cnvs-base-table-body tr:last-of-type td, .cnvs-base-table-body tr:last-of-type th {
   border-bottom: none;
 }
 
-.cnvs-table-body tr:first-of-type td, .cnvs-table-body tr:first-of-type th {
+.cnvs-base-table-body tr:first-of-type td, .cnvs-base-table-body tr:first-of-type th {
   border-top: none;
 }
 
-.cnvs-table-body td:last-of-type {
+.cnvs-base-table-body td:last-of-type {
   border-inline-end: none;
 }
 
-.cnvs-table-body td:first-of-type {
+.cnvs-base-table-body td:first-of-type {
   border-inline-start: none;
 }
 
 
-.cnvs-table-row {
-  box-sizing: border-box;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: repeat(var(--cnvs-children-cell-number), minmax(10rem, 1fr));
-}
-
-
-.cnvs-table-header {
+.cnvs-base-table-header {
   box-sizing: border-box;
-  display: grid;
-  align-items: center;
   background-color: var(--cnvs-sys-color-bg-default);
   border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
   justify-content: start;
@@ -58,9 +46,8 @@
 }
 
 
-.cnvs-table-cell {
+.cnvs-base-table-cell {
   box-sizing: border-box;
-  display: grid;
   align-items: center;
   background-color: var(--cnvs-sys-color-bg-default);
   border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
@@ -72,31 +59,74 @@
 }
 
 
-.cnvs-table-footer {
+.cnvs-base-table-caption {
   box-sizing: border-box;
-  display: grid;
-}
-
-
-.cnvs-table-caption {
-  box-sizing: border-box;
-  display: flex;
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-container);
   padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
 }
 
 
-.cnvs-table {
+.cnvs-base-table {
   box-sizing: border-box;
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-normal);
   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);
-  display: grid;
   border: 0.0625rem solid var(--cnvs-sys-color-border-container);
   border-radius: var(--cnvs-sys-shape-x2);
   overflow: auto;
   color: var(--cnvs-sys-color-text-default);
 }
 
+
+.cnvs-table-row {
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(var(--cnvs-table-row-children-cell-number), minmax(10rem, 1fr));
+}
+
+
+.cnvs-table {
+  box-sizing: border-box;
+  display: grid;
+}
+
+
+.cnvs-table-body {
+  box-sizing: border-box;
+  display: grid;
+}
+
+
+.cnvs-table-caption {
+  box-sizing: border-box;
+  display: flex;
+  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-container);
+}
+
+
+.cnvs-table-cell {
+  box-sizing: border-box;
+  display: grid;
+}
+
+
+.cnvs-table-footer {
+  box-sizing: border-box;
+  display: grid;
+}
+
+
+.cnvs-table-head {
+  box-sizing: border-box;
+  display: grid;
+}
+
+
+.cnvs-table-header {
+  box-sizing: border-box;
+  display: grid;
+  align-items: center;
+}
+

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(span) {
+  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);
+}
+

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])) {
@@ -130,6 +132,7 @@
   box-sizing: border-box;
   display: flex;
   position: relative;
+  align-items: center;
 }
 
 .cnvs-input-group :has([data-part="input-group-clear-button"]) {

package/tooltip.css

@@ -0,0 +1,79 @@
+@keyframes animation-znkd2s {
+  0% {
+    opacity: 0;
+    transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
+  }
+  
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+  
+}
+
+.cnvs-tooltip-container {
+  box-sizing: border-box;
+  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);
+  display: inline-flex;
+  position: relative;
+  padding: var(--cnvs-sys-space-x3);
+  color: var(--cnvs-sys-color-text-inverse);
+  animation-name: animation-znkd2s;
+  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);
+}
+
+.cnvs-tooltip-container a {
+  color: var(--cnvs-sys-color-text-inverse);
+  text-decoration: underline;
+}
+
+.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);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+body:has(:focus-visible, .focus) .cnvs-tooltip-container {
+  padding: calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));
+}
+
+body:has(:focus-visible, .focus) .cnvs-tooltip-container:before {
+  margin: calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));
+}
+
+[data-popper-reference-hidden] .cnvs-tooltip-container {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-popper-placement="top-start"] .cnvs-tooltip-container, [data-popper-placement="bottom-start"] .cnvs-tooltip-container {
+  left: calc(var(--cnvs-sys-space-x1) * -1);
+}
+
+[data-popper-placement="top-end"] .cnvs-tooltip-container, [data-popper-placement="bottom-end"] .cnvs-tooltip-container {
+  right: calc(var(--cnvs-sys-space-x1) * -1);
+}
+
+[data-popper-placement="left-start"] .cnvs-tooltip-container, [data-popper-placement="right-start"] .cnvs-tooltip-container {
+  top: calc(var(--cnvs-sys-space-x1) * -1);
+}
+
+[data-popper-placement="left-end"] .cnvs-tooltip-container, [data-popper-placement="right-end"] .cnvs-tooltip-container {
+  bottom: calc(var(--cnvs-sys-space-x1) * -1);
+}
+