prime-ui-kit 0.7.4 → 0.7.8

package/dist/index.css

@@ -609,7 +609,7 @@ select {
   --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
   --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
   --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
-  --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
+  --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-x1);
   --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
   --prime-sys-size-switch-l-trackHeight: 1.25rem;
   --prime-sys-size-switch-l-trackWidth: 2.25rem;
@@ -1075,7 +1075,7 @@ select {
   --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
   --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
   --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
-  --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
+  --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-x1);
   --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
   --prime-sys-size-switch-l-trackHeight: 1.25rem;
   --prime-sys-size-switch-l-trackWidth: 2.25rem;
@@ -5148,12 +5148,6 @@ textarea::-moz-focus-inner {
   display: block;
 }
 .Select_content {
-  --select-item-min-height: var(--prime-sys-size-control-m-height);
-  --select-item-text: var(--prime-sys-typography-control-s);
-  --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
-  --select-item-icon-size: var(--prime-sys-size-control-m-icon);
-  --select-item-gap: var(--prime-sys-size-control-m-gap);
-  --select-item-radius: var(--prime-sys-size-control-m-radius);
   display: flex;
   flex-direction: column;
   gap: var(--prime-sys-spacing-x1);
@@ -5169,6 +5163,9 @@ textarea::-moz-focus-inner {
   font-family: inherit;
   color: var(--prime-sys-color-content-primary);
 }
+.Select_content[aria-hidden=true] {
+  pointer-events: none;
+}
 .Select_content[data-overlay-portal-layer=page] {
   z-index: var(--prime-sys-elevation-zIndex-dropdown);
 }
@@ -5181,7 +5178,33 @@ textarea::-moz-focus-inner {
 .Select_content[data-overlay-portal-layer=drawerInModal] {
   z-index: var(--prime-sys-elevation-zIndex-dropdownInDrawerInModal);
 }
-.Select_content[data-size=s] {
+.Select_item {
+  --select-item-min-height: var(--prime-sys-size-control-m-height);
+  --select-item-text: var(--prime-sys-typography-control-s);
+  --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
+  --select-item-icon-size: var(--prime-sys-size-control-m-icon);
+  --select-item-gap: var(--prime-sys-size-control-m-gap);
+  --select-item-radius: var(--prime-sys-size-control-m-radius);
+  display: flex;
+  align-items: center;
+  gap: var(--select-item-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--select-item-min-height);
+  padding-block: 0;
+  padding-inline: var(--select-item-pad-x);
+  border-radius: var(--select-item-radius);
+  cursor: pointer;
+  font-size: var(--select-item-text);
+  font-weight: var(--prime-sys-typography-weight-medium);
+  line-height: 1.2;
+  color: var(--prime-sys-color-content-primary);
+  text-align: start;
+  transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+  outline: none;
+  user-select: none;
+}
+.Select_item[data-size=s] {
   --select-item-min-height: var(--prime-sys-size-control-s-height);
   --select-item-text: var(--prime-sys-typography-support-2xs);
   --select-item-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
@@ -5189,7 +5212,7 @@ textarea::-moz-focus-inner {
   --select-item-gap: var(--prime-sys-size-control-s-gap);
   --select-item-radius: var(--prime-sys-size-control-s-radius);
 }
-.Select_content[data-size=m] {
+.Select_item[data-size=m] {
   --select-item-min-height: var(--prime-sys-size-control-m-height);
   --select-item-text: var(--prime-sys-typography-control-s);
   --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
@@ -5197,7 +5220,7 @@ textarea::-moz-focus-inner {
   --select-item-gap: var(--prime-sys-size-control-m-gap);
   --select-item-radius: var(--prime-sys-size-control-m-radius);
 }
-.Select_content[data-size=l] {
+.Select_item[data-size=l] {
   --select-item-min-height: var(--prime-sys-size-control-l-height);
   --select-item-text: var(--prime-sys-typography-control-m);
   --select-item-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
@@ -5205,7 +5228,7 @@ textarea::-moz-focus-inner {
   --select-item-gap: var(--prime-sys-size-control-l-gap);
   --select-item-radius: var(--prime-sys-size-control-l-radius);
 }
-.Select_content[data-size=xl] {
+.Select_item[data-size=xl] {
   --select-item-min-height: var(--prime-sys-size-control-xl-height);
   --select-item-text: var(--prime-sys-typography-control-l);
   --select-item-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
@@ -5213,26 +5236,6 @@ textarea::-moz-focus-inner {
   --select-item-gap: var(--prime-sys-size-control-xl-gap);
   --select-item-radius: var(--prime-sys-size-control-xl-radius);
 }
-.Select_item {
-  display: flex;
-  align-items: center;
-  gap: var(--select-item-gap);
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--select-item-min-height);
-  padding-block: 0;
-  padding-inline: var(--select-item-pad-x);
-  border-radius: var(--select-item-radius);
-  cursor: pointer;
-  font-size: var(--select-item-text);
-  font-weight: var(--prime-sys-typography-weight-medium);
-  line-height: 1.2;
-  color: var(--prime-sys-color-content-primary);
-  text-align: start;
-  transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
-  outline: none;
-  user-select: none;
-}
 .Select_item:hover,
 .Select_item[data-highlighted=true] {
   background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
@@ -5292,12 +5295,24 @@ textarea::-moz-focus-inner {
 .Select_groupLabel {
   display: flex;
   align-items: center;
-  padding-inline: var(--select-item-pad-x);
+  padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
   padding-block: var(--prime-sys-spacing-x1);
   font-size: var(--prime-sys-typography-support-2xs);
   color: var(--prime-sys-color-content-muted);
   font-weight: var(--prime-sys-typography-weight-medium);
 }
+.Select_groupLabel[data-size=s] {
+  padding-inline: var(--prime-sys-size-control-s-inputPaddingX);
+}
+.Select_groupLabel[data-size=m] {
+  padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
+}
+.Select_groupLabel[data-size=l] {
+  padding-inline: var(--prime-sys-size-control-l-inputPaddingX);
+}
+.Select_groupLabel[data-size=xl] {
+  padding-inline: var(--prime-sys-size-control-xl-inputPaddingX);
+}
 .Select_separator {
   flex-shrink: 0;
   align-self: stretch;
@@ -5627,24 +5642,30 @@ textarea::-moz-focus-inner {
   align-items: center;
 }
 .Modal_title {
+  margin: 0;
   line-height: 1.2;
   font-weight: var(--prime-sys-typography-title-weight);
   font-size: var(--prime-sys-size-control-m-text);
 }
 .Modal_description {
+  margin: 0;
   color: var(--prime-sys-color-content-secondary);
-  font-size: var(--prime-sys-size-control-m-supportText);
+  font-size: var(--prime-sys-size-control-s-text);
+  line-height: 1.4;
 }
 .Modal_headText {
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   gap: var(--prime-sys-size-modal-titleGap);
+  min-width: 0;
   padding-right: var(--prime-sys-size-modal-headTextPaddingRight);
 }
 .Modal_headerIcon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--prime-sys-color-surface-raised);
+  background: var(--prime-sys-color-surface-default);
   color: var(--prime-sys-color-content-secondary);
   flex: 0 0 auto;
   width: var(--prime-sys-size-modal-headerIconSize);
@@ -8713,6 +8734,18 @@ textarea::-moz-focus-inner {
 .Popover_popoverScroll[data-overlay-portal-layer=drawerInModal] {
   z-index: var(--prime-sys-elevation-zIndex-popoverInDrawerInModal);
 }
+.Popover_popoverScroll[data-overlay-portal-layer=page][data-overlay-stack=above-dropdown] {
+  z-index: var(--prime-sys-elevation-zIndex-tooltip);
+}
+.Popover_popoverScroll[data-overlay-portal-layer=drawer][data-overlay-stack=above-dropdown] {
+  z-index: var(--prime-sys-elevation-zIndex-tooltipInDrawer);
+}
+.Popover_popoverScroll[data-overlay-portal-layer=modal][data-overlay-stack=above-dropdown] {
+  z-index: var(--prime-sys-elevation-zIndex-tooltipInModal);
+}
+.Popover_popoverScroll[data-overlay-portal-layer=drawerInModal][data-overlay-stack=above-dropdown] {
+  z-index: var(--prime-sys-elevation-zIndex-tooltipInDrawerInModal);
+}
 .Popover_popoverScroll[data-size=s] {
   --dd-pad: calc((var(--prime-sys-spacing-x2) + var(--prime-sys-spacing-x3)) / 2);
   --dd-min-w: var(--prime-sys-unit-9p5rem);
@@ -9911,6 +9944,468 @@ textarea::-moz-focus-inner {
   flex-shrink: 0;
 }
 
+/* src/components/tag-select/TagSelect.module.css */
+.TagSelect_control {
+  --ts-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-m-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-m-gap);
+  --ts-chevron: var(--prime-sys-size-control-m-icon);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--ts-gap);
+  width: 100%;
+  min-width: 0;
+  padding-inline-start: var(--ts-pad-x);
+  padding-inline-end: calc(var(--ts-pad-x) + var(--ts-chevron) + var(--ts-gap));
+  padding-block: var(--ts-pad-y);
+  border-radius: var(--prime-sys-size-control-m-radius);
+  border: var(--prime-sys-border-width-control) solid var(--prime-sys-color-field-border);
+  background: var(--prime-sys-color-field-bg);
+  color: var(--prime-sys-color-field-text);
+  font-size: var(--prime-sys-size-control-m-text);
+  font-family: inherit;
+  box-shadow: var(--prime-sys-elevation-shadow-surface);
+  cursor: text;
+  text-align: left;
+  outline: none;
+  transition:
+    border-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
+    box-shadow var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
+    background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.TagSelect_control[data-size=s] {
+  --ts-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-s-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-s-gap);
+  --ts-chevron: var(--prime-sys-size-control-s-icon);
+  border-radius: var(--prime-sys-size-control-s-radius);
+  font-size: var(--prime-sys-size-control-s-text);
+}
+.TagSelect_control[data-size=m] {
+  --ts-gap: var(--prime-sys-size-control-m-gap);
+  --ts-chevron: var(--prime-sys-size-control-m-icon);
+  border-radius: var(--prime-sys-size-control-m-radius);
+  font-size: var(--prime-sys-size-control-m-text);
+}
+.TagSelect_control[data-size=l] {
+  --ts-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-l-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-l-gap);
+  --ts-chevron: var(--prime-sys-size-control-l-icon);
+  border-radius: var(--prime-sys-size-control-l-radius);
+  font-size: var(--prime-sys-size-control-l-text);
+}
+.TagSelect_control[data-size=xl] {
+  --ts-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-xl-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-xl-gap);
+  --ts-chevron: var(--prime-sys-size-control-xl-icon);
+  border-radius: var(--prime-sys-size-control-xl-radius);
+  font-size: var(--prime-sys-size-control-xl-text);
+}
+.TagSelect_control[data-empty=true] {
+  min-height: var(--prime-sys-size-control-m-height);
+}
+.TagSelect_control[data-empty=true][data-size=s] {
+  min-height: var(--prime-sys-size-control-s-height);
+}
+.TagSelect_control[data-empty=true][data-size=m] {
+  min-height: var(--prime-sys-size-control-m-height);
+}
+.TagSelect_control[data-empty=true][data-size=l] {
+  min-height: var(--prime-sys-size-control-l-height);
+}
+.TagSelect_control[data-empty=true][data-size=xl] {
+  min-height: var(--prime-sys-size-control-xl-height);
+}
+.TagSelect_control:hover:not([data-disabled=true]) {
+  border-color: var(--prime-sys-color-field-borderHover);
+  background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
+  box-shadow: none;
+}
+.TagSelect_control:focus-within:not([data-disabled=true]) {
+  border-color: var(--prime-sys-color-field-borderFocus);
+  box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
+}
+.TagSelect_control[data-has-error=true] {
+  border-color: var(--prime-sys-color-field-borderError);
+}
+.TagSelect_control[data-has-error=true]:focus-within {
+  box-shadow: var(--prime-sys-elevation-shadow-errorFocus);
+}
+.TagSelect_control[data-disabled=true] {
+  background: var(--prime-sys-color-surface-accentSoft);
+  border-color: transparent;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: var(--prime-sys-color-content-disabled);
+}
+.TagSelect_chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ts-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+.TagSelect_chip {
+  display: inline-flex;
+  max-width: 100%;
+}
+.TagSelect_chipBadge {
+  max-width: 100%;
+  min-width: 0;
+}
+.TagSelect_chipLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.TagSelect_chipRemove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--prime-sys-shape-radius-s);
+  background: transparent;
+  color: inherit;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: opacity var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_chipRemove:hover:not(:disabled) {
+  opacity: 1;
+}
+.TagSelect_chipRemove:focus-visible {
+  outline: none;
+  box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
+}
+.TagSelect_chipRemove:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.TagSelect_removeIcon {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+}
+.TagSelect_input {
+  flex: 1 1 4rem;
+  min-width: 2rem;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: var(--prime-sys-typography-body-lineHeight);
+  outline: none;
+}
+.TagSelect_inputCollapsed {
+  flex: 0 1 0;
+  min-width: 0;
+  width: 0;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  line-height: 0;
+  font-size: 0;
+}
+.TagSelect_input::placeholder {
+  color: var(--prime-sys-color-field-placeholder);
+}
+.TagSelect_control[data-disabled=true] .TagSelect_input::placeholder {
+  color: var(--prime-sys-color-content-disabled);
+}
+.TagSelect_chevronSlot {
+  position: absolute;
+  top: 50%;
+  right: var(--ts-pad-x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ts-chevron);
+  min-width: var(--ts-chevron);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.TagSelect_chevron {
+  display: block;
+  flex-shrink: 0;
+  width: var(--prime-sys-unit-0p45rem);
+  height: var(--prime-sys-unit-0p45rem);
+  border-right: var(--prime-sys-unit-1p5px) solid currentColor;
+  border-bottom: var(--prime-sys-unit-1p5px) solid currentColor;
+  transform: rotate(45deg) translateY(-10%);
+  opacity: 0.6;
+  transition: transform var(--prime-sys-motion-medium) var(--prime-sys-motion-standard), opacity var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.TagSelect_control[data-open=true] .TagSelect_chevron {
+  transform: rotate(225deg) translateY(-10%);
+}
+.TagSelect_panelInner {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+}
+.TagSelect_hint {
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2) var(--prime-sys-spacing-x1);
+}
+.TagSelect_optionRow {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x2);
+  width: 100%;
+  min-width: 0;
+  cursor: pointer;
+  border: none;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2);
+  border-radius: var(--prime-sys-shape-radius-m);
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_optionRow:hover:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_optionRow[data-highlighted=true]:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_optionRow[data-disabled=true] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.TagSelect_createRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-x2);
+  width: 100%;
+  min-width: 0;
+  cursor: pointer;
+  border: none;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2);
+  border-radius: var(--prime-sys-shape-radius-m);
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_createRow:hover:not([data-disabled=true]),
+.TagSelect_createRow[data-highlighted=true]:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_createLabel {
+  flex-shrink: 0;
+}
+.TagSelect_optionRowWrap {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x1);
+  width: 100%;
+  min-width: 0;
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2);
+  border-radius: var(--prime-sys-shape-radius-m);
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_optionRowWrap:hover:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_optionRowWrap[data-highlighted=true]:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_optionRowSelect {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+.TagSelect_optionRowSelect:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.TagSelect_optionMenuTrigger {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: var(--prime-sys-spacing-x1);
+  border: none;
+  border-radius: var(--prime-sys-shape-radius-s);
+  background: transparent;
+  color: var(--prime-sys-color-content-secondary);
+  cursor: pointer;
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard), color var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_optionMenuTrigger:hover:not(:disabled) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+  color: var(--prime-sys-color-content-primary);
+}
+.TagSelect_optionMenuTrigger:focus-visible {
+  outline: none;
+  box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
+}
+.TagSelect_optionMenuTrigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.TagSelect_optionMenuDots {
+  display: block;
+  width: var(--prime-sys-size-control-s-icon);
+  height: var(--prime-sys-size-control-s-icon);
+}
+.TagSelect_managePopoverSurface[data-size=s] {
+  --dd-pad: var(--prime-sys-spacing-x2);
+  min-width: min(var(--prime-sys-unit-9p5rem), 100vw);
+}
+.TagSelect_managePopoverShell {
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-size-control-s-text);
+  line-height: var(--prime-sys-typography-body-lineHeight);
+}
+.TagSelect_manageDelete {
+  justify-content: flex-start;
+  width: 100%;
+  font-size: inherit;
+}
+.TagSelect_manageDeleteIcon {
+  display: block;
+  flex-shrink: 0;
+  width: var(--prime-sys-size-control-s-icon);
+  height: var(--prime-sys-size-control-s-icon);
+}
+.TagSelect_manageSeparator {
+  width: 100%;
+  height: var(--prime-sys-border-width-control);
+  margin: 0;
+  border: none;
+  background: var(--prime-sys-color-border-separator);
+}
+.TagSelect_manageColorsHeading {
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--prime-sys-size-control-s-buttonPaddingX);
+  font-size: inherit;
+  font-weight: var(--prime-sys-typography-weight-regular);
+  color: var(--prime-sys-color-content-muted);
+}
+.TagSelect_manageColorList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  max-height: min(12rem, 45vh);
+  overflow-y: auto;
+}
+.TagSelect_manageColorRow {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x2);
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding-block: var(--prime-sys-spacing-x1);
+  padding-inline: var(--prime-sys-size-control-s-buttonPaddingX);
+  border: none;
+  border-radius: var(--prime-sys-shape-radius-s);
+  cursor: pointer;
+  background: none;
+  text-align: left;
+  font-size: inherit;
+  line-height: var(--prime-sys-typography-body-lineHeight);
+  color: inherit;
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_manageColorRow:hover {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_manageColorSwatch {
+  flex-shrink: 0;
+  display: block;
+  box-sizing: border-box;
+  width: var(--prime-sys-unit-0p75rem);
+  height: var(--prime-sys-unit-0p75rem);
+  border-radius: var(--prime-sys-shape-radius-s);
+}
+.TagSelect_manageColorSwatch[data-color=gray] {
+  background: var(--prime-sys-color-badge-grayFilled-background);
+}
+.TagSelect_manageColorSwatch[data-color=red] {
+  background: var(--prime-sys-color-status-error-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=blue] {
+  background: var(--prime-sys-color-status-information-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=green] {
+  background: var(--prime-sys-color-status-success-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=orange] {
+  background: var(--prime-sys-color-status-warning-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=yellow] {
+  background: var(--prime-sys-color-status-away-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=purple] {
+  background: var(--prime-sys-color-status-feature-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=sky] {
+  background: var(--prime-sys-color-status-verified-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=pink] {
+  background: var(--prime-sys-color-badge-pink-backgroundEmphasis);
+}
+.TagSelect_manageColorSwatch[data-color=teal] {
+  background: var(--prime-sys-color-badge-teal-backgroundEmphasis);
+}
+.TagSelect_manageColorLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: inherit;
+}
+.TagSelect_manageCheck {
+  flex-shrink: 0;
+  width: var(--prime-sys-unit-0p75rem);
+  height: var(--prime-sys-unit-0p75rem);
+  color: var(--prime-sys-color-content-primary);
+}
+.TagSelect_manageCheckPlaceholder {
+  flex-shrink: 0;
+  width: var(--prime-sys-unit-0p75rem);
+  height: var(--prime-sys-unit-0p75rem);
+}
+
 /* src/components/textarea/Textarea.module.css */
 .Textarea_field {
   --prime-textarea-body-size: var(--prime-sys-size-control-m-text);