@pgcorp/ui-kit 0.13.0 → 0.15.0

package/src/components/shared/controls/SListbox.css

@@ -8,6 +8,11 @@
   @apply opacity-60;
 }
 
+.s-listbox:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
 .s-listbox[data-invalid='true'] {
   outline: var(--s-focus-ring-width) solid var(--s-selection-invalid-outline-color);
   outline-offset: var(--s-focus-ring-inset-offset);
@@ -29,3 +34,15 @@
   @apply dark:border-surface-700 dark:bg-surface-900;
   box-shadow: var(--s-elevation-overlay);
 }
+
+.s-listbox[data-virtualized='true'] {
+  position: relative;
+  max-height: none;
+  padding-block: 0;
+  overflow-anchor: none;
+}
+
+.s-listbox__spacer {
+  width: 1px;
+  pointer-events: none;
+}

package/src/components/shared/controls/SMenuSurface.css

@@ -6,17 +6,31 @@
   background: var(--s-floating-surface);
   color: var(--s-floating-foreground);
   box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
+  box-sizing: border-box;
   width: var(--s-menu-surface-width);
-  min-width: var(--s-menu-surface-min-width);
-  max-width: var(--s-menu-surface-max-width);
+  min-width: min(var(--s-menu-surface-min-width), var(--s-menu-viewport-available-inline-size, 100vw));
+  max-width: min(var(--s-menu-surface-max-width), var(--s-menu-viewport-available-inline-size, 100vw));
+  max-height: var(--s-menu-viewport-available-block-size, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.s-menu-surface__content {
+  display: flow-root;
+  min-width: 0;
 }
 
 .s-menu-surface[data-density='compact'] {
-  @apply min-w-40 rounded-md p-1;
+  @apply rounded-md p-1;
+  min-width: min(10rem, var(--s-menu-viewport-available-inline-size, 100vw));
 }
 
 .s-menu-surface[data-orientation='horizontal'] {
-  @apply flex max-w-full gap-1 overflow-x-auto;
+  @apply max-w-full overflow-x-auto;
+}
+
+.s-menu-surface[data-orientation='horizontal'] > .s-menu-surface__content {
+  @apply flex gap-1;
 }
 
 .s-menu-group {

package/src/components/shared/controls/STextarea.css

@@ -8,9 +8,48 @@
   @apply font-mono;
 }
 
-.s-textarea[data-appearance='default'][data-size='sm'] { @apply px-2.5 py-1.5 text-xs; }
-.s-textarea[data-appearance='default'][data-size='md'] { @apply px-3 py-2 text-sm; }
-.s-textarea[data-appearance='default'][data-size='lg'] { @apply px-4 py-2.5 text-lg; }
+.s-textarea__surface {
+  display: contents;
+}
+
+.s-textarea__surface[data-content-slots='true'] {
+  @apply flex w-full min-w-0 flex-col;
+  box-sizing: border-box;
+  gap: var(--s-space-control-gap);
+}
+
+.s-textarea__surface[data-appearance='default'][data-size='sm'] { @apply px-2.5 py-1.5; }
+.s-textarea__surface[data-appearance='default'][data-size='md'] { @apply px-3 py-2; }
+.s-textarea__surface[data-appearance='default'][data-size='lg'] { @apply px-4 py-2.5; }
+
+.s-textarea[data-embedded='true'] {
+  @apply border-0 bg-transparent p-0 shadow-none;
+  flex: 0 0 auto;
+  min-height: 1lh;
+  outline: none;
+}
+
+.s-textarea[data-embedded='true'][data-size='sm'] { @apply text-xs; }
+.s-textarea[data-embedded='true'][data-size='md'] { @apply text-sm; }
+.s-textarea[data-embedded='true'][data-size='lg'] { @apply text-lg; }
+
+.s-textarea__empty-content,
+.s-textarea__helper-content {
+  @apply min-h-0 min-w-0;
+  flex: 0 1 auto;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  scrollbar-gutter: stable;
+}
+
+.s-textarea__supporting-content {
+  display: flow-root;
+  min-width: 0;
+}
+
+.s-textarea[data-appearance='default'][data-size='sm']:not([data-embedded]) { @apply px-2.5 py-1.5 text-xs; }
+.s-textarea[data-appearance='default'][data-size='md']:not([data-embedded]) { @apply px-3 py-2 text-sm; }
+.s-textarea[data-appearance='default'][data-size='lg']:not([data-embedded]) { @apply px-4 py-2.5 text-lg; }
 
 .s-textarea[data-appearance='ghost'] {
   @apply border-0 bg-transparent p-0 text-surface-800 shadow-none ring-0 placeholder:text-surface-400 dark:text-surface-100 dark:placeholder:text-surface-500;

package/src/components/shared/data-display/SControlledToastViewport.css

@@ -44,35 +44,27 @@
 }
 
 .notification-transition-enter-active {
-  transition:
-    opacity var(--s-motion-standard) ease-out,
-    transform var(--s-motion-standard) ease-out;
+  transition: transform var(--s-motion-standard) ease-out;
 }
 
 .notification-transition-enter-from {
-  opacity: 0;
   transform: translate3d(0, 0.75rem, 0) scale(0.98);
 }
 
 .notification-transition-enter-to {
-  opacity: 1;
   transform: translate3d(0, 0, 0) scale(1);
 }
 
 .notification-transition-leave-active {
   position: absolute;
-  transition:
-    opacity var(--s-motion-fast) ease-in,
-    transform var(--s-motion-fast) ease-in;
+  transition: transform var(--s-motion-fast) ease-in;
 }
 
 .notification-transition-leave-from {
-  opacity: 1;
   transform: translate3d(0, 0, 0) scale(1);
 }
 
 .notification-transition-leave-to {
-  opacity: 0;
   transform: translate3d(0, 0.5rem, 0) scale(0.98);
 }
 

package/src/components/shared/data-display/SProgressBar.css

@@ -21,6 +21,78 @@
   @apply text-xs font-semibold;
 }
 
+.s-progress-bar[data-shape='linear'][data-mode='unknown'],
+.s-progress-bar[data-shape='linear'][data-accuracy='estimated'] {
+  min-block-size: var(--s-control-indicator-size);
+}
+
+.s-progress-bar-state-label {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full px-1 text-xs font-semibold;
+  color: var(--s-progress-bar-state-label-foreground);
+  background-color: var(--s-progress-bar-state-label-surface);
+}
+
+.s-progress-bar[data-accuracy='estimated'] .s-progress-bar-value {
+  transition: none;
+}
+
+.s-progress-bar[data-shape='circular'] {
+  @apply inline-flex items-center justify-center shrink-0 align-middle;
+  inline-size: var(--s-progress-ring-size-md);
+  block-size: var(--s-progress-ring-size-md);
+  background-color: transparent;
+}
+
+.s-progress-bar[data-shape='circular'][data-size='xs'] {
+  inline-size: var(--s-progress-ring-size-xs);
+  block-size: var(--s-progress-ring-size-xs);
+}
+
+.s-progress-bar[data-shape='circular'][data-size='sm'] {
+  inline-size: var(--s-progress-ring-size-sm);
+  block-size: var(--s-progress-ring-size-sm);
+}
+
+.s-progress-bar-ring {
+  @apply block w-full h-full;
+  fill: none;
+  stroke-width: var(--s-progress-ring-stroke-width);
+}
+
+.s-progress-bar-ring-track { stroke: var(--s-progress-ring-track-surface); }
+
+.s-progress-bar-ring-value {
+  stroke-linecap: butt;
+}
+
+.s-progress-bar-ring-value[data-s-tone='primary'] { stroke: var(--s-progress-ring-fill-primary); }
+.s-progress-bar-ring-value[data-s-tone='success'] { stroke: var(--s-progress-ring-fill-success); }
+.s-progress-bar-ring-value[data-s-tone='info'] { stroke: var(--s-progress-ring-fill-info); }
+.s-progress-bar-ring-value[data-s-tone='warn'] { stroke: var(--s-progress-ring-fill-warn); }
+.s-progress-bar-ring-value[data-s-tone='danger'] { stroke: var(--s-progress-ring-fill-danger); }
+.s-progress-bar-ring-value[data-s-tone='neutral'] { stroke: var(--s-progress-ring-fill-neutral); }
+
+.s-progress-bar-ring-label {
+  @apply absolute font-semibold;
+  color: var(--s-progress-ring-value-foreground);
+  font-family: var(--s-progress-ring-value-font-family);
+  font-size: var(--s-progress-ring-value-font-size-md);
+  letter-spacing: var(--s-progress-ring-value-letter-spacing);
+  line-height: var(--s-progress-ring-value-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+.s-progress-bar[data-size='xs'] .s-progress-bar-ring-label { font-size: var(--s-progress-ring-value-font-size-xs); }
+.s-progress-bar[data-size='sm'] .s-progress-bar-ring-label { font-size: var(--s-progress-ring-value-font-size-sm); }
+
+.s-progress-bar[data-shape='circular'][data-mode='indeterminate'] .s-progress-bar-ring {
+  animation: s-progress-ring-spin calc(var(--s-motion-deliberate) * 4) linear infinite;
+}
+
+@keyframes s-progress-ring-spin {
+  to { transform: rotate(360deg); }
+}
+
 /* Severity Colors */
 .s-progress-bar-value[data-s-tone='primary'] {
   background-color: var(--s-progress-bar-fill-primary);
@@ -82,3 +154,10 @@
 .s-progress-bar-value--indeterminate[data-s-tone='neutral']::before {
   background-color: var(--s-progress-bar-indeterminate-neutral-fill);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .s-progress-bar[data-shape='circular'][data-mode='indeterminate'] .s-progress-bar-ring,
+  .s-progress-bar-value--indeterminate::before {
+    animation: none;
+  }
+}

package/src/components/shared/data-display/SRichDocument.css

@@ -3,6 +3,7 @@
 .s-rich-document {
   @apply min-w-0 text-base leading-7 text-surface-800 dark:text-surface-200;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--s-space-section-gap);
   overflow-wrap: anywhere;
 }

package/src/components/shared/data-display/SScrollViewport.css

@@ -34,6 +34,22 @@
   block-size: 100%;
 }
 
+.s-scroll-viewport[data-block-size='content'] {
+  block-size: auto;
+}
+
+.s-scroll-viewport[data-max-block-size='sm'] {
+  max-block-size: var(--s-scroll-viewport-max-block-size-sm);
+}
+
+.s-scroll-viewport[data-max-block-size='md'] {
+  max-block-size: var(--s-scroll-viewport-max-block-size-md);
+}
+
+.s-scroll-viewport[data-max-block-size='lg'] {
+  max-block-size: var(--s-scroll-viewport-max-block-size-lg);
+}
+
 .s-scroll-viewport[data-overscroll-behavior='contain'] {
   overscroll-behavior: contain;
 }
@@ -42,7 +58,7 @@
   overscroll-behavior: none;
 }
 
-.s-scroll-viewport[data-focusable='true']:focus-visible {
+.s-scroll-viewport:focus-visible {
   outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
   outline-offset: var(--s-focus-ring-inset-offset);
 }

package/src/components/shared/data-display/SStatus.css

@@ -2,6 +2,7 @@
 
 .s-status {
   @apply inline-flex min-w-0 items-center font-medium;
+  color: var(--s-passive-content-foreground, var(--s-feedback-tone-foreground));
 }
 
 .s-status[data-visibility='assistive'] {
@@ -22,6 +23,8 @@
 
 .s-status[data-appearance='soft'] {
   @apply rounded-full border px-2 py-0.5;
+  background: var(--s-feedback-tone-background);
+  color: var(--s-feedback-tone-foreground);
 }
 
 .s-status__icon {
@@ -53,42 +56,22 @@
   @apply sr-only;
 }
 
-.s-status[data-s-tone='neutral'] {
-  @apply text-surface-500 dark:text-surface-400;
-}
-
-.s-status[data-s-tone='info'] {
-  @apply text-info-700 dark:text-info-300;
-}
-
-.s-status[data-s-tone='success'] {
-  @apply text-success-700 dark:text-success-300;
-}
-
-.s-status[data-s-tone='warn'] {
-  @apply text-warn-700 dark:text-warn-300;
-}
-
-.s-status[data-s-tone='danger'] {
-  @apply text-danger-700 dark:text-danger-300;
-}
-
 .s-status[data-appearance='soft'][data-s-tone='neutral'] {
-  @apply border-surface-200 bg-surface-100 dark:border-surface-700 dark:bg-surface-800;
+  @apply border-surface-200 dark:border-surface-700;
 }
 
 .s-status[data-appearance='soft'][data-s-tone='info'] {
-  @apply border-info-200 bg-info-50 dark:border-info-800 dark:bg-info-950;
+  @apply border-info-200 dark:border-info-800;
 }
 
 .s-status[data-appearance='soft'][data-s-tone='success'] {
-  @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950;
+  @apply border-success-200 dark:border-success-800;
 }
 
 .s-status[data-appearance='soft'][data-s-tone='warn'] {
-  @apply border-warn-200 bg-warn-50 dark:border-warn-800 dark:bg-warn-950;
+  @apply border-warn-200 dark:border-warn-800;
 }
 
 .s-status[data-appearance='soft'][data-s-tone='danger'] {
-  @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950;
+  @apply border-danger-200 dark:border-danger-800;
 }

package/src/components/shared/data-display/STable.css

@@ -1,122 +1,9 @@
 @reference "../../../styles/reference.css";
 
-.s-table-wrapper {
-  @apply w-full min-w-0 overflow-auto rounded-lg border border-surface-200 bg-surface-0;
-  @apply dark:border-surface-700 dark:bg-surface-800;
-}
-
-.s-table-wrapper[data-surface="plain"] {
-  @apply rounded-none border-0 bg-transparent dark:bg-transparent;
-}
-
-.s-table-wrapper[data-max-height="sm"] { max-block-size: var(--s-scroll-viewport-max-block-size-sm); }
-.s-table-wrapper[data-max-height="md"] { max-block-size: var(--s-scroll-viewport-max-block-size-md); }
-.s-table-wrapper[data-max-height="lg"] { max-block-size: var(--s-scroll-viewport-max-block-size-lg); }
-
-.s-table {
-  @apply min-w-full border-collapse text-left text-sm;
-}
-
-.s-table-wrapper[data-min-width="md"] .s-table {
-  min-inline-size: var(--s-table-inline-size-md);
-}
-
-.s-table-wrapper[data-min-width="lg"] .s-table {
-  min-inline-size: var(--s-table-inline-size-lg);
-}
-
-.s-table-header th {
-  @apply sticky top-0 border-b border-surface-200 bg-surface-50 px-4 py-3;
-  z-index: var(--s-layer-sticky);
-  min-height: var(--s-density-row-comfortable);
-  @apply text-xs font-semibold uppercase tracking-wider text-surface-500;
-  @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-400;
-}
-
-.s-table-header th[data-width="auto"] { inline-size: auto; }
-.s-table-header th[data-width="content"] { inline-size: 1%; white-space: nowrap; }
-.s-table-header th[data-width="2xs"] { inline-size: var(--s-table-column-inline-size-2xs); }
-.s-table-header th[data-width="xs"] { inline-size: var(--s-table-column-inline-size-xs); }
-.s-table-header th[data-width="sm"] { inline-size: var(--s-table-column-inline-size-sm); }
-.s-table-header th[data-width="md"] { inline-size: var(--s-table-column-inline-size-md); }
-.s-table-header th[data-width="lg"] { inline-size: var(--s-table-column-inline-size-lg); }
-.s-table-header th[data-width="xl"] { inline-size: var(--s-table-column-inline-size-xl); }
-.s-table-header th[data-width="fill"] { inline-size: 100%; }
-.s-table-header th[data-min-width="2xs"] { min-inline-size: var(--s-table-column-inline-size-2xs); }
-.s-table-header th[data-min-width="xs"] { min-inline-size: var(--s-table-column-inline-size-xs); }
-.s-table-header th[data-min-width="sm"] { min-inline-size: var(--s-table-column-inline-size-sm); }
-.s-table-header th[data-min-width="md"] { min-inline-size: var(--s-table-column-inline-size-md); }
-.s-table-header th[data-min-width="lg"] { min-inline-size: var(--s-table-column-inline-size-lg); }
-.s-table-header th[data-min-width="xl"] { min-inline-size: var(--s-table-column-inline-size-xl); }
-
-.s-table-body tr {
-  @apply border-b border-surface-100 dark:border-surface-700/50;
-}
-
-.s-table-body tr:last-child {
-  @apply border-b-0;
-}
-
-.s-table-body tr:hover {
-  @apply bg-surface-50/50 dark:bg-surface-800/20;
-}
-
-.s-table-body tr[data-selected="true"] td {
-  @apply bg-primary-50 dark:bg-primary-950/30;
-}
-
-.s-table-body td {
-  @apply px-4 py-3 align-middle text-surface-700 dark:text-surface-300;
-  height: var(--s-density-row-comfortable);
-}
-
-.s-table[data-density="compact"] th { @apply px-3 py-2; }
-.s-table[data-density="compact"] td { @apply px-2 py-1.5; height: var(--s-density-row-compact); }
-
-.s-table th.s-table__control-cell,
-.s-table td.s-table__control-cell {
-  @apply px-2 text-center;
-  inline-size: var(--s-table-column-inline-size-2xs);
-  min-inline-size: var(--s-table-column-inline-size-2xs);
-}
-
-.s-table__control-cell > * {
-  @apply mx-auto;
-}
-
-.s-table__header-content[data-header-presentation="assistive"],
 .s-table__assistive {
   @apply sr-only;
 }
 
-.s-table-body tr[data-row-details] {
-  @apply bg-surface-50/40 dark:bg-surface-900/40;
-}
-
-.s-table-body tr[data-row-details]:hover {
-  @apply bg-surface-50/40 dark:bg-surface-900/40;
-}
-
-.s-table-body tr[data-row-details] > td {
-  @apply h-auto p-0;
-}
-
 .s-table__row-details {
   @apply px-4 py-3 text-surface-700 dark:text-surface-300;
 }
-
-.s-table [data-align="center"] { text-align: center; }
-.s-table [data-align="right"] { text-align: right; }
-
-.s-table-body tr[data-state="inserted"] td {
-  @apply bg-success-50 dark:bg-success-950/25;
-}
-
-.s-table-body tr[data-state="updated"] td,
-.s-table-body td[data-state="pending"] {
-  @apply bg-primary-50 dark:bg-primary-950/25;
-}
-
-.s-table-body tr[data-state="deleted"] td {
-  @apply bg-danger-50 text-danger-700 line-through dark:bg-danger-950/25 dark:text-danger-300;
-}

package/src/components/shared/data-display/STooltip.css

@@ -112,3 +112,6 @@
   transform: translateY(-50%);
   border-right-color: var(--s-floating-surface);
 }
+.s-tooltip[hidden] {
+  display: none;
+}

package/src/components/shared/data-display/_internal/SRichBlockNode.css

@@ -19,6 +19,10 @@ h4.s-rich-document__heading { @apply text-lg; }
 h5.s-rich-document__heading,
 h6.s-rich-document__heading { @apply text-base; }
 
+.s-rich-document__heading--assistive {
+  @apply sr-only;
+}
+
 .s-rich-document__list {
   display: grid;
   gap: var(--s-space-content-gap);
@@ -42,6 +46,7 @@ ol.s-rich-document__list { list-style: decimal; }
 }
 
 .s-rich-document__list-item-content,
+.s-rich-document__group,
 .s-rich-document__footnote-definition {
   display: grid;
   min-width: 0;
@@ -74,13 +79,12 @@ ol.s-rich-document__list { list-style: decimal; }
   margin: 0;
 }
 
-.s-rich-document__image {
-  @apply rounded-lg border border-surface-200 bg-surface-50 dark:border-surface-700 dark:bg-surface-900;
-  display: block;
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin-inline: auto;
+.s-rich-document__definitions { margin: 0; }
+.s-rich-document__definitions dt { font-weight: 600; }
+.s-rich-document__definitions dd {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0 0 var(--s-space-content-gap) var(--s-space-section-gap);
 }
 
 .s-rich-document__caption,

package/src/components/shared/data-display/_internal/SRichDisclosure.css

@@ -23,3 +23,19 @@
   gap: var(--s-space-content-gap);
   padding: var(--s-space-section-gap);
 }
+
+.s-rich-disclosure__content[hidden] { display: none; }
+
+.s-rich-disclosure__header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--s-space-content-gap);
+  padding: var(--s-space-content-gap) var(--s-space-section-gap);
+}
+
+.s-rich-disclosure__rich-summary {
+  @apply font-semibold text-surface-900 dark:text-surface-100;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}

package/src/components/shared/data-display/_internal/SRichImage.css

@@ -0,0 +1,37 @@
+@reference '../../../../styles/reference.css';
+
+.s-rich-image {
+  max-inline-size: 100%;
+}
+
+.s-rich-image__media {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.s-rich-image[data-presentation='inline'] {
+  display: inline;
+  vertical-align: baseline;
+}
+
+.s-rich-image[data-presentation='inline'] > .s-rich-image__media {
+  display: inline;
+  vertical-align: baseline;
+}
+
+.s-rich-image[data-presentation='block'] {
+  display: block;
+  inline-size: fit-content;
+  margin-inline: auto;
+}
+
+.s-rich-image[data-presentation='block'].s-rich-image__media,
+.s-rich-image[data-presentation='block'] > .s-rich-image__media {
+  @apply rounded-lg border border-surface-200 bg-surface-50 dark:border-surface-700 dark:bg-surface-900;
+  display: block;
+}
+
+.s-rich-image__media:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}

package/src/components/shared/data-display/_internal/STableCell.css

@@ -0,0 +1,55 @@
+@reference "../../../../styles/reference.css";
+
+.s-table-cell {
+  @apply align-middle text-surface-700 dark:text-surface-300;
+  padding: var(--s-table-cell-padding-block, 0.75rem) var(--s-table-cell-padding-inline, 1rem);
+  height: var(--s-table-row-block-size, var(--s-density-row-comfortable));
+}
+
+.s-table-cell[data-kind="header"] { @apply font-semibold; }
+.s-table-cell[data-section="head"] {
+  @apply border-b border-surface-200 bg-surface-50 text-xs font-semibold uppercase tracking-wider text-surface-500;
+  @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-400;
+  padding: var(--s-table-header-padding-block, 0.75rem) var(--s-table-header-padding-inline, 1rem);
+  height: auto;
+  min-height: var(--s-table-row-block-size, var(--s-density-row-comfortable));
+  position: sticky;
+  top: 0;
+  z-index: var(--s-layer-sticky);
+}
+.s-table-cell[data-section="foot"] {
+  @apply border-t border-surface-200 bg-surface-50 dark:border-surface-700 dark:bg-surface-800;
+}
+.s-table-cell[data-width="auto"] { inline-size: auto; }
+.s-table-cell[data-width="content"] { inline-size: 1%; white-space: nowrap; }
+.s-table-cell[data-width="2xs"] { inline-size: var(--s-table-column-inline-size-2xs); }
+.s-table-cell[data-width="xs"] { inline-size: var(--s-table-column-inline-size-xs); }
+.s-table-cell[data-width="sm"] { inline-size: var(--s-table-column-inline-size-sm); }
+.s-table-cell[data-width="md"] { inline-size: var(--s-table-column-inline-size-md); }
+.s-table-cell[data-width="lg"] { inline-size: var(--s-table-column-inline-size-lg); }
+.s-table-cell[data-width="xl"] { inline-size: var(--s-table-column-inline-size-xl); }
+.s-table-cell[data-width="fill"] { inline-size: 100%; }
+.s-table-cell[data-min-width="2xs"] { min-inline-size: var(--s-table-column-inline-size-2xs); }
+.s-table-cell[data-min-width="xs"] { min-inline-size: var(--s-table-column-inline-size-xs); }
+.s-table-cell[data-min-width="sm"] { min-inline-size: var(--s-table-column-inline-size-sm); }
+.s-table-cell[data-min-width="md"] { min-inline-size: var(--s-table-column-inline-size-md); }
+.s-table-cell[data-min-width="lg"] { min-inline-size: var(--s-table-column-inline-size-lg); }
+.s-table-cell[data-min-width="xl"] { min-inline-size: var(--s-table-column-inline-size-xl); }
+.s-table-cell[data-align="center"] { text-align: center; }
+.s-table-cell[data-align="right"] { text-align: right; }
+.s-table-cell[data-presentation="control"] {
+  @apply text-center;
+  padding-inline: 0.5rem;
+  inline-size: var(--s-table-column-inline-size-2xs);
+  min-inline-size: var(--s-table-column-inline-size-2xs);
+}
+.s-table-cell__control { @apply flex items-center justify-center; }
+.s-table-cell__assistive { @apply sr-only; }
+.s-table-cell[data-presentation="details"] { @apply h-auto p-0; }
+.s-table-cell[data-selected="true"] { @apply bg-primary-50 dark:bg-primary-950/30; }
+.s-table-cell[data-row-state="inserted"] { @apply bg-success-50 dark:bg-success-950/25; }
+.s-table-cell[data-row-state="updated"],
+.s-table-cell[data-state="pending"] { @apply bg-primary-50 dark:bg-primary-950/25; }
+.s-table-cell[data-row-state="deleted"] {
+  @apply bg-danger-50 text-danger-700 line-through dark:bg-danger-950/25 dark:text-danger-300;
+}

package/src/components/shared/data-display/_internal/STableFrame.css

@@ -0,0 +1,37 @@
+@reference "../../../../styles/reference.css";
+
+.s-table-wrapper {
+  @apply w-full min-w-0 overflow-hidden rounded-lg border border-surface-200 bg-surface-0;
+  @apply dark:border-surface-700 dark:bg-surface-800;
+}
+
+.s-table-wrapper[data-surface="plain"] {
+  @apply rounded-none border-0 bg-transparent dark:bg-transparent;
+}
+
+.s-table {
+  --s-table-cell-padding-inline: 1rem;
+  --s-table-cell-padding-block: 0.75rem;
+  --s-table-header-padding-inline: 1rem;
+  --s-table-header-padding-block: 0.75rem;
+  --s-table-row-block-size: var(--s-density-row-comfortable);
+
+  @apply min-w-full border-collapse text-left text-sm;
+}
+
+.s-table-wrapper[data-min-width="md"] { --s-table-min-inline-size: var(--s-table-inline-size-md); }
+.s-table-wrapper[data-min-width="lg"] { --s-table-min-inline-size: var(--s-table-inline-size-lg); }
+.s-table { min-inline-size: var(--s-table-min-inline-size, 100%); }
+
+.s-table[data-density="compact"] {
+  --s-table-cell-padding-inline: 0.5rem;
+  --s-table-cell-padding-block: 0.375rem;
+  --s-table-header-padding-inline: 0.75rem;
+  --s-table-header-padding-block: 0.5rem;
+  --s-table-row-block-size: var(--s-density-row-compact);
+}
+
+.s-table__caption {
+  @apply text-left text-sm font-medium text-surface-700 dark:text-surface-300;
+  padding: var(--s-table-header-padding-block) var(--s-table-header-padding-inline);
+}