@uniai-fe/uds-primitives 0.3.59 → 0.4.0

package/README.md

@@ -47,6 +47,212 @@ export default function Page() {
 }
 ```
 
+## 제공 도구 목록
+
+- `Alternate.EmptyData`
+- `Alternate.LoadingDefault`
+- `Alternate.LoadingIcon`
+- `Alternate.Text`
+- `AlternateEmptyDataProps`
+- `AlternateLoadingDefaultProps`
+- `AlternateLoadingIconProps`
+- `AlternateTextProps`
+- `Badge`
+- `BadgeProps`
+- `Chip.Default`
+- `Chip.ClickableStyle`
+- `Chip.InputStyle`
+- `Chip.Label`
+- `Chip.List`
+- `ChipProps`
+- `ChipListRootProps`
+- `ChipListItemData`
+- `Calendar.Root`
+- `Calendar.Container`
+- `Calendar.Header`
+- `Calendar.Body`
+- `Calendar.Footer`
+- `Calendar.Core`
+- `Calendar.Icon`
+- `CalendarValue`
+- `CalendarRootProps`
+- `CalendarContainerProps`
+- `CalendarGridProps`
+- `CalendarDatePickerProps`
+- `Carousel.Provider`
+- `Carousel.Container`
+- `Carousel.Control`
+- `Carousel.Track`
+- `Carousel.Button.Base`
+- `Carousel.Button.Prev`
+- `Carousel.Button.Next`
+- `useCarousel`
+- `useCarouselProviderController`
+- `CarouselProviderProps`
+- `CarouselTrackProps`
+- `CarouselContainerProps`
+- `CarouselControlProps`
+- `CarouselPrevButtonProps`
+- `CarouselNextButtonProps`
+- `DrawerRoot`
+- `DrawerTrigger`
+- `DrawerPortal`
+- `DrawerOverlay`
+- `DrawerContent`
+- `DrawerHeader`
+- `DrawerBody`
+- `DrawerFooter`
+- `DrawerTitle`
+- `DrawerDescription`
+- `DrawerClose`
+- `DrawerRootProps`
+- `DrawerTriggerProps`
+- `DrawerContentProps`
+- `useDrawerDrag`
+- `Form.Provider`
+- `Form.Field.Container`
+- `Form.Field.Header`
+- `Form.Field.Body`
+- `Form.Field.Footer`
+- `Form.Field.Template`
+- `FormFieldTemplateProps`
+- `FormFieldContainerProps`
+- `FormFieldHeaderProps`
+- `FormFieldFooterProps`
+- `FormFieldWidth`
+- `FormFieldState`
+- `getFormFieldWidthAttr`
+- `getFormFieldWidthValue`
+- `InfoBox`
+- `InfoBoxIcon`
+- `InfoBoxProps`
+- `InfoBoxState`
+- `BottomNavigation`
+- `BottomNavigationProps`
+- `NavigationItem`
+- `NavigationItemKey`
+- `NavigationHrefItem`
+- `NavigationActionItem`
+- `NavigationSitemapNode`
+- `NavigationSitemapCollection`
+- `NavigationSitemapOptions`
+- `composeNavigationClassName`
+- `isHrefNavigationItem`
+- `Pagination`
+- `PaginationCarousel`
+- `PaginationCount`
+- `PaginationProps`
+- `PaginationCarouselProps`
+- `PaginationCountProps`
+- `PaginationCountSize`
+- `PaginationCarouselPriority`
+- `normalizePaginationState`
+- `createPaginationPages`
+- `composePaginationClassName`
+- `Slot.Base`
+- `Slot.Text`
+- `SlotComponentProps`
+- `SlotTextProps`
+- `TabRoot`
+- `TabList`
+- `TabTrigger`
+- `TabContent`
+- `TabRootProps`
+- `TabListProps`
+- `TabTriggerProps`
+- `TabContentProps`
+- `TabVariant`
+- `TabScale`
+- `TabContext`
+- `useTabContext`
+- `SegmentedControl`
+- `SegmentedControlLabel`
+- `SegmentedControlProps`
+- `SegmentedControlOption`
+- `SegmentedControlValue`
+- `Divider`
+- `DividerProps`
+- `DividerDirection`
+- `scrollbar` (현재 public export 없음)
+- `spinner` (현재 public export 없음)
+- `Table.Root`
+- `Table.Head`
+- `Table.Body`
+- `Table.Foot`
+- `Table.Row`
+- `Table.Th`
+- `Table.Td`
+- `Table.Cell`
+- `Table.Text`
+- `Table.Container`
+- `Table.Colgroup`
+- `Table.Col`
+- `TableColumnData`
+- `TableRootProps`
+- `TableContainerProps`
+- `TableCellProps`
+- `Button.Default`
+- `Button.Text`
+- `Button.Rounded`
+- `Button.Label`
+- `ButtonProps`
+- `TextButtonProps`
+- `RoundButtonProps`
+- `Input.Base`
+- `Input.TextArea`
+- `Input.Text.Password`
+- `Input.Text.Phone`
+- `Input.Text.Email`
+- `Input.Text.Search`
+- `Input.Text.AuthCode`
+- `Input.Date.Template`
+- `Input.Address.Template`
+- `Input.Address.Button`
+- `Input.File.UploadButton`
+- `Input.File.UploadedChip`
+- `Input.File.List.*`
+- `useInputFile`
+- `useInputFileContext`
+- `Select.Default`
+- `Select.Multiple`
+- `Select.Container`
+- `Select.Trigger.Base`
+- `Select.Selected.Base`
+- `Select.Selected.Multiple`
+- `SelectDropdownOption`
+- `SelectMultipleTag`
+- `Dropdown.Root`
+- `Dropdown.Trigger`
+- `Dropdown.Container`
+- `Dropdown.Menu.Item`
+- `Dropdown.Menu.List`
+- `Dropdown.Template`
+- `DropdownTemplateItem`
+- `DropdownTemplateChangePayload`
+- `Radio`
+- `RadioField`
+- `RadioCard`
+- `RadioCardGroup`
+- `RadioProps`
+- `RadioFieldProps`
+- `Checkbox`
+- `CheckboxField`
+- `CheckboxProps`
+- `CheckboxFieldProps`
+- `CheckboxSize`
+- `Tooltip.Root`
+- `Tooltip.Trigger`
+- `Tooltip.Message`
+- `Tooltip.Text`
+- `Tooltip.Template`
+- `TooltipMessageProps`
+- `PopOver.Root`
+- `PopOver.Trigger`
+- `PopOver.Content`
+- `PopOverRootProps`
+- `PopOverTriggerProps`
+- `PopOverContentProps`
+
 ### Link/Anchor로 사용하기
 
 ```tsx
@@ -103,11 +309,11 @@ function Templates() {
 - 템플릿별 클래스를 추가로 노출한다: `.button-template-text`, `.button-template-text-size-*`, `.button-template-round`, `.button-template-round-size-*`.
 - 스토리북 `primitives/Button` Story에서 solid/outlined/텍스트/라운드 4가지 카테고리를 한 번에 확인할 수 있다.
 
-### SlotComponent (폴리모픽 as 래퍼)
+### Slot (폴리모픽 as 래퍼)
 
-- `Button.Default`는 `SlotComponent`를 통해 `as` prop으로 전달된 요소(예: `Link`, `a`, `button`)에 공통 속성/`ref`를 안전하게 전달한다.
+- `Button.Default`는 `Slot.Base`를 통해 `as` prop으로 전달된 요소(예: `Link`, `a`, `button`)에 공통 속성/`ref`를 안전하게 전달한다.
 - `SlotComponentProps<C>`는 React가 허용하는 모든 native props + `data-*` 속성을 그대로 포함하고, `as/children/className`만 재정의한다.
-- 필요 시 `import { SlotComponent } from "@uniai-fe/uds-primitives";`로 직접 사용해 카드/배너 등의 래퍼를 구현할 수 있다.
+- 필요 시 `import { Slot } from "@uniai-fe/uds-primitives";` 후 `Slot.Base`, `Slot.Text`를 직접 사용해 카드/배너 래퍼나 텍스트 슬롯을 구현할 수 있다.
 - 자세한 도입 배경과 API는 `docs/CONTEXT-SLOT.md`에서 확인할 수 있다.
 
 ### 최근 업데이트

package/dist/styles.css

@@ -614,6 +614,8 @@
   --select-secondary-color-text-readonly: var(
   --select-primary-color-text-readonly
   );
+  --select-secondary-color-border-disabled: var(--color-label-disabled);
+  --select-secondary-color-border-readonly: transparent;
   --select-secondary-color-placeholder: var(--color-label-alternative);
   --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
   --select-secondary-color-placeholder-readonly: var(
@@ -623,9 +625,11 @@
   --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
   --select-color-surface-secondary-active: var(--color-surface-standard);
   --select-color-surface-secondary-disabled: var(--color-surface-neutral);
+  --select-color-surface-secondary-readonly: transparent;
   --select-icon-color-default: var(--color-cool-gray-75);
   --select-icon-color-focused: var(--color-cool-gray-20);
   --select-icon-color-disabled: var(--color-cool-gray-85);
+  --select-icon-color-readonly: transparent;
   /* Multi select chip */
   --select-multiple-chip-gap: var(--spacing-gap-2);
   --select-multiple-tag-label-gap: var(--spacing-gap-1);
@@ -2556,34 +2560,34 @@ figure.chip {
   flex: var(--input-flex);
   min-width: 0;
 }
-.input[data-width=auto] {
+.input:where([data-width=auto]) {
   --input-width: auto;
   --input-flex: 0 1 auto;
 }
-.input[data-width=fill] {
+.input:where([data-width=fill]) {
   --input-width: auto;
   --input-flex: 1 1 0%;
 }
-.input[data-width=full], .input[data-block=true] {
+.input:where([data-width=full]), .input:where([data-block=true]) {
   --input-width: 100%;
   --input-flex: 0 0 100%;
 }
-.input[data-width=fit] {
+.input:where([data-width=fit]) {
   --input-width: fit-content;
   --input-flex: 0 0 auto;
 }
-.input[data-width=custom] {
+.input:where([data-width=custom]) {
   --input-flex: 0 0 auto;
 }
 .input--block {
   width: 100%;
 }
-.input[data-priority=table] {
+.input:where([data-priority=table]) {
   display: block;
   --input-width: 100%;
   height: 100%;
 }
-.input[data-priority=table] .input-box {
+.input:where([data-priority=table]) .input-box {
   height: 100%;
 }
 
@@ -2626,21 +2630,21 @@ figure.chip {
   outline: none;
   box-shadow: none;
 }
-.input-field[data-size=small] {
+.input-field:where([data-size=small]) {
   min-height: var(--input-default-height-small);
   --input-font-size: var(--input-text-small-size);
   --input-line-height: var(--input-text-small-line-height);
   --input-font-weight: var(--input-text-small-weight);
   --input-letter-spacing: var(--input-text-small-letter-spacing);
 }
-.input-field[data-size=large] {
+.input-field:where([data-size=large]) {
   min-height: var(--input-default-height-large);
   --input-font-size: var(--input-text-large-size);
   --input-line-height: var(--input-text-large-line-height);
   --input-font-weight: var(--input-text-large-weight);
   --input-letter-spacing: var(--input-text-large-letter-spacing);
 }
-.input-field[data-priority=secondary] {
+.input-field:where([data-priority=secondary]) {
   border: none;
   border-bottom: var(--input-border-width-default) solid var(--input-border-color);
   border-radius: 0;
@@ -2648,23 +2652,23 @@ figure.chip {
   padding-block: var(--input-secondary-padding-block);
   background-color: var(--input-secondary-surface-color);
 }
-.input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
+.input-field:where([data-priority=secondary]):where([data-state=active]), .input-field:where([data-priority=secondary]):where([data-state=focused]) {
   border-bottom-color: var(--input-border-active-color);
   border-bottom-width: var(--input-border-width-emphasis);
 }
-.input-field[data-priority=secondary][data-state=success] {
+.input-field:where([data-priority=secondary]):where([data-state=success]) {
   border-bottom-color: var(--input-border-success-color);
   border-bottom-width: var(--input-border-width-emphasis);
 }
-.input-field[data-priority=secondary][data-state=error] {
+.input-field:where([data-priority=secondary]):where([data-state=error]) {
   border-bottom-color: var(--input-border-error-color);
   border-bottom-width: var(--input-border-width-emphasis);
 }
-.input-field[data-priority=secondary][data-state=disabled] {
+.input-field:where([data-priority=secondary]):where([data-state=disabled]) {
   border-bottom-color: var(--input-border-underline-disabled-color);
   border-bottom-width: var(--input-border-width-default);
 }
-.input-field[data-priority=tertiary] {
+.input-field:where([data-priority=tertiary]) {
   border-radius: var(--input-tertiary-radius-base);
   background-color: var(--input-surface-color);
   min-height: var(--input-tertiary-height-base);
@@ -2677,7 +2681,7 @@ figure.chip {
   flex-wrap: wrap;
   align-items: center;
 }
-.input-field[data-priority=tertiary] .input-field-control {
+.input-field:where([data-priority=tertiary]) .input-field-control {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   column-gap: var(--input-default-gap);
@@ -2686,57 +2690,57 @@ figure.chip {
   flex: 1 1 auto;
   min-width: 0;
 }
-.input-field[data-priority=tertiary] .input-inline-label {
+.input-field:where([data-priority=tertiary]) .input-inline-label {
   grid-column: 1/-1;
   margin: 0;
   align-self: flex-start;
 }
-.input-field[data-priority=tertiary] .input-element {
+.input-field:where([data-priority=tertiary]) .input-element {
   min-height: var(--input-tertiary-element-min-height);
   width: auto;
   flex: 1 1 auto;
 }
-.input-field[data-priority=tertiary] .input-field-utilities {
+.input-field:where([data-priority=tertiary]) .input-field-utilities {
   align-self: center;
   margin-left: 0;
 }
-.input-field[data-priority=table] {
+.input-field:where([data-priority=table]) {
   height: 100%;
   border-radius: var(--input-table-radius-base);
   border-color: var(--input-border-table-default-color);
   background-color: var(--input-table-surface-color);
 }
-.input-field[data-priority=table][data-state=disabled] {
+.input-field:where([data-priority=table]):where([data-state=disabled]) {
   border-color: var(--input-border-table-disabled-color);
   background-color: var(--input-table-surface-disabled-color);
 }
-.input-field[data-priority=table][data-readonly=true] {
+.input-field:where([data-priority=table]):where([data-readonly=true]) {
   border-color: var(--input-border-table-readonly-color);
   background-color: var(--input-table-surface-readonly-color);
 }
-.input-field:not([data-priority=secondary])[data-state=active], .input-field:not([data-priority=secondary])[data-state=focused] {
+.input-field:not([data-priority=secondary]):where([data-state=active]), .input-field:not([data-priority=secondary]):where([data-state=focused]) {
   border-color: var(--input-border-active-color);
   border-width: var(--input-border-width-emphasis);
 }
-.input-field:not([data-priority=secondary])[data-state=success] {
+.input-field:not([data-priority=secondary]):where([data-state=success]) {
   border-color: var(--input-border-success-color);
   border-width: var(--input-border-width-emphasis);
 }
-.input-field:not([data-priority=secondary])[data-state=error] {
+.input-field:not([data-priority=secondary]):where([data-state=error]) {
   border-color: var(--input-border-error-color);
   border-width: var(--input-border-width-emphasis);
 }
-.input-field:not([data-priority=secondary])[data-state=disabled] {
+.input-field:not([data-priority=secondary]):where([data-state=disabled]) {
   border-color: var(--input-border-disabled-color);
   border-width: var(--input-border-width-default);
   background-color: var(--input-surface-disabled-color); /* disabled 배경 토큰 */
 }
-.input-field:not([data-priority=secondary])[data-readonly=true] {
+.input-field:not([data-priority=secondary]):where([data-readonly=true]) {
   border-color: var(--input-border-disabled-color);
   border-width: var(--input-border-width-default);
   background-color: var(--input-surface-disabled-color);
 }
-.input-field:not([data-priority=secondary])[data-state=error][data-readonly=true] {
+.input-field:not([data-priority=secondary]):where([data-state=error][data-readonly=true]) {
   border-color: var(--input-border-error-color);
   border-width: var(--input-border-width-emphasis);
 }
@@ -2777,7 +2781,7 @@ figure.chip {
   box-shadow: none;
 }
 
-.input-field[data-has-value=true] .input-element:not(:disabled) {
+.input-field:where([data-has-value=true]) .input-element:not(:disabled) {
   color: var(--input-text-color);
   caret-color: var(--input-text-color);
 }
@@ -2790,7 +2794,7 @@ figure.chip {
   min-width: 0;
 }
 
-.input[data-input-type=textarea] .input-field {
+.input:where([data-input-type=textarea]) .input-field {
   --input-textarea-radius: var(--input-textarea-radius-medium);
   --input-textarea-padding-inline: var(--input-textarea-padding-inline-medium);
   --input-textarea-padding-block: var(--input-textarea-padding-block-medium);
@@ -2801,29 +2805,29 @@ figure.chip {
   border-radius: var(--input-textarea-radius);
   padding: var(--input-textarea-padding-block) var(--input-textarea-padding-inline);
 }
-.input[data-input-type=textarea] .input-field[data-size=small] {
+.input:where([data-input-type=textarea]) .input-field:where([data-size=small]) {
   --input-textarea-radius: var(--input-textarea-radius-small);
   --input-textarea-padding-inline: var(--input-textarea-padding-inline-small);
   --input-textarea-padding-block: var(--input-textarea-padding-block-small);
   --input-textarea-gap: var(--input-textarea-gap-small);
 }
-.input[data-input-type=textarea] .input-field[data-size=large] {
+.input:where([data-input-type=textarea]) .input-field:where([data-size=large]) {
   --input-textarea-radius: var(--input-textarea-radius-large);
   --input-textarea-padding-inline: var(--input-textarea-padding-inline-large);
   --input-textarea-padding-block: var(--input-textarea-padding-block-large);
   --input-textarea-gap: var(--input-textarea-gap-large);
 }
 
-.input[data-input-type=textarea] {
+.input:where([data-input-type=textarea]) {
   min-height: var(--input-textarea-height);
 }
-.input[data-input-type=textarea] .input-box {
+.input:where([data-input-type=textarea]) .input-box {
   height: 100%;
 }
-.input[data-input-type=textarea] .input-field {
+.input:where([data-input-type=textarea]) .input-field {
   height: 100%;
 }
-.input[data-input-type=textarea] .input-field-control {
+.input:where([data-input-type=textarea]) .input-field-control {
   flex: 1 1 auto;
   width: 100%;
   align-items: stretch;
@@ -2865,27 +2869,27 @@ figure.chip {
   color: var(--input-label-color);
 }
 
-.input-field[data-priority=secondary] .input-element {
+.input-field:where([data-priority=secondary]) .input-element {
   padding-inline: 0;
 }
 
-.input-field[data-priority=tertiary] .input-element {
+.input-field:where([data-priority=tertiary]) .input-element {
   min-height: var(--input-tertiary-element-min-height);
 }
 
-.input-field[data-priority=table][data-size=small] .input-element {
+.input-field:where([data-priority=table]):where([data-size=small]) .input-element {
   font-size: var(--input-table-text-small-size);
   line-height: var(--input-table-text-small-line-height);
   font-weight: var(--input-table-text-small-weight);
 }
 
-.input-field[data-priority=table][data-size=medium] .input-element {
+.input-field:where([data-priority=table]):where([data-size=medium]) .input-element {
   font-size: var(--input-table-text-medium-size);
   line-height: var(--input-table-text-medium-line-height);
   font-weight: var(--input-table-text-medium-weight);
 }
 
-.input-field[data-priority=table][data-size=large] .input-element {
+.input-field:where([data-priority=table]):where([data-size=large]) .input-element {
   font-size: var(--input-table-text-large-size);
   line-height: var(--input-table-text-large-line-height);
   font-weight: var(--input-table-text-large-weight);
@@ -2896,10 +2900,10 @@ figure.chip {
   font-size: var(--input-helper-font-size);
   line-height: var(--input-helper-line-height);
 }
-[data-state=error] .input-helper-text {
+:where([data-state=error]) .input-helper-text {
   color: var(--input-border-error-color);
 }
-[data-state=disabled] .input-helper-text {
+:where([data-state=disabled]) .input-helper-text {
   color: var(--input-helper-disabled-color);
 }
 
@@ -2920,77 +2924,78 @@ figure.chip {
 .input-affix-clear, .input-affix-status {
   color: var(--input-text-color);
 }
-.input-affix-status[data-state=error] {
+.input-affix-status:where([data-state=error]) {
   color: var(--input-status-error-color);
 }
-.input-affix-status[data-state=success] {
+.input-affix-status:where([data-state=success]) {
   color: var(--input-status-success-color);
 }
 
-.input-field[data-priority=secondary] {
+.input-field:where([data-priority=secondary]) {
   border-bottom-width: var(--input-border-width-default);
 }
-.input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
+.input-field:where([data-priority=secondary]) :where([data-state=active]),
+.input-field:where([data-priority=secondary]) :where([data-state=focused]) {
   border-bottom-color: var(--input-border-active-color);
   border-bottom-width: var(--input-border-width-emphasis);
 }
-.input-field[data-priority=secondary][data-state=success] {
+.input-field:where([data-priority=secondary]) :where([data-state=success]) {
   border-bottom-color: var(--input-border-success-color);
   border-bottom-width: var(--input-border-width-emphasis);
 }
-.input-field[data-priority=secondary][data-state=error] {
+.input-field:where([data-priority=secondary]) :where([data-state=error]) {
   border-bottom-color: var(--input-border-error-color);
   border-bottom-width: var(--input-border-width-emphasis);
 }
-.input-field[data-priority=secondary][data-state=disabled] {
+.input-field:where([data-priority=secondary]) :where([data-state=disabled]) {
   border-bottom-color: var(--input-border-underline-disabled-color);
   border-bottom-width: var(--input-border-width-default);
 }
-.input-field[data-priority=secondary][data-readonly=true] {
+.input-field:where([data-priority=secondary]) :where([data-readonly=true]) {
   border-bottom-color: var(--input-border-underline-disabled-color);
   border-bottom-width: var(--input-border-width-default);
 }
 
-.input[data-state=active] .input-label,
-.input[data-state=active] .input-inline-label,
-.input[data-state=focused] .input-label,
-.input[data-state=focused] .input-inline-label,
-.input[data-state=success] .input-label,
-.input[data-state=success] .input-inline-label {
+.input:where([data-state=active]) .input-label,
+.input:where([data-state=active]) .input-inline-label,
+.input:where([data-state=focused]) .input-label,
+.input:where([data-state=focused]) .input-inline-label,
+.input:where([data-state=success]) .input-label,
+.input:where([data-state=success]) .input-inline-label {
   color: var(--input-label-accent-color);
 }
 
-.input[data-state=error] .input-label,
-.input[data-state=error] .input-inline-label {
+.input:where([data-state=error]) .input-label,
+.input:where([data-state=error]) .input-inline-label {
   color: var(--input-label-error-color);
 }
-.input[data-state=error] .input-helper-text {
+.input:where([data-state=error]) .input-helper-text {
   color: var(--input-label-error-color);
 }
-.input[data-state=error] .input-textarea-length {
+.input:where([data-state=error]) .input-textarea-length {
   color: var(--input-label-error-color);
 }
 
-.input[data-state=disabled] .input-label,
-.input[data-state=disabled] .input-inline-label,
-.input[data-state=disabled] .input-helper-text,
-.input[data-state=disabled] .input-affix,
-.input[data-state=disabled] .input-textarea-length {
+.input:where([data-state=disabled]) .input-label,
+.input:where([data-state=disabled]) .input-inline-label,
+.input:where([data-state=disabled]) .input-helper-text,
+.input:where([data-state=disabled]) .input-affix,
+.input:where([data-state=disabled]) .input-textarea-length {
   color: var(--input-helper-disabled-color);
 }
-.input[data-state=disabled] .input-field {
+.input:where([data-state=disabled]) .input-field {
   border-color: var(--input-border-color);
   background-color: var(--input-surface-disabled-color);
 }
-.input[data-state=disabled] .input-field[data-priority=secondary] {
+.input:where([data-state=disabled]) .input-field[data-priority=secondary] {
   background-color: var(--input-secondary-surface-color);
 }
-.input[data-state=disabled] .input-field[data-priority=table] {
+.input:where([data-state=disabled]) .input-field[data-priority=table] {
   background-color: var(--input-table-surface-disabled-color);
   border-color: var(--input-border-table-disabled-color);
 }
 
-.input[data-readonly=true] .input-field[data-priority=table] {
+.input:where([data-readonly=true]) .input-field:where([data-priority=table]) {
   background-color: var(--input-table-surface-readonly-color);
   border-color: var(--input-border-table-readonly-color);
 }
@@ -3871,7 +3876,11 @@ figure.chip {
   --select-flex: 1 1 0%;
 }
 
-.select[data-width=full],
+.select:where([data-width=full]) {
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
+}
+
 .select-block {
   --select-width: 100%;
   --select-flex: 0 0 100%;
@@ -3982,12 +3991,13 @@ figure.chip {
   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-icon-fill: var(--select-icon-color-readonly);
 }
 .select-button:where([data-priority=secondary]):where([data-readonly=true]) {
-  border-color: transparent;
-  background-color: var(--select-color-surface-secondary-disabled);
+  border-color: var(--select-secondary-color-border-readonly);
+  background-color: var(--select-color-surface-secondary-readonly);
   cursor: default;
+  --select-icon-fill: var(--select-icon-color-readonly);
 }
 .select-button:where([data-priority=secondary]):where([data-readonly=true])::after {
   background-color: var(--select-color-border-secondary-disabled);
@@ -3997,7 +4007,7 @@ figure.chip {
   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-icon-fill: var(--select-table-icon-color-readonly);
 }
 .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);
@@ -4006,7 +4016,7 @@ figure.chip {
   --select-icon-fill: var(--select-icon-color-disabled);
 }
 .select-button:where([data-priority=secondary]):where([data-state=disabled]), .select-button:where([data-priority=secondary]):disabled {
-  border-color: transparent;
+  border-color: var(--select-secondary-color-border-disabled);
   background-color: var(--select-color-surface-secondary-disabled);
 }
 .select-button:where([data-priority=secondary]):where([data-state=disabled])::after, .select-button:where([data-priority=secondary]):disabled::after {
@@ -4073,6 +4083,11 @@ figure.chip {
   color: var(--select-secondary-color-text-readonly);
 }
 
+.select-input-label-readonly {
+  width: auto;
+  max-width: 100%;
+}
+
 .select-button:where(:not([data-state=disabled])) .select-value[data-has-value=true] .select-input-label {
   color: var(--select-color-text-value);
   caret-color: var(--select-color-text-value);

package/package.json

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