@workday/canvas-kit-preview-css 14.0.0-alpha.1168-next.0 → 14.0.0-alpha.1171-next.0

package/color-picker.css

@@ -0,0 +1,102 @@
+.cnvs-preview-reset-button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: calc(100% + var(--cnvs-sys-space-x8));
+  height: var(--cnvs-sys-space-x8);
+  margin: calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x4) * -1) var(--cnvs-sys-space-x2);
+  padding: 0 var(--cnvs-sys-space-x4);
+  white-space: nowrap;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  transition: color 120ms ease,background-color 120ms ease;
+}
+
+.cnvs-preview-reset-button:hover, .cnvs-preview-reset-button.hover {
+  background-color: var(--cnvs-sys-color-bg-alt-default);
+}
+
+.cnvs-preview-reset-button:active, .cnvs-preview-reset-button.active {
+  background-color: var(--cnvs-sys-color-bg-alt-strong);
+}
+
+.cnvs-preview-reset-button:focus-visible, .cnvs-preview-reset-button.focus {
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+.cnvs-preview-reset-button [data-part="reset-button-label"] {
+  margin-left: var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-preview-color-picker-swatch-book {
+  --cnvs-preview-color-picker-swatch-book-shadow: var(--cnvs-sys-color-border-inverse) 0 0 0 0.125rem,var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x2) * -1) 0;
+}
+
+.cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"] {
+  display: flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  border-radius: var(--cnvs-sys-shape-half);
+  transition: box-shadow 120ms ease;
+  margin: 0px var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) 0px;
+}
+
+.cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"]:hover {
+  box-shadow: var(--cnvs-preview-color-picker-swatch-book-shadow);
+}
+
+.cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+.cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"][aria-selected="true"] {
+  box-shadow: var(--cnvs-preview-color-picker-swatch-book-shadow);
+}
+
+.cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"][aria-selected="true"]:focus-visible {
+  animation: none;
+  box-shadow: none;
+}
+
+.cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"][aria-selected="true"]:hover {
+  box-shadow: var(--cnvs-preview-color-picker-swatch-book-shadow);
+}
+
+
+.cnvs-preview-color-picker {
+  box-sizing: border-box;
+  width: 13.5rem;
+}
+
+.cnvs-preview-color-picker [data-part="color-picker-form"] {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-block-start: var(--cnvs-sys-space-x4);
+}
+
+.cnvs-preview-color-picker [data-part="color-picker-input-wrapper"] {
+  display: flex;
+  flex-direction: column;
+  margin: var(--cnvs-sys-space-zero);
+}
+
+.cnvs-preview-color-picker [data-part="color-picker-button"] {
+  align-self: flex-end;
+}
+
+.cnvs-preview-color-picker [data-part="color-picker-hex-input"] {
+  width: 10.5rem;
+}
+

package/divider.css

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,123 @@
+.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-sys-color-bg-primary-softer);
+}
+
+.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-sys-color-bg-caution-softest);
+}
+
+.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-sys-color-bg-critical-softest);
+}
+
+.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-fg-critical-default);
+}
+

package/loading-sparkles.css

@@ -0,0 +1,45 @@
+@keyframes animation-17glbq {
+  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-17glbq;
+  animation-timing-function: ease-in-out;
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-ai);
+}
+
+.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

@@ -0,0 +1,110 @@
+.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-half);
+  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-common-error-inner);
+  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner);
+  background-color: var(--cnvs-brand-error-lightest);
+}
+
+.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-common-error-inner);
+}
+
+.cnvs-preview-multi-select-input.error-error:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.error-error.focus {
+  border-color: var(--cnvs-brand-common-error-inner);
+  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner),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-common-alert-outer);
+  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);
+  background-color: var(--cnvs-brand-alert-lightest);
+  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-common-alert-outer);
+}
+
+.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-common-alert-inner),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "14.0.0-alpha.1168-next.0",
+  "version": "14.0.0-alpha.1171-next.0",
   "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": "c7f43dc689c7377f48786bc8d99b0bace1431c86"
+  "gitHead": "585934cc7f7bf81c6c86c75f7c3966368a3e1ca8"
 }

package/pill.css

@@ -0,0 +1,212 @@
+.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);
+  --cnvs-preview-pill-count-border-color: transparent;
+  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-sys-color-bg-alt-stronger);
+  --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

@@ -0,0 +1,205 @@
+.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-half);
+  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);
+  background-color: var(--cnvs-brand-error-lightest);
+}
+
+
+.cnvs-preview-radio-group.error-alert {
+  background-color: var(--cnvs-brand-alert-lightest);
+  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner),inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);
+}
+

package/segmented-control.css

@@ -0,0 +1,153 @@
+.cnvs-preview-segmented-control-list {
+  box-sizing: border-box;
+  display: inline-grid;
+  background-color: var(--cnvs-sys-color-bg-alt-soft);
+  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
+  border-radius: var(--cnvs-sys-shape-x2);
+  padding: 0.1875rem;
+  grid-gap: var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-preview-segmented-control-list.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+
+.cnvs-preview-segmented-control-list.orientation-vertical {
+  grid-template-rows: repeat(var(--cnvs-preview-segmented-control-list-items), 1fr);
+}
+
+
+.cnvs-preview-segmented-control-list.orientation-horizontal {
+  grid-template-columns: repeat(var(--cnvs-preview-segmented-control-list-items), 1fr);
+}
+
+
+.cnvs-preview-segmented-control-item {
+  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);
+  text-align: start;
+  padding-inline: var(--cnvs-sys-space-zero);
+  gap: var(--cnvs-sys-space-x1);
+  --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
+}
+
+.cnvs-preview-segmented-control-item:hover, .cnvs-preview-segmented-control-item.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
+}
+
+.cnvs-preview-segmented-control-item:active, .cnvs-preview-segmented-control-item.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
+}
+
+.cnvs-preview-segmented-control-item:focus-visible, .cnvs-preview-segmented-control-item.focus {
+  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
+}
+
+.cnvs-preview-segmented-control-item:disabled, .cnvs-preview-segmented-control-item.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
+}
+
+.cnvs-preview-segmented-control-item[aria-pressed='true'] {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+}
+
+.cnvs-preview-segmented-control-item[aria-pressed='true']:hover, .cnvs-preview-segmented-control-item[aria-pressed='true'].hover {
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+}
+
+.cnvs-preview-segmented-control-item[aria-pressed='true']:disabled, .cnvs-preview-segmented-control-item[aria-pressed='true'].disabled {
+  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+}
+
+.cnvs-preview-segmented-control-item :dir(rtl) svg {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-preview-segmented-control-item.size-large {
+  height: var(--cnvs-sys-space-x10);
+  gap: var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-preview-segmented-control-item.size-medium {
+  height: var(--cnvs-sys-space-x8);
+}
+
+
+.cnvs-preview-segmented-control-item.size-small {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  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);
+  height: var(--cnvs-sys-space-x6);
+}
+
+
+
+
+
+.cnvs-preview-segmented-control-item.size-large.variant-iconOnly {
+  min-width: var(--cnvs-sys-space-x10);
+}
+
+
+.cnvs-preview-segmented-control-item.size-large.variant-iconWithText {
+  padding-inline: 1.25rem var(--cnvs-sys-space-x6);
+}
+
+
+.cnvs-preview-segmented-control-item.size-large.variant-textOnly {
+  padding-inline: var(--cnvs-sys-space-x6);
+}
+
+
+.cnvs-preview-segmented-control-item.size-medium.variant-iconOnly {
+  min-width: var(--cnvs-sys-space-x8);
+}
+
+
+.cnvs-preview-segmented-control-item.size-medium.variant-iconWithText {
+  padding-inline: var(--cnvs-sys-space-x4) 1.25rem;
+}
+
+
+.cnvs-preview-segmented-control-item.size-medium.variant-textOnly {
+  padding-inline: 1.25rem;
+}
+
+
+.cnvs-preview-segmented-control-item.size-small.variant-iconOnly {
+  min-width: var(--cnvs-sys-space-x6);
+}
+
+
+.cnvs-preview-segmented-control-item.size-small.variant-iconWithText {
+  padding-inline: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-preview-segmented-control-item.size-small.variant-textOnly {
+  padding-inline: var(--cnvs-sys-space-x3);
+}
+

package/side-panel.css

@@ -0,0 +1,114 @@
+.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

@@ -0,0 +1,107 @@
+.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-fg-muted-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-strong);
+  background: var(--cnvs-sys-color-bg-alt-softer);
+}
+
+
+.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-amber-default);
+}
+
+
+.cnvs-preview-status-indicator.orange-low {
+  color: var(--cnvs-sys-color-static-amber-strongest);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-static-amber-strongest);
+  background: var(--cnvs-sys-color-static-amber-softer);
+}
+
+
+.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-softer);
+}
+
+
+.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-softer);
+}
+
+
+.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-softer);
+}
+
+
+.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);
+}
+

package/text-input.css

@@ -0,0 +1,54 @@
+.cnvs-preview-text-input-field {
+  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);
+  transition: 0.2s box-shadow,0.2s border-color;
+  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
+  padding: var(--cnvs-sys-space-x2);
+  margin: 0;
+  display: block;
+  height: var(--cnvs-sys-space-x10);
+  min-width: 17.5rem;
+  border-radius: var(--cnvs-sys-shape-x1);
+  background-color: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-preview-text-input-field::placeholder {
+  color: var(--cnvs-sys-color-text-default);
+}
+
+.cnvs-preview-text-input-field:hover {
+  border-color: var(--cnvs-sys-color-border-input-strong);
+}
+
+.cnvs-preview-text-input-field:focus:not([disabled]) {
+  outline: none;
+}
+
+.cnvs-preview-text-input-field:disabled {
+  background-color: var(--cnvs-sys-color-bg-alt-softer);
+  border-color: var(--cnvs-sys-color-border-input-disabled);
+  color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-preview-text-input-field:disabled::placeholder {
+  color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-preview-text-input-field ::-ms-clear {
+  display: none;
+}
+
+
+.cnvs-preview-text-input-field.error-error {
+  background-color: var(--cnvs-brand-error-lightest);
+}
+
+
+.cnvs-preview-text-input-field.error-alert {
+  background-color: var(--cnvs-brand-alert-lightest);
+}
+