@uniai-fe/uds-primitives 0.3.17 → 0.3.19

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;
@@ -344,6 +345,19 @@
   --input-table-text-large-size: var(--font-body-small-size);
   --input-table-text-large-line-height: var(--font-body-small-line-height);
   --input-table-text-large-weight: var(--font-body-small-weight);
+  /* Figma size 매핑: small/medium/large typography 토큰 */
+  --input-text-small-size: var(--font-body-xsmall-size);
+  --input-text-small-line-height: var(--font-label-medium-line-height);
+  --input-text-small-weight: 400;
+  --input-text-small-letter-spacing: 0.2px;
+  --input-text-medium-size: var(--font-body-medium-size);
+  --input-text-medium-line-height: var(--font-body-medium-line-height);
+  --input-text-medium-weight: 400;
+  --input-text-medium-letter-spacing: 0px;
+  --input-text-large-size: var(--font-body-large-size);
+  --input-text-large-line-height: var(--font-body-large-line-height);
+  --input-text-large-weight: 400;
+  --input-text-large-letter-spacing: 0px;
   /* Label/helper colors */
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
@@ -365,9 +379,9 @@
   --input-placeholder-disabled-color: var(--color-label-disabled);
   /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
   --input-placeholder-readonly-color: transparent;
-  --input-font-size: var(--font-body-medium-size);
-  --input-line-height: var(--font-body-medium-line-height);
-  --input-font-weight: 400;
+  --input-font-size: var(--input-text-medium-size);
+  --input-line-height: var(--input-text-medium-line-height);
+  --input-font-weight: var(--input-text-medium-weight);
   --input-letter-spacing: 0px;
   /* Border tokens */
   --input-border-color: var(--color-border-standard-cool-gray);
@@ -426,6 +440,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);
@@ -497,18 +512,19 @@
   --input-table-text-large-line-height
   );
   --select-table-text-large-weight: var(--input-table-text-large-weight);
-  --select-text-small-size: 15px;
-  --select-text-small-line-height: 1.4;
-  --select-text-small-letter-spacing: 0.2px;
-  --select-text-small-weight: 400;
-  --select-text-medium-size: var(--font-body-medium-size);
-  --select-text-medium-line-height: var(--font-body-medium-line-height);
-  --select-text-medium-letter-spacing: 0;
-  --select-text-medium-weight: 400;
-  --select-text-large-size: var(--font-body-large-size);
-  --select-text-large-line-height: var(--font-body-large-line-height);
-  --select-text-large-letter-spacing: 0;
-  --select-text-large-weight: 400;
+  /* 변경: trigger 텍스트 토큰을 input text 토큰과 직접 매핑해 size별 typography를 동기화한다. */
+  --select-text-small-size: var(--input-text-small-size);
+  --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-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);
+  --select-text-medium-weight: var(--input-text-medium-weight);
+  --select-text-large-size: var(--input-text-large-size);
+  --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-small: 1.6rem;
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;
@@ -652,9 +668,15 @@
 .alternate.is-horizontal.loading .empty-text {
   transform: translateY(0.2rem);
 }
+.alternate.is-horizontal.loading .empty-text {
+  margin-left: 1rem;
+}
 .alternate.is-vertical {
   flex-direction: column;
 }
+.alternate.is-vertical .empty-text {
+  margin-top: 1rem;
+}
 
 .alternate-loading-icon {
   width: 2.4rem;
@@ -666,12 +688,6 @@
   justify-content: center;
   animation: alternate-loading-spin 1s linear infinite;
 }
-.alternate-loading-icon.is-horizontal {
-  margin-right: 1rem;
-}
-.alternate-loading-icon.is-vertical {
-  margin-bottom: 1rem;
-}
 .alternate-loading-icon.is-medium {
   width: 3.6rem;
   height: 3.6rem;
@@ -680,6 +696,10 @@
   width: 5.2rem;
   height: 5.2rem;
 }
+.alternate-loading-icon svg {
+  width: 100%;
+  height: 100%;
+}
 
 
 
@@ -1705,17 +1725,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);
 }
@@ -1736,6 +1756,7 @@
 
 
 .chip {
+  --chip-current-height: var(--theme-chip-height);
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
@@ -1744,7 +1765,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;
@@ -1778,35 +1799,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);
@@ -1815,12 +1848,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);
@@ -1836,22 +1870,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);
 }
 
@@ -1898,6 +1932,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 범위에 선언한다. */
 
 
@@ -2469,9 +2517,17 @@ figure.chip {
 }
 .input-field[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] {
   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] {
   border: none;
@@ -2501,6 +2557,10 @@ figure.chip {
   border-radius: var(--input-tertiary-radius-base);
   background-color: var(--input-surface-color);
   min-height: var(--input-tertiary-height-base);
+  --input-font-size: var(--input-text-medium-size);
+  --input-line-height: var(--input-text-medium-line-height);
+  --input-font-weight: var(--input-text-medium-weight);
+  --input-letter-spacing: var(--input-text-medium-letter-spacing);
   row-gap: var(--input-tertiary-row-gap);
   column-gap: var(--input-default-gap);
   flex-wrap: wrap;
@@ -3366,17 +3426,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);
 }
@@ -3507,7 +3567,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;
@@ -3588,7 +3648,7 @@ figure.chip {
   outline-offset: 2px;
 }
 
-.segmented-control-button-label {
+.segmented-control-label {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3600,7 +3660,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);
 }
 
@@ -3876,7 +3936,7 @@ figure.chip {
 }
 
 .select-button[data-priority=secondary][data-size=large] .select-label {
-  font-weight: 600;
+  --select-text-large-weight: 600;
 }
 
 .select-tags {
@@ -4187,157 +4247,162 @@ figure.chip {
 
 
 
-.table.table-container {
+.table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }
-
-.table.table-container .table-native-cell.table-th,
-.table.table-container .table-native-cell.table-td {
+.table :where(.table-native-cell):where(.table-th) {
   vertical-align: middle;
   background-color: var(--table-cell-background-color);
   text-align: left;
 }
-
-.table.table-container[data-layout=line] .table-native-cell.table-th,
-.table.table-container[data-layout=line] .table-native-cell.table-td {
+.table :where(.table-native-cell):where(.table-td) {
+  vertical-align: middle;
+  background-color: var(--table-cell-background-color);
+  text-align: left;
+  position: relative;
+  z-index: 0;
+}
+.table[data-layout=line] :where(.table-native-cell):where(.table-th) {
   --table-cell-padding-inline: var(--table-line-cell-padding-inline);
   --table-cell-padding-block: var(--table-line-cell-padding-block);
   border-bottom: 1px solid var(--table-border-color);
 }
-
-.table.table-container[data-layout=line] .table-head .table-native-cell.table-th {
+.table[data-layout=line] :where(.table-native-cell):where(.table-td) {
+  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+  --table-cell-padding-block: var(--table-line-cell-padding-block);
+  border-bottom: 1px solid var(--table-border-color);
+}
+.table[data-layout=line] :where(.table-head) :where(.table-native-cell):where(.table-th) {
   height: var(--table-line-cell-height-head);
   border-top: 1px solid var(--table-border-color);
   background-color: var(--table-line-head-background-color);
 }
-
-.table.table-container[data-layout=line] .table-body .table-native-cell.table-td,
-.table.table-container[data-layout=line] .table-foot .table-native-cell.table-td {
+.table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-td) {
   height: var(--table-line-cell-height-body);
 }
-
-.table.table-container[data-layout=line] .table-body .table-native-cell.table-th .table-native-cell-text,
-.table.table-container[data-layout=line] .table-body .table-native-cell.table-th .table-cell-text {
+.table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-th) :where(.table-native-cell-text) {
   font-weight: 600;
 }
-
-.table.table-container[data-layout=line] .table-native-cell[rowspan] {
+.table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-th) :where(.table-cell-text) {
+  font-weight: 600;
+}
+.table[data-layout=line] :where(.table-foot) :where(.table-native-cell):where(.table-td) {
+  height: var(--table-line-cell-height-body);
+}
+.table[data-layout=line] :where(.table-native-cell[rowspan]) {
   border-right: 1px solid var(--table-border-color);
 }
-
-.table.table-container[data-layout=grid] .table-native-cell.table-th,
-.table.table-container[data-layout=grid] .table-native-cell.table-td {
+.table[data-layout=grid] {
+  border-radius: var(--table-grid-border-radius);
+  overflow: visible;
+  isolation: isolate;
+}
+.table[data-layout=grid] :where(.table-native-cell):where(.table-th) {
   --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
   --table-cell-padding-block: var(--table-grid-cell-padding-block);
   height: var(--table-grid-cell-height);
 }
-
-.table.table-container[data-layout=grid] {
-  border-radius: var(--table-grid-border-radius);
-  overflow: visible;
-  isolation: isolate;
+.table[data-layout=grid] :where(.table-native-cell):where(.table-td) {
+  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+  --table-cell-padding-block: var(--table-grid-cell-padding-block);
+  height: var(--table-grid-cell-height);
 }
-
-.table.table-container[data-layout=grid] .table-head .table-native-cell.table-th {
+.table[data-layout=grid] :where(.table-head) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-head-background-color);
 }
-
-.table.table-container[data-layout=grid] .table-body .table-native-cell.table-th {
+.table[data-layout=grid] :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:first-child) {
+  border-top-left-radius: var(--table-grid-border-radius);
+}
+.table[data-layout=grid] :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:last-child) {
+  border-top-right-radius: var(--table-grid-border-radius);
+}
+.table[data-layout=grid] :where(.table-body) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-row-header-background-color);
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-native-cell.table-th {
+.table[data-layout=grid] :where(.table-foot) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-row-header-background-color);
 }
-
-.table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-th,
-.table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-td {
+.table[data-layout=grid] :where(.table-row[data-highlighted=true]) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-row-highlight-background-color);
 }
-
-.table.table-container .table-row > .table-native-cell.table-th:first-child {
-  position: sticky;
-  left: 0;
+.table[data-layout=grid] :where(.table-row[data-highlighted=true]) :where(.table-native-cell):where(.table-td) {
+  background-color: var(--table-grid-row-highlight-background-color);
 }
-
-.table.table-container .table-head .table-row > .table-native-cell.table-th:first-child {
-  z-index: 150;
+.table[data-layout=grid] :where(.table-cell-content) {
+  border-right: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
 }
-
-.table.table-container .table-body .table-row > .table-native-cell.table-th:first-child {
-  z-index: 100;
+.table[data-layout=grid] :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell) > :where(.table-cell-content) {
+  border-top: 1px solid var(--table-border-color);
 }
-
-.table.table-container .table-foot .table-row > .table-native-cell.table-th:first-child {
-  z-index: 50;
+.table[data-layout=grid] :where(.table-row) > :where(.table-native-cell:first-child) > :where(.table-cell-content) {
+  border-left: 1px solid var(--table-border-color);
 }
-
-.table.table-container .table-head .table-row:first-child > .table-native-cell.table-th:first-child {
-  z-index: 200;
+.table[data-layout=grid] :where(.table-row) > :where(.table-native-cell[rowspan]) > :where(.table-cell-content) {
+  border-right: 0;
 }
-
-.table.table-container .table-native-cell.table-td {
-  position: relative;
-  z-index: 0;
+.table[data-layout=grid] :where(.table-row) > :where(.table-native-cell[rowspan] + .table-native-cell) > :where(.table-cell-content) {
+  border-left: 1px solid var(--table-border-color);
 }
-
-.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell:first-child {
-  border-top-left-radius: var(--table-grid-border-radius);
+.table[data-layout=grid] :where(.table-row:first-child) > :where(.table-native-cell:first-child) :where(.table-cell-content) {
+  border-top-left-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell:last-child {
-  border-top-right-radius: var(--table-grid-border-radius);
+.table[data-layout=grid] :where(.table-row:first-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
+  border-top-right-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:first-child,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:first-child {
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:first-child) {
   border-bottom-left-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:last-child,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:last-child {
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:first-child) :where(.table-cell-content) {
+  border-bottom-left-radius: inherit;
+}
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:last-child) {
   border-bottom-right-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-cell-content {
-  border-right: 1px solid var(--table-border-color);
-  border-bottom: 1px solid var(--table-border-color);
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
+  border-bottom-right-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell > .table-cell-content {
-  border-top: 1px solid var(--table-border-color);
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:first-child) {
+  border-bottom-left-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-row > .table-native-cell:first-child > .table-cell-content {
-  border-left: 1px solid var(--table-border-color);
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:first-child) :where(.table-cell-content) {
+  border-bottom-left-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-row > .table-native-cell[rowspan] > .table-cell-content {
-  border-right: 0;
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:last-child) {
+  border-bottom-right-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-row > .table-native-cell[rowspan] + .table-native-cell > .table-cell-content {
-  border-left: 1px solid var(--table-border-color);
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
+  border-bottom-right-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-row:first-child > .table-native-cell:first-child .table-cell-content {
-  border-top-left-radius: inherit;
+.table :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  position: sticky;
+  left: 0;
 }
-
-.table.table-container[data-layout=grid] .table-row:first-child > .table-native-cell:last-child .table-cell-content {
-  border-top-right-radius: inherit;
+.table :where(.table-head) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 150;
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:first-child .table-cell-content,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:first-child .table-cell-content {
-  border-bottom-left-radius: inherit;
+.table :where(.table-body) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 100;
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:last-child .table-cell-content,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:last-child .table-cell-content {
-  border-bottom-right-radius: inherit;
+.table :where(.table-foot) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 50;
+}
+.table :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 200;
+}
+.table :where(.table-foot .table-cell-content) {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+.table :where(.table-foot .table-cell-text) {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
 }
 
 .table-scroll-wrapper {
@@ -4359,14 +4424,13 @@ figure.chip {
   overflow: auto;
 }
 
-.table-native-cell.table-th .table-native-cell-text {
+:where(.table-native-cell):where(.table-th) .table-native-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
   font-weight: var(--table-th-text-weight);
   line-height: var(--table-th-text-line-height);
 }
-
-.table-native-cell.table-td .table-native-cell-text {
+:where(.table-native-cell):where(.table-td) .table-native-cell-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);
@@ -4448,7 +4512,7 @@ figure.chip {
   margin: 0;
 }
 
-.table-cell-content .table-cell-text {
+:where(.table-cell-content) :where(.table-cell-text) {
   color: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -4551,7 +4615,7 @@ figure.chip {
   align-items: baseline;
 }
 
-.table-cell.table-head-cell .table-cell-text {
+:where(.table-cell):where(.table-head-cell) .table-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
   font-weight: var(--table-th-text-weight);
@@ -4567,31 +4631,31 @@ figure.chip {
   line-height: var(--table-td-text-line-height);
 }
 
-.table-cell.table-head-cell .radio-label-text {
+:where(.table-cell):where(.table-head-cell) .radio-label-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
   font-weight: var(--table-th-text-weight);
   line-height: var(--table-th-text-line-height);
 }
-
-.table-cell.table-body-cell .table-cell-text,
-.table-cell.table-foot-cell .table-cell-text {
+:where(.table-cell):where(.table-body-cell) .table-cell-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);
   line-height: var(--table-td-text-line-height);
 }
-
-.table.table-container .table-foot .table-cell-content,
-.table.table-container .table-foot .table-cell-text {
+:where(.table-cell):where(.table-body-cell) .radio-label-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);
   line-height: var(--table-td-text-line-height);
 }
-
-.table-cell.table-body-cell .radio-label-text,
-.table-cell.table-foot-cell .radio-label-text {
+:where(.table-cell):where(.table-foot-cell) .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+:where(.table-cell):where(.table-foot-cell) .radio-label-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);