@uniai-fe/uds-primitives 0.3.18 → 0.3.20

package/dist/styles.css

@@ -7,7 +7,7 @@
   --theme-badge-radius: var(--theme-radius-medium-1, 6px);
   --theme-badge-font-family: var(--font-caption-medium-family, inherit);
   --theme-badge-font-size: var(--font-caption-medium-size, 11px);
-  --theme-badge-font-weight: var(--font-caption-medium-weight, 400);
+  --theme-badge-font-weight: 400;
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);
@@ -188,6 +188,7 @@
   --theme-checkbox-surface-selected-disabled: rgba(26, 106, 255, 0.28);
   --theme-checkbox-label-color: var(--color-label-strong);
   --theme-checkbox-label-disabled: var(--color-label-disabled);
+  --theme-checkbox-label-font-weight: 400;
   --theme-checkbox-helper-color: var(--color-label-neutral);
   --theme-checkbox-helper-disabled: var(--color-label-disabled);
   --theme-checkbox-icon-default: transparent;
@@ -254,10 +255,26 @@
   --dropdown-panel-padding: var(--spacing-padding-3);
   --dropdown-panel-gap: var(--spacing-gap-2);
   --dropdown-panel-max-height: 32rem;
+  --dropdown-panel-radius-selected: var(--dropdown-panel-radius);
+  --dropdown-panel-shadow-selected: var(--dropdown-panel-shadow);
+  --dropdown-panel-padding-selected: var(--dropdown-panel-padding);
+  --dropdown-panel-gap-selected: var(--dropdown-panel-gap);
+  --dropdown-panel-radius-xsmall: var(--theme-radius-medium-2);
+  --dropdown-panel-shadow-xsmall: 2px 2px 8px rgba(0, 0, 0, 0.05);
+  --dropdown-panel-padding-xsmall: var(--spacing-padding-4)
+  var(--spacing-padding-3);
+  --dropdown-panel-gap-xsmall: var(--spacing-gap-2);
   --dropdown-option-radius: var(--theme-radius-medium-1);
   --dropdown-option-gap-inline: var(--spacing-gap-3);
   --dropdown-option-padding-inline: var(--spacing-padding-6);
   --dropdown-option-padding-block: var(--spacing-padding-2);
+  --dropdown-option-radius-selected: var(--dropdown-option-radius);
+  --dropdown-option-padding-inline-selected: var(
+  --dropdown-option-padding-inline
+  );
+  --dropdown-option-padding-block-selected: var(
+  --dropdown-option-padding-block
+  );
   --dropdown-option-color: var(--color-label-standard);
   --dropdown-option-color-hover: var(--color-label-strong);
   --dropdown-option-color-selected: var(--color-primary-default);
@@ -268,6 +285,9 @@
   --dropdown-text-small-size: 15px;
   --dropdown-text-small-line-height: 24px;
   --dropdown-text-small-letter-spacing: 0;
+  --dropdown-text-xsmall-size: 12px;
+  --dropdown-text-xsmall-line-height: 18px;
+  --dropdown-text-xsmall-letter-spacing: 0;
   --dropdown-text-medium-size: 16px;
   --dropdown-text-medium-line-height: 24px;
   --dropdown-text-medium-letter-spacing: 0;
@@ -279,9 +299,15 @@
   --dropdown-description-color: var(--color-label-neutral);
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
+  --dropdown-option-height-selected: var(--dropdown-option-height-medium);
+  --dropdown-option-height-xsmall: 24px;
   --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
   --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
   --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
+  --dropdown-option-padding-block-xsmall: 0px;
+  --dropdown-option-radius-xsmall: 4px;
+  --dropdown-text-weight-selected-xsmall: var(--dropdown-text-weight);
   --form-field-width: auto;
   --form-field-flex: 0 0 auto;
   --form-field-gap-x: var(--spacing-gap-5, 12px);
@@ -439,6 +465,7 @@
   --theme-radio-disabled-selected-fill: var(--color-primary-default);
   --theme-radio-label-color: var(--color-label-strong);
   --theme-radio-label-disabled: var(--color-label-disabled);
+  --theme-radio-label-font-weight: 400;
   --theme-radio-helper-color: var(--color-label-neutral);
   --theme-radio-helper-disabled: var(--color-label-disabled);
   --theme-radio-card-background: var(--color-common-100);
@@ -456,12 +483,18 @@
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);
+  --select-primary-height-xsmall: 24px;
   --select-primary-radius-small: var(--input-default-radius-base);
   --select-primary-radius-medium: var(--input-default-radius-base);
   --select-primary-radius-large: var(--input-default-radius-base);
+  --select-primary-radius-xsmall: var(--theme-radius-medium-2);
   --select-primary-padding-inline: var(--input-default-padding-inline);
   --select-primary-padding-block: var(--input-default-padding-block);
   --select-primary-gap-inline: var(--input-default-gap);
+  --select-primary-padding-inline-start-xsmall: var(--spacing-padding-4);
+  --select-primary-padding-inline-end-xsmall: var(--spacing-padding-3);
+  --select-primary-padding-block-xsmall: var(--spacing-padding-2);
+  --select-primary-gap-inline-xsmall: var(--spacing-gap-1);
   --select-primary-border-width-default: var(--input-border-width-default);
   --select-primary-border-width-focus: var(--input-border-width-emphasis);
   --select-secondary-radius: var(--theme-radius-medium-1);
@@ -515,6 +548,10 @@
   --select-text-small-line-height: var(--input-text-small-line-height);
   --select-text-small-letter-spacing: var(--input-text-small-letter-spacing);
   --select-text-small-weight: var(--input-text-small-weight);
+  --select-text-xsmall-size: 12px;
+  --select-text-xsmall-line-height: 18px;
+  --select-text-xsmall-letter-spacing: 0;
+  --select-text-xsmall-weight: 400;
   --select-text-medium-size: var(--input-text-medium-size);
   --select-text-medium-line-height: var(--input-text-medium-line-height);
   --select-text-medium-letter-spacing: var(--input-text-medium-letter-spacing);
@@ -523,6 +560,7 @@
   --select-text-large-line-height: var(--input-text-large-line-height);
   --select-text-large-letter-spacing: var(--input-text-large-letter-spacing);
   --select-text-large-weight: var(--input-text-large-weight);
+  --select-icon-size-xsmall: 1.4rem;
   --select-icon-size-small: 1.6rem;
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;
@@ -1723,17 +1761,17 @@
   cursor: not-allowed;
 }
 
-.checkbox-label-text {
-  font-weight: var(--font-body-medium-weight);
+.checkbox-label {
+  font-weight: var(--theme-checkbox-label-font-weight);
   user-select: none;
 }
 
-.checkbox-field[data-size=medium] .checkbox-label-text {
+.checkbox-field[data-size=medium] .checkbox-label {
   font-size: var(--font-body-xsmall-size);
   line-height: var(--font-body-xsmall-line-height);
 }
 
-.checkbox-field[data-size=large] .checkbox-label-text {
+.checkbox-field[data-size=large] .checkbox-label {
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
 }
@@ -1754,6 +1792,7 @@
 
 
 .chip {
+  --chip-current-height: var(--theme-chip-height);
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
@@ -1762,7 +1801,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--chip-gap);
-  height: var(--theme-chip-height);
+  height: var(--chip-current-height);
   padding-left: var(--theme-chip-padding-horizontal);
   padding-right: var(--theme-chip-padding-horizontal);
   padding-block: 0;
@@ -1796,35 +1835,47 @@ figure.chip {
   outline-offset: 2px;
 }
 
-.chip:where([data-kind=filter]),
-.chip:where([data-kind=filter-rounded]) {
+.chip:where([data-style=filter][data-fill=solid]) {
   --chip-bg: var(--color-surface-standard);
   --chip-label-color: var(--color-label-neutral);
   --chip-border-color: transparent;
 }
 
-.chip:where([data-kind=filter][data-selected=true]),
-.chip:where([data-kind=filter-rounded][data-selected=true]) {
+.chip:where([data-style=filter][data-fill=outlined]) {
+  --chip-bg: var(--color-common-100);
+  --chip-label-color: var(--color-label-neutral);
+  --chip-border-color: var(--color-border-standard-cool-gray);
+}
+
+.chip:where([data-style=filter][data-selected=true]) {
   --chip-bg: var(--color-surface-heavy);
   --chip-label-color: var(--color-common-100);
+  --chip-border-color: transparent;
 }
 
-.chip:where([data-kind=filter-rounded]) {
-  border-radius: var(--theme-chip-rounded-radius);
+.chip:where([data-style][data-rounded=true]) {
+  border-radius: calc(var(--chip-current-height) / 2);
 }
 
-.chip:where([data-kind=assist]) {
+.chip:where([data-style=assist][data-fill=solid]) {
   --chip-bg: var(--color-surface-static-neutral);
   --chip-label-color: var(--color-label-strong);
   --chip-gap: var(--theme-chip-assist-gap);
   --chip-border-color: transparent;
 }
 
-.chip:where([data-kind=assist][data-selected=true]) {
+.chip:where([data-style=assist][data-fill=outlined]) {
+  --chip-bg: var(--color-common-100);
+  --chip-label-color: var(--color-label-strong);
+  --chip-gap: var(--theme-chip-assist-gap);
+  --chip-border-color: var(--color-border-standard-cool-gray);
+}
+
+.chip:where([data-style=assist][data-selected=true]) {
   --chip-label-color: var(--color-primary-default);
 }
 
-.chip:where([data-kind=input]) {
+.chip:where([data-style=input]) {
   --chip-gap: var(--theme-chip-input-gap);
   --chip-bg: var(--color-common-100);
   --chip-label-color: var(--color-label-standard);
@@ -1833,12 +1884,13 @@ figure.chip {
   padding-right: var(--theme-chip-input-padding-right);
 }
 
-.chip:where([data-kind=input][data-removable=false]) {
+.chip:where([data-style=input][data-removable=false]) {
   padding-left: var(--theme-chip-padding-horizontal);
   padding-right: var(--theme-chip-padding-horizontal);
 }
 
 .chip:where([data-size=table]) {
+  --chip-current-height: var(--theme-chip-height-table);
   height: var(--theme-chip-height-table);
   padding-left: var(--theme-chip-padding-horizontal-table);
   padding-right: var(--theme-chip-padding-horizontal-table);
@@ -1854,22 +1906,22 @@ figure.chip {
   line-height: var(--theme-chip-line-height-table);
 }
 
-.chip:where([data-size=table][data-kind=input]) {
+.chip:where([data-size=table][data-style=input]) {
   padding-left: var(--theme-chip-padding-left-table);
   padding-right: var(--theme-chip-padding-right-table);
 }
 
-.chip:where([data-size=table][data-kind=input][data-removable=false]) {
+.chip:where([data-size=table][data-style=input][data-removable=false]) {
   padding-left: var(--theme-chip-padding-horizontal-table);
   padding-right: var(--theme-chip-padding-horizontal-table);
 }
 
-.chip:where([data-size=table][data-kind=input]) .chip-remove-button {
+.chip:where([data-size=table][data-style=input]) .chip-remove-button {
   width: fit-content;
   height: fit-content;
 }
 
-.chip:where([data-kind=input][data-selected=true]) {
+.chip:where([data-style=input][data-selected=true]) {
   --chip-border-color: var(--color-border-standard-blue);
 }
 
@@ -1916,6 +1968,20 @@ figure.chip {
   height: 100%;
 }
 
+.chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip-list-item {
+  display: flex;
+}
+
 /* Divider 토큰도 전역 :root 범위에 선언한다. */
 
 
@@ -2132,39 +2198,60 @@ figure.chip {
 .dropdown-panel {
   display: flex;
   flex-direction: column;
-  gap: var(--dropdown-panel-gap);
-  padding: var(--dropdown-panel-padding);
-  border-radius: var(--dropdown-panel-radius);
+  gap: var(--dropdown-panel-gap-selected);
+  padding: var(--dropdown-panel-padding-selected);
+  border-radius: var(--dropdown-panel-radius-selected);
   border: 1px solid var(--dropdown-panel-border-color);
   background-color: var(--dropdown-panel-background);
-  box-shadow: var(--dropdown-panel-shadow);
+  box-shadow: var(--dropdown-panel-shadow-selected);
   max-height: var(--dropdown-panel-max-height);
   overflow-y: auto;
 }
 
+.dropdown-panel-xsmall {
+  --dropdown-option-height-selected: var(--dropdown-option-height-xsmall);
+  --dropdown-text-size-selected: var(--dropdown-text-xsmall-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-xsmall-line-height);
+  --dropdown-text-letter-spacing-selected: var(
+    --dropdown-text-xsmall-letter-spacing
+  );
+  --dropdown-option-padding-inline-selected: var(
+    --dropdown-option-padding-inline-xsmall
+  );
+  --dropdown-option-padding-block-selected: var(
+    --dropdown-option-padding-block-xsmall
+  );
+  --dropdown-option-radius-selected: var(--dropdown-option-radius-xsmall);
+  --dropdown-panel-padding-selected: var(--dropdown-panel-padding-xsmall);
+  --dropdown-panel-gap-selected: var(--dropdown-panel-gap-xsmall);
+  --dropdown-panel-radius-selected: var(--dropdown-panel-radius-xsmall);
+  --dropdown-panel-shadow-selected: var(--dropdown-panel-shadow-xsmall);
+  --dropdown-text-weight-selected: var(--dropdown-text-weight-selected-xsmall);
+}
+
 .dropdown-panel-small {
-  --dropdown-option-height-current: var(--dropdown-option-height-small);
-  --dropdown-text-size-current: var(--dropdown-text-small-size);
-  --dropdown-text-line-height-current: var(--dropdown-text-small-line-height);
-  --dropdown-text-letter-spacing-current: var(
+  --dropdown-option-height-selected: var(--dropdown-option-height-small);
+  --dropdown-text-size-selected: var(--dropdown-text-small-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-small-line-height);
+  --dropdown-text-letter-spacing-selected: var(
     --dropdown-text-small-letter-spacing
   );
 }
 
 .dropdown-panel-medium {
-  --dropdown-option-height-current: var(--dropdown-option-height-medium);
-  --dropdown-text-size-current: var(--dropdown-text-medium-size);
-  --dropdown-text-line-height-current: var(--dropdown-text-medium-line-height);
-  --dropdown-text-letter-spacing-current: var(
+  --dropdown-option-height-selected: var(--dropdown-option-height-medium);
+  --dropdown-text-size-selected: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-selected: var(
     --dropdown-text-medium-letter-spacing
   );
 }
 
 .dropdown-panel-large {
-  --dropdown-option-height-current: var(--dropdown-option-height-large);
-  --dropdown-text-size-current: var(--dropdown-text-large-size);
-  --dropdown-text-line-height-current: var(--dropdown-text-large-line-height);
-  --dropdown-text-letter-spacing-current: var(
+  --dropdown-option-height-selected: var(--dropdown-option-height-large);
+  --dropdown-text-size-selected: var(--dropdown-text-large-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-large-line-height);
+  --dropdown-text-letter-spacing-selected: var(
     --dropdown-text-large-letter-spacing
   );
 }
@@ -2191,9 +2278,9 @@ figure.chip {
   align-items: center;
   gap: var(--dropdown-option-gap-inline);
   width: 100%;
-  min-height: var(--dropdown-option-height-current, var(--dropdown-option-height-medium));
-  padding: var(--dropdown-option-padding-block) var(--dropdown-option-padding-inline);
-  border-radius: var(--dropdown-option-radius);
+  min-height: var(--dropdown-option-height-selected, var(--dropdown-option-height-medium));
+  padding: var(--dropdown-option-padding-block-selected) var(--dropdown-option-padding-inline-selected);
+  border-radius: var(--dropdown-option-radius-selected);
   background-color: transparent;
   color: var(--dropdown-option-color);
   cursor: pointer;
@@ -2245,9 +2332,9 @@ figure.chip {
   align-items: center;
   min-width: 0;
   color: inherit;
-  font-size: var(--dropdown-text-size-current, var(--dropdown-text-medium-size));
-  line-height: var(--dropdown-text-line-height-current, var(--dropdown-text-medium-line-height));
-  letter-spacing: var(--dropdown-text-letter-spacing-current, var(--dropdown-text-medium-letter-spacing));
+  font-size: var(--dropdown-text-size-selected, var(--dropdown-text-medium-size));
+  line-height: var(--dropdown-text-line-height-selected, var(--dropdown-text-medium-line-height));
+  letter-spacing: var(--dropdown-text-letter-spacing-selected, var(--dropdown-text-medium-letter-spacing));
   font-weight: var(--dropdown-text-weight);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3396,17 +3483,17 @@ figure.chip {
   cursor: not-allowed;
 }
 
-.radio-label-text {
-  font-weight: var(--font-body-medium-weight);
+.radio-label {
+  font-weight: var(--theme-radio-label-font-weight);
   user-select: none;
 }
 
-.radio-field[data-size=medium] .radio-label-text {
+.radio-field[data-size=medium] .radio-label {
   font-size: var(--font-body-xsmall-size);
   line-height: var(--font-body-xsmall-line-height);
 }
 
-.radio-field[data-size=large] .radio-label-text {
+.radio-field[data-size=large] .radio-label {
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
 }
@@ -3537,7 +3624,7 @@ figure.chip {
   --segmented-item-padding-x: 22px;
   --segmented-item-padding-y: 4px;
   --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
-  --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
+  --segmented-item-font-weight: 500;
   --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
   position: relative;
   display: block;
@@ -3618,7 +3705,7 @@ figure.chip {
   outline-offset: 2px;
 }
 
-.segmented-control-button-label {
+.segmented-control-label {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3630,7 +3717,7 @@ figure.chip {
   transition: color 0.2s ease;
 }
 
-.segmented-control-button:where([data-state=on]) .segmented-control-button-label {
+.segmented-control-button:where([data-state=on]) .segmented-control-label {
   color: var(--segmented-label-active-color);
 }
 
@@ -3646,12 +3733,12 @@ figure.chip {
   min-width: 0;
 }
 
-.select[data-width=auto] {
+.select:where([data-width=auto]) {
   --select-width: auto;
   --select-flex: 0 1 auto;
 }
 
-.select[data-width=fill] {
+.select:where([data-width=fill]) {
   --select-width: auto;
   --select-flex: 1 1 0%;
 }
@@ -3662,12 +3749,12 @@ figure.chip {
   --select-flex: 0 0 100%;
 }
 
-.select[data-width=fit] {
+.select:where([data-width=fit]) {
   --select-width: fit-content;
   --select-flex: 0 0 auto;
 }
 
-.select[data-width=custom] {
+.select:where([data-width=custom]) {
   --select-flex: 0 0 auto;
 }
 
@@ -3686,20 +3773,26 @@ figure.chip {
   transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
   text-align: left;
 }
-.select-button[data-size=small] {
+.select-button:where([data-size=small]) {
   min-height: var(--select-primary-height-small);
   border-radius: var(--select-primary-radius-small);
 }
-.select-button[data-size=large] {
+.select-button:where([data-size=xsmall]) {
+  min-height: var(--select-primary-height-xsmall);
+  border-radius: var(--select-primary-radius-xsmall);
+  gap: var(--select-primary-gap-inline-xsmall);
+  padding: var(--select-primary-padding-block-xsmall) var(--select-primary-padding-inline-end-xsmall) var(--select-primary-padding-block-xsmall) var(--select-primary-padding-inline-start-xsmall);
+}
+.select-button:where([data-size=large]) {
   min-height: var(--select-primary-height-large);
   border-radius: var(--select-primary-radius-large);
 }
-.select-button[data-multiple=true] {
+.select-button:where([data-multiple=true]) {
   align-items: center;
   flex-wrap: nowrap;
   overflow: hidden;
 }
-.select-button[data-priority=secondary] {
+.select-button:where([data-priority=secondary]) {
   width: fit-content;
   max-width: 100%;
   min-height: auto;
@@ -3712,87 +3805,87 @@ figure.chip {
   --select-icon-fill: currentColor;
   transition: background-color 150ms ease, color 150ms ease;
 }
-.select-button[data-priority=secondary]:hover:not([data-state=disabled]) {
+.select-button:where([data-priority=secondary]):where(:hover):where(:not([data-state=disabled])) {
   background-color: var(--select-color-surface-secondary-hover);
 }
-.select-button[data-priority=secondary]:active:not([data-state=disabled]) {
+.select-button:where([data-priority=secondary]):where(:active):where(:not([data-state=disabled])) {
   background-color: var(--select-color-surface-secondary-active);
 }
-.select-button[data-priority=secondary][data-state=focused], .select-button[data-priority=secondary][data-open=true] {
+.select-button:where([data-priority=secondary]):where([data-state=focused]), .select-button:where([data-priority=secondary]):where([data-open=true]), .select-button:where([data-priority=secondary]):where(:focus-within) {
   background-color: var(--select-color-surface-secondary-hover);
 }
-.select-button[data-priority=secondary][data-state=focused]::after, .select-button[data-priority=secondary][data-open=true]::after {
+.select-button:where([data-priority=secondary]):where([data-state=focused])::after, .select-button:where([data-priority=secondary]):where([data-open=true])::after, .select-button:where([data-priority=secondary]):where(:focus-within)::after {
   height: var(--select-secondary-underline-width-focus);
   background-color: var(--select-color-border-secondary-focused);
 }
-.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
+.select-button:where([data-priority=secondary]):where([data-state=disabled]), .select-button:where([data-priority=secondary]):where(:disabled) {
   color: var(--select-secondary-color-text-disabled);
   cursor: not-allowed;
 }
-.select-button[data-priority=table] {
+.select-button:where([data-priority=table]) {
   border-radius: var(--select-table-radius);
   border-color: var(--select-table-border-default-color);
   background-color: var(--select-table-surface-color);
   --select-icon-fill: var(--select-table-icon-color-default);
 }
-.select-button:not([data-priority=secondary])[data-state=focused], .select-button:not([data-priority=secondary])[data-open=true], .select-button:not([data-priority=secondary]):focus-visible {
+.select-button:where(:not([data-priority=secondary])):where([data-state=focused]), .select-button:where(:not([data-priority=secondary])):where([data-open=true]), .select-button:where(:not([data-priority=secondary])):focus-visible, .select-button:where(:not([data-priority=secondary])):focus-within {
   border-color: var(--select-primary-color-border-focused);
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-icon-color-focused);
 }
-.select-button[data-priority=table][data-state=focused], .select-button[data-priority=table][data-open=true], .select-button[data-priority=table]:focus-visible {
+.select-button:where([data-priority=table]):where([data-state=focused]), .select-button:where([data-priority=table]):where([data-open=true]), .select-button:where([data-priority=table]):focus-visible, .select-button:where([data-priority=table]):focus-within {
   border-color: var(--select-table-border-focus-color);
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-table-icon-color-focused);
 }
-.select-button:not([data-priority=secondary])[data-state=error] {
+.select-button:where(:not([data-priority=secondary])):where([data-state=error]) {
   border-color: var(--select-primary-color-border-error);
   --select-icon-fill: var(--select-icon-color-default);
 }
-.select-button[data-priority=secondary][data-state=error]::after {
+.select-button:where([data-priority=secondary]):where([data-state=error])::after {
   height: var(--select-secondary-underline-width-focus);
   background-color: var(--select-color-border-secondary-error);
 }
-.select-button[data-priority=table][data-state=error] {
+.select-button:where([data-priority=table]):where([data-state=error]) {
   border-color: var(--select-table-border-error-color);
   --select-icon-fill: var(--select-table-icon-color-default);
 }
-.select-button:not([data-priority=secondary])[data-readonly=true] {
+.select-button:where(:not([data-priority=secondary])):where([data-readonly=true]) {
   border-color: var(--select-primary-color-border-disabled);
   background-color: var(--select-primary-color-surface-disabled);
   cursor: default;
   --select-icon-fill: var(--select-icon-color-disabled);
 }
-.select-button[data-priority=secondary][data-readonly=true] {
+.select-button:where([data-priority=secondary]):where([data-readonly=true]) {
   border-color: transparent;
   background-color: var(--select-color-surface-secondary-disabled);
   cursor: default;
 }
-.select-button[data-priority=secondary][data-readonly=true]::after {
+.select-button:where([data-priority=secondary]):where([data-readonly=true])::after {
   background-color: var(--select-color-border-secondary-disabled);
   height: var(--select-secondary-underline-width-default);
 }
-.select-button[data-priority=table][data-readonly=true] {
+.select-button:where([data-priority=table]):where([data-readonly=true]) {
   border-color: var(--select-table-border-readonly-color);
   background-color: var(--select-table-surface-readonly-color);
   cursor: not-allowed;
   --select-icon-fill: var(--select-table-icon-color-disabled);
 }
-.select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
+.select-button:where(:not([data-priority=secondary])):where([data-state=disabled]), .select-button:where(:not([data-priority=secondary])):disabled {
   border-color: var(--select-primary-color-border-disabled);
   background-color: var(--select-primary-color-surface-disabled);
   cursor: not-allowed;
   --select-icon-fill: var(--select-icon-color-disabled);
 }
-.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
+.select-button:where([data-priority=secondary]):where([data-state=disabled]), .select-button:where([data-priority=secondary]):disabled {
   border-color: transparent;
   background-color: var(--select-color-surface-secondary-disabled);
 }
-.select-button[data-priority=secondary][data-state=disabled]::after, .select-button[data-priority=secondary]:disabled::after {
+.select-button:where([data-priority=secondary]):where([data-state=disabled])::after, .select-button:where([data-priority=secondary]):disabled::after {
   background-color: var(--select-color-border-secondary-disabled);
   height: var(--select-secondary-underline-width-default);
 }
-.select-button[data-priority=table][data-state=disabled], .select-button[data-priority=table]:disabled {
+.select-button:where([data-priority=table]):where([data-state=disabled]), .select-button:where([data-priority=table]):disabled {
   border-color: var(--select-table-border-disabled-color);
   background-color: var(--select-table-surface-disabled-color);
   cursor: not-allowed;
@@ -3807,106 +3900,123 @@ figure.chip {
   gap: var(--select-value-gap);
 }
 
-.select-label {
-  flex: 1 1 auto;
+.select-input-label {
+  width: 100%;
   min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
   font-family: var(--select-text-font-family);
   font-size: var(--select-text-medium-size);
   font-weight: var(--select-text-medium-weight);
   line-height: var(--select-text-medium-line-height);
   letter-spacing: var(--select-text-medium-letter-spacing);
   color: var(--select-primary-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  caret-color: var(--select-primary-color-text);
+  cursor: default;
 }
-.select-button[data-priority=secondary] .select-label {
-  color: var(--select-secondary-color-text);
+.select-input-label:where(:not([readonly])) {
+  cursor: text;
 }
-.select-button[data-priority=table] .select-label {
-  color: var(--select-table-color-text);
+.select-input-label::placeholder {
+  color: var(--select-primary-color-placeholder);
 }
-.select-button[data-priority=table][data-readonly=true] .select-label {
-  color: var(--select-table-color-text-readonly);
+.select-button:where([data-priority=secondary]) .select-input-label {
+  color: var(--select-secondary-color-text);
+  caret-color: var(--select-secondary-color-text);
 }
-.select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
-  color: var(--select-primary-color-text-focused);
+.select-button:where([data-priority=table]) .select-input-label {
+  color: var(--select-table-color-text);
+  caret-color: var(--select-table-color-text);
 }
-.select-button[data-state=disabled] .select-label {
+.select-button:where([data-state=disabled]) .select-input-label {
   color: var(--select-primary-color-text-disabled);
+  caret-color: var(--select-primary-color-text-disabled);
 }
-.select-button[data-readonly=true] .select-label {
+.select-button:where([data-readonly=true]) .select-input-label {
   color: var(--select-primary-color-text-readonly);
+  caret-color: var(--select-primary-color-text-readonly);
+}
+.select-button:where([data-state=focused]) .select-input-label, .select-button:where(:focus-within) .select-input-label {
+  color: var(--color-label-strong);
 }
-.select-button[data-priority=secondary][data-state=disabled] .select-label {
+.select-button:where([data-priority=secondary]):where([data-state=disabled]) .select-input-label {
   color: var(--select-secondary-color-text-disabled);
 }
-.select-button[data-priority=secondary][data-readonly=true] .select-label {
+.select-button:where([data-priority=secondary]):where([data-readonly=true]) .select-input-label {
   color: var(--select-secondary-color-text-readonly);
 }
 
-.select-label-placeholder {
+.select-input-label-placeholder {
   color: var(--select-primary-color-placeholder);
 }
-.select-button[data-priority=secondary] .select-label-placeholder {
+.select-button:where([data-priority=secondary]) .select-input-label-placeholder {
   color: var(--select-secondary-color-placeholder);
 }
-.select-button[data-priority=table] .select-label-placeholder {
+.select-button:where([data-priority=table]) .select-input-label-placeholder {
   color: var(--select-table-color-placeholder);
 }
-.select-button[data-state=disabled] .select-label-placeholder {
+.select-button:where([data-state=disabled]) .select-input-label-placeholder {
   color: var(--select-primary-color-placeholder-disabled);
 }
-.select-button[data-readonly=true] .select-label-placeholder {
+.select-button:where([data-readonly=true]) .select-input-label-placeholder {
   color: var(--select-primary-color-placeholder-readonly);
 }
-.select-button[data-priority=secondary][data-state=disabled] .select-label-placeholder {
+.select-button:where([data-priority=secondary]):where([data-state=disabled]) .select-input-label-placeholder {
   color: var(--select-secondary-color-placeholder-disabled);
 }
-.select-button[data-priority=secondary][data-readonly=true] .select-label-placeholder {
+.select-button:where([data-priority=secondary]):where([data-readonly=true]) .select-input-label-placeholder {
   color: var(--select-secondary-color-placeholder-readonly);
 }
-.select-button[data-priority=table][data-state=disabled] .select-label-placeholder {
+.select-button:where([data-priority=table]):where([data-state=disabled]) .select-input-label-placeholder {
   color: var(--select-table-color-placeholder-disabled);
 }
-.select-button[data-priority=table][data-readonly=true] .select-label-placeholder {
+.select-button:where([data-priority=table]):where([data-readonly=true]) .select-input-label-placeholder {
   color: var(--select-table-color-placeholder-readonly);
 }
 
-.select-button[data-size=small] .select-label {
+.select-button:where([data-size=small]) :where(.select-input-label) {
   font-size: var(--select-text-small-size);
   line-height: var(--select-text-small-line-height);
   letter-spacing: var(--select-text-small-letter-spacing);
   font-weight: var(--select-text-small-weight);
 }
 
-.select-button[data-priority=table][data-size=small] .select-label {
+.select-button:where([data-size=xsmall]) :where(.select-input-label) {
+  font-size: var(--select-text-xsmall-size);
+  line-height: var(--select-text-xsmall-line-height);
+  letter-spacing: var(--select-text-xsmall-letter-spacing);
+  font-weight: var(--select-text-xsmall-weight);
+}
+
+.select-button:where([data-priority=table]):where([data-size=small]) :where(.select-input-label) {
   font-size: var(--select-table-text-small-size);
   line-height: var(--select-table-text-small-line-height);
   font-weight: var(--select-table-text-small-weight);
 }
 
-.select-button[data-size=large] .select-label {
+.select-button:where([data-size=large]) :where(.select-input-label) {
   font-size: var(--select-text-large-size);
   line-height: var(--select-text-large-line-height);
   letter-spacing: var(--select-text-large-letter-spacing);
   font-weight: var(--select-text-large-weight);
 }
 
-.select-button[data-priority=table][data-size=medium] .select-label {
+.select-button:where([data-priority=table]):where([data-size=medium]) :where(.select-input-label) {
   font-size: var(--select-table-text-medium-size);
   line-height: var(--select-table-text-medium-line-height);
   font-weight: var(--select-table-text-medium-weight);
 }
 
-.select-button[data-priority=table][data-size=large] .select-label {
+.select-button:where([data-priority=table]):where([data-size=large]) :where(.select-input-label) {
   font-size: var(--select-table-text-large-size);
   line-height: var(--select-table-text-large-line-height);
   font-weight: var(--select-table-text-large-weight);
 }
 
-.select-button[data-priority=secondary][data-size=large] .select-label {
-  --select-text-large-weight: 600;
+.select-button:where([data-priority=secondary]):where([data-size=large]) :where(.select-input-label) {
+  font-weight: 600;
 }
 
 .select-tags {
@@ -3936,11 +4046,11 @@ figure.chip {
 .select-tag:focus-within {
   border-color: var(--select-color-border-secondary-focused);
 }
-.select-tag[data-removable=true] {
+.select-tag:where([data-removable=true]) {
   padding-right: var(--select-multiple-chip-removable-padding-right);
 }
 
-.select-tag[data-kind=summary],
+.select-tag:where([data-kind=summary]),
 .select-tag-summary {
   background-color: var(--select-multiple-chip-summary-surface);
   border-color: var(--select-multiple-chip-summary-border-color);
@@ -4005,15 +4115,19 @@ figure.chip {
   justify-content: center;
   margin-left: auto;
 }
-.select-icon[data-size=small] {
+.select-icon:where([data-size=small]) {
   width: var(--select-icon-size-small);
   height: var(--select-icon-size-small);
 }
-.select-icon[data-size=large] {
+.select-icon:where([data-size=xsmall]) {
+  width: var(--select-icon-size-xsmall);
+  height: var(--select-icon-size-xsmall);
+}
+.select-icon:where([data-size=large]) {
   width: var(--select-icon-size-large);
   height: var(--select-icon-size-large);
 }
-[data-open=true] .select-icon {
+:where([data-open=true]) .select-icon {
   transform: rotate(180deg);
 }
 .select-icon svg {