@uniai-fe/uds-primitives 0.3.57 → 0.3.60

package/dist/styles.css

@@ -2556,34 +2556,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 +2626,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 +2648,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 +2677,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 +2686,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 +2777,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 +2790,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 +2801,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 +2865,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 +2896,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 +2920,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);
 }

package/package.json

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

package/src/components/input/styles/foundation.scss

@@ -6,28 +6,28 @@
   flex: var(--input-flex);
   min-width: 0;
 
-  &[data-width="auto"] {
+  &:where([data-width="auto"]) {
     --input-width: auto;
     --input-flex: 0 1 auto;
   }
 
-  &[data-width="fill"] {
+  &:where([data-width="fill"]) {
     --input-width: auto;
     --input-flex: 1 1 0%;
   }
 
-  &[data-width="full"],
-  &[data-block="true"] {
+  &:where([data-width="full"]),
+  &:where([data-block="true"]) {
     --input-width: 100%;
     --input-flex: 0 0 100%;
   }
 
-  &[data-width="fit"] {
+  &:where([data-width="fit"]) {
     --input-width: fit-content;
     --input-flex: 0 0 auto;
   }
 
-  &[data-width="custom"] {
+  &:where([data-width="custom"]) {
     --input-flex: 0 0 auto;
   }
 
@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  &[data-priority="table"] {
+  &:where([data-priority="table"]) {
     display: block;
     --input-width: 100%;
     height: 100%;
@@ -87,7 +87,7 @@
   outline: none;
   box-shadow: none;
 
-  &[data-size="small"] {
+  &:where([data-size="small"]) {
     min-height: var(--input-default-height-small);
     // Figma small 규격(40px/15px/1.4/0.2px)을 size token으로 고정한다.
     --input-font-size: var(--input-text-small-size);
@@ -96,7 +96,7 @@
     --input-letter-spacing: var(--input-text-small-letter-spacing);
   }
 
-  &[data-size="large"] {
+  &:where([data-size="large"]) {
     min-height: var(--input-default-height-large);
     // Figma large 규격(56px/19px)을 size token으로 고정한다.
     --input-font-size: var(--input-text-large-size);
@@ -105,7 +105,7 @@
     --input-letter-spacing: var(--input-text-large-letter-spacing);
   }
 
-  &[data-priority="secondary"] {
+  &:where([data-priority="secondary"]) {
     border: none;
     border-bottom: var(--input-border-width-default) solid
       var(--input-border-color);
@@ -114,29 +114,29 @@
     padding-block: var(--input-secondary-padding-block);
     background-color: var(--input-secondary-surface-color);
 
-    &[data-state="active"],
-    &[data-state="focused"] {
+    &:where([data-state="active"]),
+    &:where([data-state="focused"]) {
       border-bottom-color: var(--input-border-active-color);
       border-bottom-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="success"] {
+    &:where([data-state="success"]) {
       border-bottom-color: var(--input-border-success-color);
       border-bottom-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="error"] {
+    &:where([data-state="error"]) {
       border-bottom-color: var(--input-border-error-color);
       border-bottom-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="disabled"] {
+    &:where([data-state="disabled"]) {
       border-bottom-color: var(--input-border-underline-disabled-color);
       border-bottom-width: var(--input-border-width-default);
     }
   }
 
-  &[data-priority="tertiary"] {
+  &:where([data-priority="tertiary"]) {
     border-radius: var(--input-tertiary-radius-base);
     background-color: var(--input-surface-color);
     min-height: var(--input-tertiary-height-base);
@@ -178,42 +178,42 @@
     }
   }
 
-  &[data-priority="table"] {
+  &: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);
 
-    &[data-state="disabled"] {
+    &:where([data-state="disabled"]) {
       border-color: var(--input-border-table-disabled-color);
       background-color: var(--input-table-surface-disabled-color);
     }
 
-    &[data-readonly="true"] {
+    &:where([data-readonly="true"]) {
       border-color: var(--input-border-table-readonly-color);
       background-color: var(--input-table-surface-readonly-color);
     }
   }
 
   &:not([data-priority="secondary"]) {
-    &[data-state="active"],
-    &[data-state="focused"] {
+    &:where([data-state="active"]),
+    &:where([data-state="focused"]) {
       border-color: var(--input-border-active-color);
       border-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="success"] {
+    &:where([data-state="success"]) {
       border-color: var(--input-border-success-color);
       border-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="error"] {
+    &:where([data-state="error"]) {
       border-color: var(--input-border-error-color);
       border-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="disabled"] {
+    &:where([data-state="disabled"]) {
       border-color: var(--input-border-disabled-color);
       border-width: var(--input-border-width-default);
       background-color: var(
@@ -221,13 +221,13 @@
       ); /* disabled 배경 토큰 */
     }
 
-    &[data-readonly="true"] {
+    &: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);
     }
 
-    &[data-state="error"][data-readonly="true"] {
+    &:where([data-state="error"][data-readonly="true"]) {
       // 변경: calendar trigger처럼 readOnly input에서도 error state를 우선 노출한다.
       border-color: var(--input-border-error-color);
       border-width: var(--input-border-width-emphasis);
@@ -279,7 +279,7 @@
   }
 }
 
-.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);
 }
@@ -292,7 +292,7 @@
   min-width: 0;
 }
 
-.input[data-input-type="textarea"] .input-field {
+.input:where([data-input-type="textarea"]) .input-field {
   // TextArea는 size별로 radius/spacing을 분기해 input과 동일한 스케일 감각을 유지한다.
   --input-textarea-radius: var(--input-textarea-radius-medium);
   --input-textarea-padding-inline: var(--input-textarea-padding-inline-medium);
@@ -305,14 +305,14 @@
   padding: var(--input-textarea-padding-block)
     var(--input-textarea-padding-inline);
 
-  &[data-size="small"] {
+  &: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);
   }
 
-  &[data-size="large"] {
+  &: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);
@@ -321,7 +321,7 @@
 }
 
 // 변경: textarea 높이 토큰은 native element가 아니라 root layout이 소유하고 내부는 남은 높이를 채운다.
-.input[data-input-type="textarea"] {
+.input:where([data-input-type="textarea"]) {
   min-height: var(--input-textarea-height);
 
   .input-box {
@@ -376,27 +376,30 @@
   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);
@@ -407,7 +410,7 @@
   font-size: var(--input-helper-font-size);
   line-height: var(--input-helper-line-height);
 
-  [data-state="error"] & {
+  :where([data-state="error"]) & {
     color: var(--input-border-error-color);
   }
 
@@ -415,7 +418,7 @@
   //   color: var(--input-helper-success-color);
   // }
 
-  [data-state="disabled"] & {
+  :where([data-state="disabled"]) & {
     color: var(--input-helper-disabled-color);
   }
 }
@@ -444,54 +447,54 @@
   }
 
   // 상태별 아이콘 컬러는 디자인 토큰으로 직접 지정한다.
-  &-status[data-state="error"] {
+  &-status:where([data-state="error"]) {
     color: var(--input-status-error-color);
   }
 
-  &-status[data-state="success"] {
+  &-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);
 
-  &[data-state="active"],
-  &[data-state="focused"] {
+  :where([data-state="active"]),
+  :where([data-state="focused"]) {
     border-bottom-color: var(--input-border-active-color);
     border-bottom-width: var(--input-border-width-emphasis);
   }
 
-  &[data-state="success"] {
+  :where([data-state="success"]) {
     border-bottom-color: var(--input-border-success-color);
     border-bottom-width: var(--input-border-width-emphasis);
   }
 
-  &[data-state="error"] {
+  :where([data-state="error"]) {
     border-bottom-color: var(--input-border-error-color);
     border-bottom-width: var(--input-border-width-emphasis);
   }
 
-  &[data-state="disabled"] {
+  :where([data-state="disabled"]) {
     border-bottom-color: var(--input-border-underline-disabled-color);
     border-bottom-width: var(--input-border-width-default);
   }
 
-  &[data-readonly="true"] {
+  :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[data-state="focused"],
-.input[data-state="success"] {
+.input:where([data-state="active"]),
+.input:where([data-state="focused"]),
+.input:where([data-state="success"]) {
   .input-label,
   .input-inline-label {
     color: var(--input-label-accent-color);
   }
 }
 
-.input[data-state="error"] {
+.input:where([data-state="error"]) {
   .input-label,
   .input-inline-label {
     color: var(--input-label-error-color);
@@ -506,7 +509,7 @@
   }
 }
 
-.input[data-state="disabled"] {
+.input:where([data-state="disabled"]) {
   .input-label,
   .input-inline-label,
   .input-helper-text,
@@ -532,8 +535,8 @@
   }
 }
 
-.input[data-readonly="true"] {
-  .input-field[data-priority="table"] {
+.input:where([data-readonly="true"]) {
+  .input-field:where([data-priority="table"]) {
     // 변경: table readonly는 disabled와 동일한 박스 스타일을 사용하고 텍스트 색만 분리한다.
     background-color: var(--input-table-surface-readonly-color);
     border-color: var(--input-border-table-readonly-color);