@workday/canvas-kit-css 15.0.0-alpha.1303-next.0 → 15.0.0

package/pill.css

@@ -0,0 +1,221 @@
+.cnvs-pill-avatar {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));
+  font-size: var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));
+}
+
+.cnvs-pill-avatar:disabled, .cnvs-pill-avatar.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+
+.cnvs-pill-count {
+  box-sizing: border-box;
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  border-end-start-radius: 0;
+  border-end-end-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  border-width: 0;
+  border-inline-start-width: 0;
+  border-style: solid;
+  border-color: var(--cnvs-pill-count-border-color, var(--cnvs-sys-color-border-transparent));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+  width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+  padding: 0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
+  margin-inline-end: calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1);
+  margin-inline-start: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  background-color: var(--cnvs-pill-count-background-color, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));
+  flex: 0 0 auto;
+}
+
+
+.cnvs-pill-icon {
+  box-sizing: border-box;
+  margin-inline-start: calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-sm, 1.125rem);
+  flex: 0 0 auto;
+}
+
+
+.cnvs-pill-icon-button {
+  box-sizing: border-box;
+  margin-inline-end: calc(0.4375rem * -1);
+  margin-inline-start: calc(0.125rem * -1);
+  border-radius: 0.125rem;
+  height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
+  width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
+  padding: 0;
+  overflow: visible;
+  flex: 0 0 auto;
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-sm, 1.125rem);
+}
+
+.cnvs-pill-icon-button ::after {
+  content: "";
+  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  position: absolute;
+  left: calc(0.4375rem * -1);
+  bottom: calc(0.4375rem * -1);
+  margin: 0;
+  pointer-events: all;
+}
+
+.cnvs-pill-icon-button:focus-visible, .cnvs-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-pill-icon-button:hover, .cnvs-pill-icon-button.hover {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+}
+
+.cnvs-pill-icon-button:active, .cnvs-pill-icon-button.active {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+}
+
+.cnvs-pill-icon-button:disabled, .cnvs-pill-icon-button.disabled {
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+
+.cnvs-pill-label {
+  box-sizing: border-box;
+  flex-shrink: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+.cnvs-pill {
+  box-sizing: border-box;
+  display: initial;
+  flex-direction: row;
+  align-items: center;
+  border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  line-height: var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));
+  box-shadow: none;
+  outline: none;
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: fit-content;
+  padding: 0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
+  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+  position: relative;
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  max-width: var(--cnvs-pill-max-width);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  --cnvs-button-background: var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-border-color: transparent;
+}
+
+.cnvs-pill:has(span) {
+  display: flex;
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+}
+
+.cnvs-pill:hover, .cnvs-pill.hover {
+  --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
+  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
+  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-border-color: transparent;
+}
+
+.cnvs-pill:active, .cnvs-pill.active {
+  --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-border-color: transparent;
+}
+
+.cnvs-pill:focus-visible, .cnvs-pill.focus {
+  --cnvs-button-border: var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  border-color: var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
+  --cnvs-system-icon-color: currentColor;
+  box-shadow: 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)),0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
+}
+
+.cnvs-pill:disabled, .cnvs-pill.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-disabled);
+  --cnvs-system-icon-color: currentColor;
+  --cnvs-pill-count-background-color: var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));
+  --cnvs-pill-count-border-color: transparent;
+}
+
+
+.cnvs-pill.variant-read-only {
+  border: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
+  cursor: default;
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:hover, .cnvs-pill.variant-read-only.hover {
+  border-color: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:focus-visible, .cnvs-pill.variant-read-only.focus {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:active, .cnvs-pill.variant-read-only.active {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+.cnvs-pill.variant-read-only:disabled, .cnvs-pill.variant-read-only.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
+}
+
+
+.cnvs-pill.variant-removable {
+  cursor: default;
+  overflow: revert;
+  position: relative;
+}
+
+.cnvs-pill.variant-removable:focus-visible, .cnvs-pill.variant-removable.focus {
+  --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-fg-strong);
+  box-shadow: none;
+}
+
+.cnvs-pill.variant-removable:hover, .cnvs-pill.variant-removable.hover {
+  --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
+  --cnvs-pill-count-background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
+}
+
+.cnvs-pill.variant-removable:active, .cnvs-pill.variant-removable.active {
+  --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
+  --cnvs-pill-count-background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
+}
+
+.cnvs-pill.variant-removable:disabled, .cnvs-pill.variant-removable.disabled {
+  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
+  --cnvs-system-icon-color: currentColor;
+}
+

package/popup.css

@@ -3,7 +3,14 @@
 }
 
 
-@keyframes animation-26logt {
+.cnvs-popup-body {
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
+}
+
+
+@keyframes animation-2lrhzp {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -20,18 +27,19 @@
   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);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  color: var(--cnvs-sys-color-fg-default);
   position: relative;
-  max-width: calc(100vw - var(--cnvs-sys-space-x8));
-  gap: var(--cnvs-sys-space-x2);
-  box-shadow: var(--cnvs-sys-depth-5);
-  min-height: var(--cnvs-sys-space-zero);
-  padding: var(--cnvs-sys-space-x6);
+  max-width: calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));
+  gap: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
+  box-shadow: var(--cnvs-sys-depth-3);
+  min-height: 0;
+  padding: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
+  border-radius: var(--cnvs-sys-shape-xxxl, 2rem);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-26logt;
+  animation-name: animation-2lrhzp;
   animation-duration: 150ms;
   animation-timing-function: ease-out;
   transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
@@ -50,23 +58,16 @@
 }
 
 
-.cnvs-popup-heading {
-  box-sizing: border-box;
-  padding: var(--cnvs-sys-space-x2);
-}
-
-
 .cnvs-popup-close-icon {
   box-sizing: border-box;
   position: absolute;
-  inset-inline-end: var(--cnvs-sys-space-x1);
-  top: var(--cnvs-sys-space-x1);
+  inset-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
+  top: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
 }
 
 
-.cnvs-popup-body {
+.cnvs-popup-heading {
   box-sizing: border-box;
-  overflow-y: auto;
-  padding: var(--cnvs-sys-space-x2);
+  padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
 }
 

package/segmented-control.css

@@ -1,75 +1,149 @@
-.cnvs-segmented-control-button {
+.cnvs-segmented-control-item {
   box-sizing: border-box;
-  border-inline-start: none;
-  min-width: auto;
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
-  --cnvs-button-border: var(--cnvs-sys-color-border-container);
-  --cnvs-button-border-radius: var(--cnvs-sys-shape-zero);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+  font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  text-align: start;
+  padding-inline: 0;
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  --cnvs-button-border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
 }
 
-.cnvs-segmented-control-button:hover, .cnvs-segmented-control-button.hover {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
+.cnvs-segmented-control-item:hover, .cnvs-segmented-control-item.hover {
+  --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-segmented-control-button:active, .cnvs-segmented-control-button.active {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
+.cnvs-segmented-control-item:active, .cnvs-segmented-control-item.active {
+  --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
-.cnvs-segmented-control-button:disabled, .cnvs-segmented-control-button.disabled {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
-  --cnvs-button-border: var(--cnvs-sys-color-border-container);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
+.cnvs-segmented-control-item:focus-visible, .cnvs-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-segmented-control-button:first-of-type {
-  border-radius: var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);
-  border-inline-start: 0.0625rem solid var(--cnvs-sys-color-border-container);
+.cnvs-segmented-control-item:disabled, .cnvs-segmented-control-item.disabled {
+  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
+  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
 }
 
-.cnvs-segmented-control-button:last-of-type {
-  border-radius: 0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;
+.cnvs-segmented-control-item[aria-pressed='true'] {
+  --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  --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-segmented-control-button[aria-pressed="true"] {
-  --cnvs-button-background: var(--cnvs-brand-primary-base);
-  --cnvs-button-border: var(--cnvs-brand-primary-base);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
+.cnvs-segmented-control-item[aria-pressed='true']:hover, .cnvs-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-segmented-control-button[aria-pressed="true"]:first-of-type {
-  border-inline-start-color: var(--cnvs-brand-primary-base);
+.cnvs-segmented-control-item[aria-pressed='true']:disabled, .cnvs-segmented-control-item[aria-pressed='true'].disabled {
+  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
 }
 
-.cnvs-segmented-control-button[aria-pressed="true"]:disabled, .cnvs-segmented-control-button[aria-pressed="true"].disabled {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
-  --cnvs-button-border: var(--cnvs-sys-color-border-container);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
+.cnvs-segmented-control-item :dir(rtl) svg {
+  transform: scaleX(-1);
 }
 
-.cnvs-segmented-control-button:focus-visible, .cnvs-segmented-control-button.focus {
-  border-radius: var(--cnvs-sys-shape-x1);
-  z-index: 1;
-  animation: none;
-  transition: all 120ms border-radius 1ms;
+
+.cnvs-segmented-control-item.size-large {
+  height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
+  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
+}
+
+
+.cnvs-segmented-control-item.size-medium {
+  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+}
+
+
+.cnvs-segmented-control-item.size-small {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
+  line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+}
+
+
+
+
+
+.cnvs-segmented-control-item.size-large.variant-iconOnly {
+  min-width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
+}
+
+
+.cnvs-segmented-control-item.size-large.variant-iconWithText {
+  padding-inline: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
+}
+
+
+.cnvs-segmented-control-item.size-large.variant-textOnly {
+  padding-inline: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
 }
 
 
-.cnvs-segmented-control-button.segmented-control-button-size-small {
-  width: var(--cnvs-sys-space-x8);
-  height: var(--cnvs-sys-space-x8);
+.cnvs-segmented-control-item.size-medium.variant-iconOnly {
+  min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+}
+
+
+.cnvs-segmented-control-item.size-medium.variant-iconWithText {
+  padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
+}
+
+
+.cnvs-segmented-control-item.size-medium.variant-textOnly {
+  padding-inline: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
+}
+
+
+.cnvs-segmented-control-item.size-small.variant-iconOnly {
+  min-width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+}
+
+
+.cnvs-segmented-control-item.size-small.variant-iconWithText {
+  padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
+}
+
+
+.cnvs-segmented-control-item.size-small.variant-textOnly {
+  padding-inline: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
+}
+
+
+.cnvs-segmented-control-list {
+  box-sizing: border-box;
+  display: inline-grid;
+  background-color: var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));
+  border: 0 solid var(--cnvs-sys-color-border-transparent);
+  border-radius: var(--cnvs-sys-shape-lg, 0.75rem);
+  padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
+  grid-gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
 }
 
 
-.cnvs-segmented-control-button.segmented-control-button-size-medium {
-  width: var(--cnvs-sys-space-x10);
-  height: var(--cnvs-sys-space-x10);
+.cnvs-segmented-control-list.orientation-vertical {
+  grid-template-rows: repeat(var(--cnvs-segmented-control-list-items), 1fr);
 }
 
 
-.cnvs-segmented-control-button.segmented-control-button-size-large {
-  width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
-  height: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
+.cnvs-segmented-control-list.orientation-horizontal {
+  grid-template-columns: repeat(var(--cnvs-segmented-control-list-items), 1fr);
 }
 

package/select.css

@@ -1,13 +1,19 @@
+.cnvs-select-card {
+  box-sizing: border-box;
+  --cnvs-menu-card-max-height: 18.75rem;
+}
+
+
 .cnvs-select-input {
   box-sizing: border-box;
 }
 
 .cnvs-select-input [data-part="select-hidden-input"] {
   position: absolute;
-  top: var(--cnvs-sys-space-zero);
-  bottom: var(--cnvs-sys-space-zero);
-  left: var(--cnvs-sys-space-zero);
-  right: var(--cnvs-sys-space-zero);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   opacity: var(--cnvs-sys-opacity-zero);
   cursor: default;
   pointer-events: none;
@@ -22,36 +28,34 @@
 
 .cnvs-select-input [data-part="select-visual-input"] {
   caret-color: transparent;
-  background-color: var(--cnvs-sys-color-bg-default);
-  color: var(--cnvs-sys-color-text-default);
+  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  color: var(--cnvs-sys-color-fg-default);
   cursor: default;
 }
 
 .cnvs-select-input [data-part="select-visual-input"]::placeholder {
-  color: var(--cnvs-sys-color-text-default);
+  color: var(--cnvs-sys-color-fg-default);
 }
 
 .cnvs-select-input [data-part="select-visual-input"]::selection {
   background-color: transparent;
 }
 
+.cnvs-select-input [data-part="select-caret-icon"] {
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
+}
+
 .cnvs-select-input:has(:disabled, .disabled) [data-part="select-caret-icon"] {
   --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
 }
 
 
 .cnvs-select-input.error-error [data-part="select-visual-input"] {
-  background-color: var(--cnvs-brand-error-lightest);
+  background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
 }
 
 
 .cnvs-select-input.error-caution [data-part="select-visual-input"] {
-  background-color: var(--cnvs-brand-alert-lightest);
-}
-
-
-.cnvs-select-card {
-  box-sizing: border-box;
-  --cnvs-menu-card-max-height: 18.75rem;
+  background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
 }