@workday/canvas-kit-preview-css 13.2.1 → 13.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "13.2.1",
+  "version": "13.2.2",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -25,5 +25,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "d601d517dbaced7a41f2f49d8312e4d7979dcea4"
+  "gitHead": "fdcf5da36c0f9b37d0a297d925a911515de53d1a"
 }

package/divider.css

@@ -1,10 +0,0 @@
-.cnvs-preview-divider {
-  --cnvs-preview-divider-space: var(--cnvs-sys-space-x4);
-  box-sizing: border-box;
-  display: block;
-  height: 0.0625rem;
-  border: none;
-  border-top: 1px solid var(--cnvs-sys-color-border-divider);
-  margin: calc(var(--cnvs-preview-divider-space) / 2) 0;
-}
-

package/information-highlight.css

@@ -1,123 +0,0 @@
-.cnvs-preview-information-highlight-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-body-small);
-  font-size: var(--cnvs-sys-font-size-body-small);
-  letter-spacing: var(--cnvs-base-letter-spacing-200);
-  color: var(--cnvs-sys-color-text-strong);
-  grid-column: 2;
-  margin-top: var(--cnvs-sys-space-zero);
-  margin-bottom: var(--cnvs-sys-space-zero);
-}
-
-
-.cnvs-preview-information-highlight-body {
-  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);
-  color: var(--cnvs-sys-color-text-strong);
-  grid-column: 2;
-  margin-block-end: var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-preview-information-highlight-link {
-  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);
-  grid-column: 2;
-  justify-self: start;
-  color: var(--cnvs-sys-color-text-strong);
-}
-
-
-.cnvs-preview-information-highlight {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: min-content;
-  column-gap: var(--cnvs-sys-space-x4);
-  row-gap: var(--cnvs-sys-space-x2);
-  padding: var(--cnvs-sys-space-x4);
-  border-radius: var(--cnvs-sys-shape-x1);
-  outline: 0.0625rem solid transparent;
-}
-
-
-.cnvs-preview-information-highlight.informational-low {
-  border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);
-  background-color: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-information-highlight.informational-low [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-bg-primary-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-bg-primary-default);
-  --cnvs-system-icon-background-color: none;
-}
-
-
-.cnvs-preview-information-highlight.informational-high {
-  border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);
-  background-color: var(--cnvs-base-palette-blueberry-100);
-}
-
-.cnvs-preview-information-highlight.informational-high [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-bg-primary-default);
-  --cnvs-system-icon-background-color: var(--cnvs-sys-color-bg-primary-default);
-}
-
-
-.cnvs-preview-information-highlight.caution-low {
-  border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);
-  background-color: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-information-highlight.caution-low [data-part="information-highlight-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-preview-information-highlight.caution-high {
-  border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);
-  background-color: var(--cnvs-base-palette-sour-lemon-100);
-}
-
-.cnvs-preview-information-highlight.caution-high [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
-  --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-contrast-default);
-}
-
-
-.cnvs-preview-information-highlight.critical-low {
-  border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);
-  background-color: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-information-highlight.critical-low [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-bg-critical-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-bg-critical-default);
-  --cnvs-system-icon-background-color: none;
-}
-
-
-.cnvs-preview-information-highlight.critical-high {
-  border-inline-start: solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);
-  background-color: var(--cnvs-base-palette-peach-100);
-}
-
-.cnvs-preview-information-highlight.critical-high [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-bg-critical-default);
-  --cnvs-system-icon-background-color: var(--cnvs-sys-color-bg-critical-default);
-}
-

package/loading-sparkles.css

@@ -1,45 +0,0 @@
-@keyframes animation-swtl3 {
-  0%, 79%, 100% {
-    opacity: 0.2;
-    transform: scale(0.55);
-  }
-  
-  27% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  
-  53% {
-    opacity: 0.6;
-    transform: scale(0.7);
-  }
-  
-}
-
-.cnvs-preview-loading-sparkles {
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: 0.0625rem;
-}
-
-.cnvs-preview-loading-sparkles [data-part="sparkle"] {
-  animation-duration: 1230ms;
-  animation-fill-mode: both;
-  animation-iteration-count: infinite;
-  animation-name: animation-swtl3;
-  animation-timing-function: ease-in-out;
-  --cnvs-system-icon-color: var(--cnvs-base-extended-palette-dragon-fruit-400);
-}
-
-.cnvs-preview-loading-sparkles [data-part="sparkle"]:nth-child(1) {
-  animation-delay: 0ms;
-}
-
-.cnvs-preview-loading-sparkles [data-part="sparkle"]:nth-child(2) {
-  animation-delay: calc(1230ms * (1/3));
-}
-
-.cnvs-preview-loading-sparkles [data-part="sparkle"]:nth-child(3) {
-  animation-delay: calc(1230ms * (2/3));
-}
-

package/multi-select.css

@@ -1,107 +0,0 @@
-.cnvs-preview-multi-select-input {
-  box-sizing: border-box;
-  border: 1px solid var(--cnvs-sys-color-border-input-default);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--cnvs-sys-color-bg-default);
-  border-radius: var(--cnvs-sys-shape-x1);
-  min-height: var(--cnvs-sys-space-x10);
-  transition: 0.2s box-shadow,0.2s border-color;
-  margin: 0;
-  --cnvs-text-input-width: 100%;
-}
-
-.cnvs-preview-multi-select-input:hover, .cnvs-preview-multi-select-input.hover {
-  border-color: var(--cnvs-sys-color-border-input-strong);
-}
-
-.cnvs-preview-multi-select-input:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.focus {
-  border-color: var(--cnvs-sys-color-border-primary-default);
-  box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);
-}
-
-.cnvs-preview-multi-select-input [data-part="user-input"] {
-  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);
-  background-color: var(--cnvs-sys-color-bg-transparent);
-  border-radius: var(--cnvs-sys-shape-x1);
-  border: none!important;
-  box-shadow: none!important;
-  outline-width: 0px;
-}
-
-.cnvs-preview-multi-select-input [data-part="user-input"]:where([data-part="user-input"], [data-part="form-input"]) {
-  height: calc(var(--cnvs-sys-space-x10) - 0.125rem);
-}
-
-.cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete])) {
-  caret-color: transparent;
-  cursor: default;
-}
-
-.cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete]))::selection {
-  background-color: transparent;
-}
-
-.cnvs-preview-multi-select-input:has(:disabled, .disabled) {
-  border-color: var(--cnvs-sys-color-border-input-disabled);
-  color: var(--cnvs-sys-color-text-disabled);
-}
-
-.cnvs-preview-multi-select-input :where([data-part="form-input"]) {
-  position: absolute;
-  top: var(--cnvs-sys-space-zero);
-  bottom: var(--cnvs-sys-space-zero);
-  left: var(--cnvs-sys-space-zero);
-  right: var(--cnvs-sys-space-zero);
-  opacity: var(--cnvs-sys-opacity-zero);
-  cursor: default;
-  pointer-events: none;
-}
-
-.cnvs-preview-multi-select-input :where([data-part="separator"]) {
-  background-color: var(--cnvs-sys-color-border-divider);
-  height: 1px;
-  margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);
-}
-
-.cnvs-preview-multi-select-input :where([data-part="list"]) {
-  display: flex;
-  gap: var(--cnvs-sys-space-x2);
-  padding: var(--cnvs-sys-space-x2);
-  flex-wrap: wrap;
-}
-
-
-.cnvs-preview-multi-select-input.error-error {
-  border-color: var(--cnvs-brand-error-base);
-  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);
-}
-
-.cnvs-preview-multi-select-input.error-error:has(:hover, :disabled, :focus-visible), .cnvs-preview-multi-select-input.error-error:is(.hover, .disabled, .focus) {
-  border-color: var(--cnvs-brand-error-base);
-}
-
-.cnvs-preview-multi-select-input.error-error:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.error-error.focus {
-  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-preview-multi-select-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-preview-multi-select-input.error-alert:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])) {
-  border-color: var(--cnvs-brand-alert-darkest);
-}
-
-.cnvs-preview-multi-select-input.error-alert:has(:focus-visible, .focus):not(:has([disabled])) {
-  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
-}
-

package/pill.css

@@ -1,211 +0,0 @@
-.cnvs-preview-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-preview-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-soft);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
-  --cnvs-svg-size: var(--cnvs-sys-space-x6);
-}
-
-.cnvs-preview-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-preview-pill-icon-button:focus-visible, .cnvs-preview-pill-icon-button.focus {
-  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
-  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-preview-pill-icon-button:hover, .cnvs-preview-pill-icon-button.hover {
-  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
-}
-
-.cnvs-preview-pill-icon-button:disabled, .cnvs-preview-pill-icon-button.disabled {
-  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
-}
-
-
-.cnvs-preview-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-preview-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-preview-pill-count-background-color, var(--cnvs-sys-color-bg-alt-stronger));
-  flex: 0 0 auto;
-}
-
-
-.cnvs-preview-pill-avatar {
-  box-sizing: border-box;
-  cursor: pointer;
-  flex: 0 0 auto;
-}
-
-
-.cnvs-preview-pill-label {
-  box-sizing: border-box;
-  flex-shrink: 1;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-
-.cnvs-preview-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-preview-pill-max-width);
-  --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-text-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.cnvs-preview-pill:has(span) {
-  display: flex;
-  line-height: var(--cnvs-sys-line-height-subtext-large);
-}
-
-.cnvs-preview-pill:focus-visible, .cnvs-preview-pill.focus {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
-  --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
-  --cnvs-button-label: var(--cnvs-sys-color-text-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
-  border-color: var(--cnvs-sys-color-border-primary-default);
-  --cnvs-preview-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-preview-pill:hover, .cnvs-preview-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-text-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
-}
-
-.cnvs-preview-pill:active, .cnvs-preview-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-text-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
-  --cnvs-preview-pill-count-background-color: var(--cnvs-base-palette-soap-600);
-  --cnvs-preview-pill-count-border-color: transparent;
-}
-
-.cnvs-preview-pill:disabled, .cnvs-preview-pill.disabled {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
-  --cnvs-button-border: var(--cnvs-sys-color-border-input-disabled);
-  --cnvs-button-label: var(--cnvs-sys-color-text-disabled);
-  --cnvs-button-opacity: 1;
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
-  --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-default);
-  --cnvs-preview-pill-count-border-color: transparent;
-}
-
-
-.cnvs-preview-removeable-pill {
-  box-sizing: border-box;
-  cursor: default;
-  overflow: revert;
-  position: relative;
-}
-
-.cnvs-preview-removeable-pill:focus-visible, .cnvs-preview-removeable-pill.focus {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
-  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
-  --cnvs-button-label: var(--cnvs-sys-color-text-strong);
-  box-shadow: none;
-}
-
-.cnvs-preview-removeable-pill:hover, .cnvs-preview-removeable-pill.hover {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-removeable-pill:active, .cnvs-preview-removeable-pill.active {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
-}
-
-.cnvs-preview-removeable-pill:disabled, .cnvs-preview-removeable-pill.disabled {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
-}
-
-
-.cnvs-preview-ready-only-pill {
-  box-sizing: border-box;
-  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
-  cursor: default;
-  --cnvs-button-background: transparent;
-}
-
-.cnvs-preview-ready-only-pill:hover, .cnvs-preview-ready-only-pill.hover {
-  --cnvs-button-background: transparent;
-}
-
-.cnvs-preview-ready-only-pill:focus-visible, .cnvs-preview-ready-only-pill.focus {
-  --cnvs-button-background: transparent;
-}
-
-.cnvs-preview-ready-only-pill:active, .cnvs-preview-ready-only-pill.active {
-  --cnvs-button-background: transparent;
-}
-
-.cnvs-preview-ready-only-pill:disabled, .cnvs-preview-ready-only-pill.disabled {
-  --cnvs-button-background: transparent;
-}
-

package/radio.css

@@ -1,203 +0,0 @@
-.cnvs-preview-radio-input {
-  box-sizing: border-box;
-  cursor: pointer;
-  height: 1.125rem;
-  width: 1.125rem;
-  border-radius: var(--cnvs-sys-shape-round);
-  position: absolute;
-  margin: var(--cnvs-sys-space-zero);
-}
-
-.cnvs-preview-radio-input:focus-visible, .cnvs-preview-radio-input.focus, .cnvs-preview-radio-input:active {
-  outline: transparent;
-}
-
-.cnvs-preview-radio-input:disabled, .cnvs-preview-radio-input.disabled {
-  cursor: auto;
-}
-
-.cnvs-preview-radio-input:disabled +.cnvs-radio-check, .cnvs-preview-radio-input.disabled +.cnvs-radio-check {
-  border-color: var(--cnvs-sys-color-border-input-disabled);
-  background-color: var(--cnvs-sys-color-bg-alt-softer);
-}
-
-.cnvs-preview-radio-input:disabled:hover+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:hover+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.hover+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.hover+.cnvs-radio-check {
-  border-color: var(--cnvs-sys-color-border-input-disabled);
-}
-
-.cnvs-preview-radio-input:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.checked+.cnvs-radio-check {
-  background-color: var(--cnvs-brand-primary-accent);
-  border: 0.3125rem solid var(--cnvs-brand-primary-base);
-}
-
-.cnvs-preview-radio-input +.cnvs-radio-check {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--cnvs-sys-color-bg-default);
-  border-radius: var(--cnvs-sys-shape-round);
-  box-sizing: border-box;
-  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
-  height: 1.125rem;
-  width: 1.125rem;
-  justify-content: center;
-  pointer-events: none;
-  position: absolute;
-  transition: border 200ms ease,background 200ms;
-  opacity: var(--cnvs-sys-opacity-full);
-}
-
-.cnvs-preview-radio-input:hover+.cnvs-radio-check, .cnvs-preview-radio-input.hover+.cnvs-radio-check {
-  border-color: var(--cnvs-sys-color-border-input-strong);
-}
-
-.cnvs-preview-radio-input:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.focus+.cnvs-radio-check {
-  border-color: var(--cnvs-sys-color-border-primary-default);
-  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 1px var(--cnvs-brand-common-focus-outline);
-}
-
-.cnvs-preview-radio-input:focus-visible:hover+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover+.cnvs-radio-check {
-  outline: transparent;
-}
-
-.cnvs-preview-radio-input:checked+.cnvs-radio-check, .cnvs-preview-radio-input.checked+.cnvs-radio-check {
-  background-color: var(--cnvs-brand-primary-accent);
-  border: 0.3125rem solid var(--cnvs-brand-primary-base);
-}
-
-.cnvs-preview-radio-input:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover:checked+.cnvs-radio-check {
-  outline: transparent;
-  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
-}
-
-
-.cnvs-preview-radio-input.variant-inverse +.cnvs-radio-check {
-  background-color: var(--cnvs-sys-color-bg-alt-softer);
-  border-color: var(--cnvs-sys-color-border-input-inverse);
-}
-
-.cnvs-preview-radio-input.variant-inverse:disabled, .cnvs-preview-radio-input.variant-inverse.disabled {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-.cnvs-preview-radio-input.variant-inverse:disabled +.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled +.cnvs-radio-check {
-  background-color: var(--cnvs-sys-color-bg-alt-softer);
-  border-color: var(--cnvs-sys-color-border-input-disabled);
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-.cnvs-preview-radio-input.variant-inverse:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled.checked+.cnvs-radio-check {
-  background-color: var(--cnvs-brand-primary-base);
-  border-color: var(--cnvs-sys-color-border-inverse);
-}
-
-.cnvs-preview-radio-input.variant-inverse:hover+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.hover+.cnvs-radio-check {
-  border-color: var(--cnvs-sys-color-border-input-inverse);
-}
-
-.cnvs-preview-radio-input.variant-inverse:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus+.cnvs-radio-check {
-  border-color: var(--cnvs-sys-color-border-input-inverse);
-}
-
-.cnvs-preview-radio-input.variant-inverse:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.checked+.cnvs-radio-check {
-  background-color: var(--cnvs-brand-primary-base);
-  border-color: var(--cnvs-sys-color-border-inverse);
-}
-
-.cnvs-preview-radio-input.variant-inverse:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:focus-visible:hover+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:hover+.cnvs-radio-check {
-  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
-}
-
-.cnvs-preview-radio-input.variant-inverse:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:hover:checked+.cnvs-radio-check {
-  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
-}
-
-
-.cnvs-preview-radio-input-wrapper-styles {
-  box-sizing: border-box;
-  height: 1.125rem;
-  width: 1.125rem;
-  flex: 0 0 auto;
-}
-
-.cnvs-preview-radio-input-wrapper-styles ::before {
-  content: '';
-  position: absolute;
-  border-radius: var(--cnvs-sys-shape-round);
-  height: 1.125rem;
-  transition: box-shadow 150ms ease-out;
-  width: 1.125rem;
-  pointer-events: none;
-  opacity: var(--cnvs-sys-opacity-full);
-}
-
-.cnvs-preview-radio-input-wrapper-styles:hover:before, .cnvs-preview-radio-input-wrapper-styles.hover:before {
-  box-shadow: 0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);
-}
-
-
-.cnvs-preview-radio-input-wrapper-styles.variant-inverse ::before {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-
-.cnvs-preview-radio-input-wrapper-styles.disabled:hover:before, .cnvs-preview-radio-input-wrapper-styles.disabled.hover:before {
-  box-shadow: none;
-  cursor: auto;
-}
-
-
-.cnvs-preview-radio-text {
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-
-.cnvs-preview-radio-text.variant-inverse {
-  color: var(--cnvs-sys-color-text-inverse);
-}
-
-
-.cnvs-preview-radio-text.disabled {
-  cursor: default;
-  color: var(--cnvs-sys-color-text-disabled);
-}
-
-
-.cnvs-preview-radio-text.variant-inverse.disabled {
-  color: var(--cnvs-sys-color-text-inverse);
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-
-.cnvs-preview-radio-label {
-  box-sizing: border-box;
-  align-items: flex-start;
-  min-height: var(--cnvs-sys-space-x6);
-  position: relative;
-  gap: var(--cnvs-sys-space-x3);
-}
-
-
-.cnvs-preview-radio-group {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--cnvs-sys-shape-x1);
-  gap: var(--cnvs-sys-space-x2);
-  padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
-  margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
-  transition: 100ms box-shadow;
-  width: fit-content;
-}
-
-
-.cnvs-preview-radio-group.error-error {
-  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-error-base);
-}
-
-
-.cnvs-preview-radio-group.error-alert {
-  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest),inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);
-}
-

package/side-panel.css

@@ -1,114 +0,0 @@
-.cnvs-preview-side-panel-toggle-button {
-  box-sizing: border-box;
-  position: absolute;
-  top: var(--cnvs-sys-space-x6);
-  width: var(--cnvs-sys-space-x8);
-  inset-inline-end: var(--cnvs-sys-space-x4);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-collapsing {
-  margin: 0;
-  transform: scaleX(1);
-}
-
-.cnvs-preview-side-panel-toggle-button.state-collapsing :dir(rtl) {
-  transform: scaleX(-1);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-collapsed {
-  margin: auto;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  transform: scaleX(1);
-}
-
-.cnvs-preview-side-panel-toggle-button.state-collapsed :dir(rtl) {
-  transform: scaleX(-1);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-expanded {
-  margin: 0;
-  transform: scaleX(-1);
-}
-
-.cnvs-preview-side-panel-toggle-button.state-expanded :dir(rtl) {
-  transform: scaleX(1);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-expanding {
-  margin: 0;
-  transform: scaleX(-1);
-}
-
-.cnvs-preview-side-panel-toggle-button.state-expanding :dir(rtl) {
-  transform: scaleX(1);
-}
-
-
-
-
-.cnvs-preview-side-panel-toggle-button.state-collapsed.origin-right {
-  transform: scaleX(-1);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-collapsing.origin-right {
-  transform: scaleX(-1);
-  inset-inline-start: var(--cnvs-sys-space-x4);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-expanded.origin-right {
-  transform: scaleX(1);
-  inset-inline-start: var(--cnvs-sys-space-x4);
-}
-
-
-.cnvs-preview-side-panel-toggle-button.state-expanding.origin-right {
-  transform: scaleX(1);
-  inset-inline-start: var(--cnvs-sys-space-x4);
-}
-
-
-.cnvs-preview-panel {
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-  outline: 0.0625rem solid transparent;
-  transition: width ease-out 200ms,max-width ease-out 200ms;
-}
-
-
-.cnvs-preview-panel.variant-alternate {
-  background-color: var(--cnvs-sys-color-bg-default);
-  box-shadow: var(--cnvs-sys-depth-5);
-}
-
-
-.cnvs-preview-panel.variant-standard {
-  background-color: var(--cnvs-sys-color-bg-alt-softer);
-}
-
-
-.cnvs-preview-panel.expanded {
-  width: var(--cnvs-preview-panel-expanded-width);
-  max-width: var(--cnvs-preview-panel-expanded-width);
-}
-
-
-.cnvs-preview-panel.expanded-false {
-  width: var(--cnvs-preview-panel-collapsed-width);
-  max-width: var(--cnvs-preview-panel-collapsed-width);
-}
-
-
-
-.cnvs-preview-panel.touched-false {
-  animation: none;
-}
-

package/status-indicator.css

@@ -1,107 +0,0 @@
-.cnvs-preview-status-indicator-label {
-  box-sizing: border-box;
-  font-weight: var(--cnvs-sys-font-weight-bold);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-transform: capitalize;
-  color: inherit;
-}
-
-
-.cnvs-preview-status-indicator {
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: var(--cnvs-sys-space-x1);
-  max-width: 12.5rem;
-  align-items: center;
-  border-radius: var(--cnvs-sys-shape-half);
-  height: 1.25rem;
-  padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
-  outline: 0.0625rem solid transparent;
-}
-
-
-.cnvs-preview-status-indicator.gray-high {
-  color: var(--cnvs-sys-color-static-white);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
-  background: var(--cnvs-sys-color-static-gray-default);
-}
-
-
-.cnvs-preview-status-indicator.gray-low {
-  color: var(--cnvs-sys-color-static-gray-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-strong);
-  background: var(--cnvs-sys-color-static-gray-soft);
-}
-
-
-.cnvs-preview-status-indicator.orange-high {
-  color: var(--cnvs-sys-color-static-gray-stronger);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-stronger);
-  background: var(--cnvs-sys-color-static-orange-default);
-}
-
-
-.cnvs-preview-status-indicator.orange-low {
-  color: var(--cnvs-sys-color-static-gold-stronger);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-gold-stronger);
-  background: var(--cnvs-sys-color-static-orange-soft);
-}
-
-
-.cnvs-preview-status-indicator.blue-high {
-  color: var(--cnvs-sys-color-static-white);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
-  background: var(--cnvs-sys-color-static-blue-default);
-}
-
-
-.cnvs-preview-status-indicator.blue-low {
-  color: var(--cnvs-sys-color-static-blue-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-blue-strong);
-  background: var(--cnvs-sys-color-static-blue-soft);
-}
-
-
-.cnvs-preview-status-indicator.green-high {
-  color: var(--cnvs-sys-color-static-white);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
-  background: var(--cnvs-sys-color-static-green-strong);
-}
-
-
-.cnvs-preview-status-indicator.green-low {
-  color: var(--cnvs-sys-color-static-green-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-green-strong);
-  background: var(--cnvs-sys-color-static-green-soft);
-}
-
-
-.cnvs-preview-status-indicator.red-high {
-  color: var(--cnvs-sys-color-static-white);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
-  background: var(--cnvs-sys-color-static-red-default);
-}
-
-
-.cnvs-preview-status-indicator.red-low {
-  color: var(--cnvs-sys-color-static-red-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-red-strong);
-  background: var(--cnvs-sys-color-static-red-soft);
-}
-
-
-.cnvs-preview-status-indicator.transparent-high {
-  color: var(--cnvs-sys-color-static-white);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
-  background: var(--cnvs-sys-color-bg-translucent);
-}
-
-
-.cnvs-preview-status-indicator.transparent-low {
-  color: var(--cnvs-sys-color-static-white);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
-  background: var(--cnvs-sys-color-bg-translucent);
-}
-