@uniai-fe/uds-primitives 0.3.19 → 0.3.21

package/dist/styles.css

@@ -255,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);
@@ -269,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;
@@ -280,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);
@@ -458,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);
@@ -517,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);
@@ -525,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;
@@ -2162,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
   );
 }
@@ -2221,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;
@@ -2275,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;
@@ -3676,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%;
 }
@@ -3692,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;
 }
 
@@ -3716,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;
@@ -3742,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;
@@ -3837,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 {
@@ -3966,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);
@@ -4035,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,