@workday/canvas-kit-css 11.0.0-alpha.801-next.0 → 11.0.0-alpha.804-next.0

package/badge.css

@@ -29,7 +29,7 @@
 }
 
 
-.cnvs-count-badge--variant-inverse {
+.cnvs-count-badge.variant-inverse {
   background: var(--cnvs-sys-color-bg-default);
   box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0, 0.25);
   color: var(--cnvs-sys-color-text-primary-default);

package/button.css

@@ -68,7 +68,7 @@
 }
 
 
-.cnvs-button--size-large {
+.cnvs-button.size-large {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-sys-font-weight-bold);
   line-height: var(--cnvs-base-line-height-150);
@@ -80,7 +80,7 @@
 }
 
 
-.cnvs-button--size-medium {
+.cnvs-button.size-medium {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-sys-font-weight-bold);
   line-height: var(--cnvs-base-line-height-100);
@@ -92,7 +92,7 @@
 }
 
 
-.cnvs-button--size-small {
+.cnvs-button.size-small {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-sys-font-weight-bold);
   line-height: var(--cnvs-base-line-height-100);
@@ -105,7 +105,7 @@
 }
 
 
-.cnvs-button--size-extra-small {
+.cnvs-button.size-extra-small {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-sys-font-weight-bold);
   line-height: var(--cnvs-base-line-height-50);
@@ -118,76 +118,76 @@
 }
 
 
-.cnvs-button--icon-position-only {
+.cnvs-button.icon-position-only {
   padding: var(--cnvs-sys-space-zero);
 }
 
 
 
 
-.cnvs-button--size-large.cnvs-button--icon-position-only {
+.cnvs-button.size-large.icon-position-only {
   min-width: calc(var(--cnvs-sys-space-x4) * 3);
 }
 
 
-.cnvs-button--size-large.cnvs-button--icon-position-start {
+.cnvs-button.size-large.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x6);
   padding-inline-end: var(--cnvs-sys-space-x8);
 }
 
 
-.cnvs-button--size-large.cnvs-button--icon-position-end {
+.cnvs-button.size-large.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x8);
   padding-inline-end: var(--cnvs-sys-space-x6);
 }
 
 
-.cnvs-button--size-medium.cnvs-button--icon-position-only {
+.cnvs-button.size-medium.icon-position-only {
   min-width: var(--cnvs-sys-space-x10);
 }
 
 
-.cnvs-button--size-medium.cnvs-button--icon-position-start {
+.cnvs-button.size-medium.icon-position-start {
   padding-inline-start: calc(var(--cnvs-sys-space-x1) * 5);
   padding-inline-end: var(--cnvs-sys-space-x6);
 }
 
 
-.cnvs-button--size-medium.cnvs-button--icon-position-end {
+.cnvs-button.size-medium.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x6);
   padding-inline-end: calc(var(--cnvs-sys-space-x1) * 5);
 }
 
 
-.cnvs-button--size-small.cnvs-button--icon-position-only {
+.cnvs-button.size-small.icon-position-only {
   min-width: var(--cnvs-sys-space-x8);
 }
 
 
-.cnvs-button--size-small.cnvs-button--icon-position-start {
+.cnvs-button.size-small.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x3);
   padding-inline-end: var(--cnvs-sys-space-x4);
 }
 
 
-.cnvs-button--size-small.cnvs-button--icon-position-end {
+.cnvs-button.size-small.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x4);
   padding-inline-end: var(--cnvs-sys-space-x3);
 }
 
 
-.cnvs-button--size-extraSmall.cnvs-button--icon-position-only {
+.cnvs-button.size-extraSmall.icon-position-only {
   min-width: var(--cnvs-sys-space-x6);
 }
 
 
-.cnvs-button--size-extraSmall.cnvs-button--icon-position-start {
+.cnvs-button.size-extraSmall.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x2);
   padding-inline-end: var(--cnvs-sys-space-x3);
 }
 
 
-.cnvs-button--size-extraSmall.cnvs-button--icon-position-end {
+.cnvs-button.size-extraSmall.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x3);
   padding-inline-end: var(--cnvs-sys-space-x2);
 }
@@ -234,147 +234,147 @@
 }
 
 
-.cnvs-tertiary-button--icon-position-only {
+.cnvs-tertiary-button.icon-position-only {
   padding: 0;
   border-radius: var(--cnvs-sys-shape-round);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-tertiary-button--icon-position-only:focus-visible, .cnvs-tertiary-button--icon-position-only.focus {
+.cnvs-tertiary-button.icon-position-only:focus-visible, .cnvs-tertiary-button.icon-position-only.focus {
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-tertiary-button--icon-position-only:hover, .cnvs-tertiary-button--icon-position-only.hover {
+.cnvs-tertiary-button.icon-position-only:hover, .cnvs-tertiary-button.icon-position-only.hover {
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-tertiary-button--icon-position-only:active, .cnvs-tertiary-button--icon-position-only.active {
+.cnvs-tertiary-button.icon-position-only:active, .cnvs-tertiary-button.icon-position-only.active {
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
 }
 
-.cnvs-tertiary-button--icon-position-only:disabled, .cnvs-tertiary-button--icon-position-only.disabled {
+.cnvs-tertiary-button.icon-position-only:disabled, .cnvs-tertiary-button.icon-position-only.disabled {
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
 
 
 
-.cnvs-tertiary-button--is-themeable {
+.cnvs-tertiary-button.is-themeable {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
 }
 
-.cnvs-tertiary-button--is-themeable:focus-visible, .cnvs-tertiary-button--is-themeable.focus {
+.cnvs-tertiary-button.is-themeable:focus-visible, .cnvs-tertiary-button.is-themeable.focus {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
 }
 
-.cnvs-tertiary-button--is-themeable:hover, .cnvs-tertiary-button--is-themeable.hover {
+.cnvs-tertiary-button.is-themeable:hover, .cnvs-tertiary-button.is-themeable.hover {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
 }
 
-.cnvs-tertiary-button--is-themeable:active, .cnvs-tertiary-button--is-themeable.active {
+.cnvs-tertiary-button.is-themeable:active, .cnvs-tertiary-button.is-themeable.active {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-darkest);
 }
 
-.cnvs-tertiary-button--is-themeable:disabled, .cnvs-tertiary-button--is-themeable.disabled {
+.cnvs-tertiary-button.is-themeable:disabled, .cnvs-tertiary-button.is-themeable.disabled {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
 }
 
 
-.cnvs-tertiary-button--variant-inverse {
+.cnvs-tertiary-button.variant-inverse {
   --cnvs-button-background: transparent;
   --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
 }
 
-.cnvs-tertiary-button--variant-inverse:focus-visible, .cnvs-tertiary-button--variant-inverse.focus {
+.cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
   --cnvs-button-background: var(--cnvs-sys-color-bg-default);
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
   box-shadow: inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
 }
 
-.cnvs-tertiary-button--variant-inverse:hover, .cnvs-tertiary-button--variant-inverse.hover {
+.cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
   --cnvs-button-background: var(--cnvs-sys-color-bg-default);
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-tertiary-button--variant-inverse:active, .cnvs-tertiary-button--variant-inverse.active {
+.cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
   --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-tertiary-button--variant-inverse:disabled, .cnvs-tertiary-button--variant-inverse.disabled {
+.cnvs-tertiary-button.variant-inverse:disabled, .cnvs-tertiary-button.variant-inverse.disabled {
   --cnvs-button-background: transparent;
   --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-large.cnvs-button--icon-position-only {
+.cnvs-tertiary-button.size-large.icon-position-only {
   min-width: calc(var(--cnvs-sys-space-x4) * 3);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-large.cnvs-button--icon-position-start {
+.cnvs-tertiary-button.size-large.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x2);
   padding-inline-end: var(--cnvs-sys-space-x3);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-large.cnvs-button--icon-position-end {
+.cnvs-tertiary-button.size-large.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x3);
   padding-inline-end: var(--cnvs-sys-space-x2);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-medium.cnvs-button--icon-position-only {
+.cnvs-tertiary-button.size-medium.icon-position-only {
   min-width: var(--cnvs-sys-space-x10);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-medium.cnvs-button--icon-position-start {
+.cnvs-tertiary-button.size-medium.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x2);
   padding-inline-end: var(--cnvs-sys-space-x3);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-medium.cnvs-button--icon-position-end {
+.cnvs-tertiary-button.size-medium.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x3);
   padding-inline-end: var(--cnvs-sys-space-x2);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-small.cnvs-button--icon-position-only {
+.cnvs-tertiary-button.size-small.icon-position-only {
   min-width: var(--cnvs-sys-space-x8);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-small.cnvs-button--icon-position-start {
+.cnvs-tertiary-button.size-small.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x2);
   padding-inline-end: var(--cnvs-sys-space-x3);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-small.cnvs-button--icon-position-end {
+.cnvs-tertiary-button.size-small.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x3);
   padding-inline-end: var(--cnvs-sys-space-x2);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-extra-small.cnvs-button--icon-position-only {
+.cnvs-tertiary-button.size-extraSmall.icon-position-only {
   min-width: var(--cnvs-sys-space-x6);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-extra-small.cnvs-button--icon-position-start {
+.cnvs-tertiary-button.size-extraSmall.icon-position-start {
   padding-inline-start: var(--cnvs-sys-space-x1);
   padding-inline-end: var(--cnvs-sys-space-x2);
 }
 
 
-.cnvs-tertiary-button.cnvs-button--size-extra-small.cnvs-button--icon-position-end {
+.cnvs-tertiary-button.size-extraSmall.icon-position-end {
   padding-inline-start: var(--cnvs-sys-space-x2);
   padding-inline-end: var(--cnvs-sys-space-x1);
 }
@@ -416,14 +416,14 @@
 }
 
 
-.cnvs-primary-button--variant-inverse {
+.cnvs-primary-button.variant-inverse {
   --cnvs-button-background: var(--cnvs-sys-color-bg-default);
   --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-primary-button--variant-inverse:focus-visible, .cnvs-primary-button--variant-inverse.focus {
+.cnvs-primary-button.variant-inverse:focus-visible, .cnvs-primary-button.variant-inverse.focus {
   --cnvs-button-background: var(--cnvs-sys-color-bg-default);
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
   --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
@@ -431,19 +431,19 @@
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-primary-button--variant-inverse:hover, .cnvs-primary-button--variant-inverse.hover {
+.cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
   --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
   --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
 }
 
-.cnvs-primary-button--variant-inverse:active, .cnvs-primary-button--variant-inverse.active {
+.cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
   --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
   --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
 }
 
-.cnvs-primary-button--variant-inverse:disabled, .cnvs-primary-button--variant-inverse.disabled {
+.cnvs-primary-button.variant-inverse:disabled, .cnvs-primary-button.variant-inverse.disabled {
   --cnvs-button-background: var(--cnvs-sys-color-bg-default);
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
@@ -491,14 +491,14 @@
 }
 
 
-.cnvs-secondary-button--variant-inverse {
+.cnvs-secondary-button.variant-inverse {
   --cnvs-button-background: transparent;
   --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
   --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
 }
 
-.cnvs-secondary-button--variant-inverse:focus-visible, .cnvs-secondary-button--variant-inverse.focus {
+.cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
   --cnvs-button-background: var(--cnvs-sys-color-bg-default);
   --cnvs-button-border: transparent;
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
@@ -507,21 +507,21 @@
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-secondary-button--variant-inverse:hover, .cnvs-secondary-button--variant-inverse.hover {
+.cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
   --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
   --cnvs-button-border: transparent;
   --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
 }
 
-.cnvs-secondary-button--variant-inverse:active, .cnvs-secondary-button--variant-inverse.active {
+.cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
   --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
   --cnvs-button-border: transparent;
   --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
 }
 
-.cnvs-secondary-button--variant-inverse:disabled, .cnvs-secondary-button--variant-inverse.disabled {
+.cnvs-secondary-button.variant-inverse:disabled, .cnvs-secondary-button.variant-inverse.disabled {
   --cnvs-button-background: transparent;
   --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
   --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);

package/checkbox.css

@@ -48,13 +48,13 @@
 }
 
 
-.cnvs-checkbox-background--error-error {
+.cnvs-checkbox-background.error-error {
   --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-error-base);
   --cnvs-checkbox-background-error-ring-color-outer: transparent;
 }
 
 
-.cnvs-checkbox-background--error-alert {
+.cnvs-checkbox-background.error-alert {
   --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-alert-base);
   --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-brand-alert-darkest);
 }
@@ -77,24 +77,24 @@
 }
 
 
-.cnvs-checkbox-check--checked {
+.cnvs-checkbox-check.checked {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
   opacity: var(--cnvs-sys-opacity-full);
   transform: scale(1);
 }
 
 
-.cnvs-checkbox-check--indeterminate {
+.cnvs-checkbox-check.indeterminate {
   opacity: var(--cnvs-sys-opacity-full);
   transform: scale(1);
 }
 
 
-.cnvs-checkbox-check--variant-inverse {
+.cnvs-checkbox-check.variant-inverse {
   --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
 }
 
-.cnvs-checkbox-check--variant-inverse>div {
+.cnvs-checkbox-check.variant-inverse>div {
   background-color: var(--cnvs-brand-primary-base);
 }
 
@@ -168,73 +168,73 @@
 }
 
 
-.cnvs-checkbox-input--variant-inverse~span:first-of-type {
+.cnvs-checkbox-input.variant-inverse~span:first-of-type {
   opacity: var(--cnvs-sys-opacity-disabled);
 }
 
-.cnvs-checkbox-input--variant-inverse~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-input-inverse);
   background-color: var(--cnvs-sys-color-bg-default);
 }
 
-.cnvs-checkbox-input--variant-inverse:disabled~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse:disabled~div:first-of-type {
   background-color: var(--cnvs-sys-color-bg-alt-default);
   opacity: var(--cnvs-sys-opacity-disabled);
 }
 
-.cnvs-checkbox-input--variant-inverse:disabled:where(:checked, :indeterminate)~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse:disabled:where(:checked, :indeterminate)~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-input-inverse);
   background-color: var(--cnvs-sys-color-bg-default);
 }
 
-.cnvs-checkbox-input--variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-contrast-default);
   box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input--variant-inverse:checked.focus~div:first-of-type, .cnvs-checkbox-input--variant-inverse:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input--variant-inverse:indeterminate.focus~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input.variant-inverse:checked.focus~div:first-of-type, .cnvs-checkbox-input.variant-inverse:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input.variant-inverse:indeterminate.focus~div:first-of-type {
   box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
   border-color: var(--cnvs-sys-color-border-inverse);
 }
 
 
-.cnvs-checkbox-input--disabled:where(:hover, .hover)~span:first-of-type {
+.cnvs-checkbox-input.disabled:where(:hover, .hover)~span:first-of-type {
   box-shadow: none;
 }
 
 
-.cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
+.cnvs-checkbox-input.error:not(:where(:focus-visible, .focus))~div:first-of-type {
   border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
   box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.125rem var(--cnvs-checkbox-background-error-ring-color-outer);
 }
 
-.cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
+.cnvs-checkbox-input.error:where(:checked, :indeterminate)~div:first-of-type {
   border-color: transparent;
   box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.3125rem var(--cnvs-checkbox-background-error-ring-color-outer);
 }
 
-.cnvs-checkbox-input--error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
+.cnvs-checkbox-input.error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
   border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
 }
 
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse.error:not(:where(:focus-visible, .focus))~div:first-of-type {
   border: 0.0625rem solid var(--cnvs-sys-color-border-input-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse.error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
+.cnvs-checkbox-input.variant-inverse.error:where(:checked, :indeterminate)~div:first-of-type {
   border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 

package/collection.css

@@ -3,12 +3,12 @@
 }
 
 
-.cnvs-list-box-container--orientation-vertical {
+.cnvs-list-box-container.orientation-vertical {
   overflow-y: auto;
 }
 
 
-.cnvs-list-box-container--orientation-horizontal {
+.cnvs-list-box-container.orientation-horizontal {
   overflow-y: undefined;
 }
 

package/icon.css

@@ -10,7 +10,7 @@
 }
 
 
-.cnvs-svg--should-mirror {
+.cnvs-svg.should-mirror {
   transform: scaleX(-1);
 }
 
@@ -29,7 +29,7 @@
 }
 
 
-.cnvs-accent-icon--transparent .french-vanilla-100 {
+.cnvs-accent-icon.transparent .french-vanilla-100 {
   fill: transparent;
 }
 
@@ -126,11 +126,11 @@
 }
 
 
-.cnvs-graphic--grow {
+.cnvs-graphic.grow {
   width: 100%;
 }
 
-.cnvs-graphic--grow svg {
+.cnvs-graphic.grow svg {
   width: 100%;
   height: 100%;
 }

package/menu.css

@@ -34,12 +34,12 @@
 }
 
 
-.cnvs-menu-list--orientation-vertical {
+.cnvs-menu-list.orientation-vertical {
   flex-direction: column;
 }
 
 
-.cnvs-menu-list--orientation-horizontal {
+.cnvs-menu-list.orientation-horizontal {
   flex-direction: row;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.0.0-alpha.801-next.0",
+  "version": "11.0.0-alpha.804-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": "d119d69c2a738f59343b3bbfe0c58b67be2ced24"
+  "gitHead": "7533a39ddf564279965947149a424f67d1070b03"
 }

package/switch.css

@@ -44,12 +44,12 @@
 }
 
 
-.cnvs-switch-input--error-error~div:first-of-type {
+.cnvs-switch-input.error-error~div:first-of-type {
   box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),0 0 0 0.3125rem transparent;
 }
 
 
-.cnvs-switch-input--error-alert~div:first-of-type {
+.cnvs-switch-input.error-alert~div:first-of-type {
   box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);
 }
 
@@ -83,7 +83,7 @@
 }
 
 
-.cnvs-switch-circle--checked {
+.cnvs-switch-circle.checked {
   transform: translateX(var(--cnvs-sys-space-x4));
 }
 

package/text.css

@@ -3,7 +3,7 @@
 }
 
 
-.cnvs-text--type-level-title-large {
+.cnvs-text.type-level-title-large {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-700);
   line-height: var(--cnvs-base-line-height-600);
@@ -12,7 +12,7 @@
 }
 
 
-.cnvs-text--type-level-title-medium {
+.cnvs-text.type-level-title-medium {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-700);
   line-height: var(--cnvs-base-line-height-500);
@@ -21,7 +21,7 @@
 }
 
 
-.cnvs-text--type-level-title-small {
+.cnvs-text.type-level-title-small {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-700);
   line-height: var(--cnvs-base-line-height-400);
@@ -30,7 +30,7 @@
 }
 
 
-.cnvs-text--type-level-heading-large {
+.cnvs-text.type-level-heading-large {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-700);
   line-height: var(--cnvs-base-line-height-350);
@@ -39,7 +39,7 @@
 }
 
 
-.cnvs-text--type-level-heading-medium {
+.cnvs-text.type-level-heading-medium {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-700);
   line-height: var(--cnvs-base-line-height-300);
@@ -48,7 +48,7 @@
 }
 
 
-.cnvs-text--type-level-heading-small {
+.cnvs-text.type-level-heading-small {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-700);
   line-height: var(--cnvs-base-line-height-250);
@@ -57,7 +57,7 @@
 }
 
 
-.cnvs-text--type-level-body-large {
+.cnvs-text.type-level-body-large {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-200);
@@ -66,7 +66,7 @@
 }
 
 
-.cnvs-text--type-level-body-medium {
+.cnvs-text.type-level-body-medium {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-200);
@@ -75,7 +75,7 @@
 }
 
 
-.cnvs-text--type-level-body-small {
+.cnvs-text.type-level-body-small {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-150);
@@ -85,7 +85,7 @@
 }
 
 
-.cnvs-text--type-level-subtext-large {
+.cnvs-text.type-level-subtext-large {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-100);
@@ -95,7 +95,7 @@
 }
 
 
-.cnvs-text--type-level-subtext-medium {
+.cnvs-text.type-level-subtext-medium {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-50);
@@ -105,7 +105,7 @@
 }
 
 
-.cnvs-text--type-level-subtext-small {
+.cnvs-text.type-level-subtext-small {
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-50);
@@ -115,17 +115,17 @@
 }
 
 
-.cnvs-text--variant-error {
+.cnvs-text.variant-error {
   color: var(--cnvs-sys-color-text-critical-default);
 }
 
 
-.cnvs-text--variant-hint {
+.cnvs-text.variant-hint {
   color: var(--cnvs-sys-color-text-hint);
 }
 
 
-.cnvs-text--variant-inverse {
+.cnvs-text.variant-inverse {
   color: var(--cnvs-sys-color-text-inverse);
 }
 
@@ -141,28 +141,28 @@
 }
 
 
-.cnvs-label-text--disabled {
+.cnvs-label-text.disabled {
   cursor: default;
   color: var(--cnvs-sys-color-text-disabled);
 }
 
 
-.cnvs-label-text--variant-inverse {
+.cnvs-label-text.variant-inverse {
   color: var(--cnvs-sys-color-text-inverse);
 }
 
 
-.cnvs-label-text--variant-error {
+.cnvs-label-text.variant-error {
   color: var(--cnvs-sys-color-text-critical-default);
 }
 
 
-.cnvs-label-text--variant-hint {
+.cnvs-label-text.variant-hint {
   color: var(--cnvs-sys-color-text-hint);
 }
 
 
-.cnvs-label-text.cnvs-text--variant-inverse.cnvs-label-text--disabled {
+.cnvs-label-text.variant-inverse.disabled {
   opacity: var(--cnvs-sys-opacity-disabled);
   color: var(--cnvs-sys-color-text-inverse);
 }