@pgcorp/ui-kit 0.9.0 → 0.10.1

package/src/components/shared/_internal/SDialogSurface.css

@@ -4,6 +4,11 @@
   box-shadow: var(--s-elevation-overlay);
 }
 
+.s-dialog-surface:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
 .s-dialog-surface[data-presentation='modal'] {
   @apply w-full transform overflow-hidden rounded-2xl p-6 text-left align-middle transition-all;
   @apply bg-surface-0 dark:bg-surface-800;

package/src/components/shared/_internal/SToastItem.css

@@ -28,6 +28,10 @@
   word-break: break-word;
 }
 
+.s-toast-actions {
+  @apply mt-2 flex flex-wrap gap-2;
+}
+
 .s-toast-close {
   @apply ml-auto shrink-0;
 }

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

@@ -28,20 +28,38 @@
 }
 
 .s-button[data-size='xs']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-xs);
-  padding: 0.25rem 0.5rem;
+  block-size: var(--s-control-hitbox-xs);
+  min-block-size: var(--s-control-hitbox-xs);
+  padding: 0 0.5rem;
   font-size: 0.75rem;
 }
 
 .s-button[data-density='compact'][data-size='xs']:not([data-icon-only='true']) {
-  height: var(--s-control-hitbox-xs);
-  min-height: var(--s-control-hitbox-xs);
+  block-size: var(--s-control-hitbox-2xs);
+  min-block-size: var(--s-control-hitbox-2xs);
   padding-block: 0;
 }
 
+.s-button[data-density='compact'][data-size='sm']:not([data-icon-only='true']) {
+  block-size: var(--s-control-hitbox-xs);
+  min-block-size: var(--s-control-hitbox-xs);
+}
+
+.s-button[data-density='compact'][data-size='md']:not([data-icon-only='true']) {
+  block-size: var(--s-control-hitbox-sm);
+  min-block-size: var(--s-control-hitbox-sm);
+}
+
+.s-button[data-density='compact'][data-size='lg']:not([data-icon-only='true']) {
+  block-size: var(--s-control-hitbox-md);
+  min-block-size: var(--s-control-hitbox-md);
+  font-size: 0.875rem;
+}
+
 .s-button[data-size='sm']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-sm);
-  padding: 0.375rem 0.625rem;
+  block-size: var(--s-control-hitbox-sm);
+  min-block-size: var(--s-control-hitbox-sm);
+  padding: 0 0.625rem;
   font-size: 0.75rem;
 }
 
@@ -57,14 +75,16 @@
 }
 
 .s-button[data-size='md']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-md);
-  padding: 0.625rem 1.25rem;
+  block-size: var(--s-control-hitbox-md);
+  min-block-size: var(--s-control-hitbox-md);
+  padding: 0 1.25rem;
   font-size: 0.875rem;
 }
 
 .s-button[data-size='lg']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-lg);
-  padding: 0.875rem 1.75rem;
+  block-size: var(--s-control-hitbox-lg);
+  min-block-size: var(--s-control-hitbox-lg);
+  padding: 0 1.75rem;
   font-size: 1.125rem;
 }
 
@@ -78,6 +98,11 @@
 .s-button[data-icon-only='true'][data-size='md'] { width: var(--s-control-hitbox-md); height: var(--s-control-hitbox-md); }
 .s-button[data-icon-only='true'][data-size='lg'] { width: var(--s-control-hitbox-lg); height: var(--s-control-hitbox-lg); }
 
+.s-button[data-density='compact'][data-icon-only='true'][data-size='xs'] { width: var(--s-control-hitbox-2xs); height: var(--s-control-hitbox-2xs); }
+.s-button[data-density='compact'][data-icon-only='true'][data-size='sm'] { width: var(--s-control-hitbox-xs); height: var(--s-control-hitbox-xs); }
+.s-button[data-density='compact'][data-icon-only='true'][data-size='md'] { width: var(--s-control-hitbox-sm); height: var(--s-control-hitbox-sm); }
+.s-button[data-density='compact'][data-icon-only='true'][data-size='lg'] { width: var(--s-control-hitbox-md); height: var(--s-control-hitbox-md); }
+
 .s-button[data-s-tone='secondary'] {
   --s-button-accent: var(--s-button-secondary-accent);
   --s-button-solid-background: var(--s-button-secondary-solid-background);

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

@@ -6,10 +6,13 @@
 
 .s-combobox-trigger[data-width='full'] { @apply w-full; }
 .s-combobox-trigger[data-width='auto'] { @apply w-auto; }
-.s-combobox-trigger[data-size='xs'] { min-height: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
-.s-combobox-trigger[data-size='sm'] { min-height: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
-.s-combobox-trigger[data-size='md'] { min-height: var(--s-control-hitbox-md); @apply text-sm; }
-.s-combobox-trigger[data-appearance='swatch'] { width: var(--s-control-hitbox-md); @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-size='xs'] { block-size: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
+.s-combobox-trigger[data-size='sm'] { block-size: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
+.s-combobox-trigger[data-size='md'] { block-size: var(--s-control-hitbox-md); @apply text-sm; }
+.s-combobox-trigger[data-appearance='swatch'] { @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-appearance='swatch'][data-size='xs'] { inline-size: var(--s-control-hitbox-xs); }
+.s-combobox-trigger[data-appearance='swatch'][data-size='sm'] { inline-size: var(--s-control-hitbox-sm); }
+.s-combobox-trigger[data-appearance='swatch'][data-size='md'] { inline-size: var(--s-control-hitbox-md); }
 .s-combobox-trigger[data-appearance='swatch']:disabled { @apply cursor-not-allowed opacity-50; }
 
 .s-combobox-trigger__value {

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

@@ -11,16 +11,24 @@
   @apply block w-full min-w-0 box-border;
 }
 
-.s-input-text[data-size='sm'] { @apply px-2.5 py-1.5 text-xs; }
-.s-input-text[data-size='md'] { @apply px-3 py-2 text-sm; }
-.s-input-text[data-size='lg'] { @apply px-4 py-2.5 text-lg; }
+.s-input-text[data-size='sm'] { block-size: var(--s-control-hitbox-sm); @apply px-2.5 py-0 text-xs; }
+.s-input-text[data-size='md'] { block-size: var(--s-control-hitbox-md); @apply px-3 py-0 text-sm; }
+.s-input-text[data-size='lg'] { block-size: var(--s-control-hitbox-lg); @apply px-4 py-0 text-lg; }
+
+.s-input-text[data-density='compact'][data-size='sm'] { block-size: var(--s-control-hitbox-xs); }
+.s-input-text[data-density='compact'][data-size='md'] { block-size: var(--s-control-hitbox-sm); }
+.s-input-text[data-density='compact'][data-size='lg'] {
+  block-size: var(--s-control-hitbox-md);
+  @apply text-sm;
+}
 
 .s-input-text--monospace {
   @apply font-mono;
 }
 
 .s-input-text[data-appearance='grid-cell'] {
-  @apply h-8 rounded-none border-transparent bg-transparent px-2 py-1 text-sm shadow-none;
+  block-size: var(--s-density-row-compact);
+  @apply rounded-none border-transparent bg-transparent px-2 py-0 text-sm shadow-none;
 }
 
 .s-input-text[data-appearance='workbench-title'] {

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

@@ -111,6 +111,10 @@
   grid-template-columns: max-content minmax(0, 1fr);
 }
 
+.s-code-block-plain__line[data-line-numbers='hidden'] {
+  display: block;
+}
+
 .s-code-block-plain__line-number {
   min-width: 2.5rem;
   padding-inline-end: 0.75rem;

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

@@ -87,6 +87,23 @@
   @apply text-surface-400 dark:text-surface-500;
 }
 
+.s-code-editor :deep(.cm-lintRange-error) {
+  text-decoration-color: var(--s-code-editor-diagnostic-error);
+}
+
+.s-code-editor :deep(.cm-lintRange-warning) {
+  text-decoration-color: var(--s-code-editor-diagnostic-warning);
+}
+
+.s-code-editor :deep(.cm-lintRange-info),
+.s-code-editor :deep(.cm-lintRange-hint) {
+  text-decoration-color: var(--s-code-editor-diagnostic-info);
+}
+
+.s-code-editor__diagnostics {
+  @apply sr-only;
+}
+
 .s-code-editor :deep(.cm-tooltip) {
   @apply rounded-md border border-surface-200 bg-surface-0 text-surface-900 shadow-lg;
   @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-100;

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

@@ -0,0 +1,13 @@
+@reference "../../../styles/reference.css";
+
+.s-code-workspace-editor {
+  @apply flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface-0 dark:bg-surface-900;
+  width: 100%;
+  height: 100%;
+}
+
+.s-code-workspace-editor[data-empty='true'] {
+  @apply items-center justify-center;
+  min-height: var(--s-code-editor-viewport-compact);
+  padding: var(--s-space-section-gap);
+}

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

@@ -0,0 +1,89 @@
+@reference "../../../styles/reference.css";
+
+.s-toast-container {
+  @apply fixed flex max-h-[100dvh] min-w-0 w-full max-w-md flex-col overflow-y-auto overscroll-contain p-4;
+  z-index: var(--s-layer-root-toast);
+  pointer-events: none;
+}
+
+.s-toast-container[data-position^='top-'] {
+  inset-block-start: 0;
+}
+
+.s-toast-container[data-position^='bottom-'] {
+  inset-block-end: 0;
+}
+
+.s-toast-container[data-position$='-start'] {
+  inset-inline-start: 0;
+}
+
+.s-toast-container[data-position$='-end'] {
+  inset-inline-end: 0;
+}
+
+.s-toast-container[data-position$='-center'] {
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+.s-toast-transition-wrapper {
+  @apply relative flex flex-col gap-2;
+}
+
+.s-toast-container[data-position$='-start'] .s-toast-transition-wrapper {
+  align-items: flex-start;
+}
+
+.s-toast-container[data-position$='-center'] .s-toast-transition-wrapper {
+  align-items: center;
+}
+
+.s-toast-container[data-position$='-end'] .s-toast-transition-wrapper {
+  align-items: flex-end;
+}
+
+.notification-transition-enter-active {
+  transition:
+    opacity var(--s-motion-standard) ease-out,
+    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;
+}
+
+.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);
+}
+
+.notification-transition-move {
+  transition: transform var(--s-motion-standard) ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notification-transition-enter-active,
+  .notification-transition-leave-active,
+  .notification-transition-move {
+    transition-duration: 0.01ms;
+  }
+}

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

@@ -0,0 +1,122 @@
+@reference "../../../styles/reference.css";
+
+.s-diff-viewer {
+  @apply flex min-h-0 min-w-0 flex-col overflow-hidden rounded-md border border-surface-200 text-surface-900 dark:border-surface-700 dark:text-surface-100;
+  width: 100%;
+  background: var(--s-diff-surface);
+}
+
+.s-diff-viewer[data-viewport='content'] {
+  block-size: min(
+    calc((var(--s-diff-content-row-count) * var(--s-diff-row-block-size)) + 4.5rem),
+    var(--s-code-editor-viewport-content-max)
+  );
+}
+
+.s-diff-viewer[data-viewport='compact'] { block-size: var(--s-code-editor-viewport-compact); }
+.s-diff-viewer[data-viewport='standard'] { block-size: var(--s-code-editor-viewport-standard); }
+.s-diff-viewer[data-viewport='expanded'] { block-size: var(--s-code-editor-viewport-expanded); }
+.s-diff-viewer[data-viewport='fill'] { block-size: 100%; }
+
+.s-diff-viewer__header,
+.s-diff-viewer__split-header {
+  @apply flex shrink-0 items-center justify-between gap-3 border-b border-surface-200 px-3 text-xs dark:border-surface-700;
+  min-block-size: 2.25rem;
+}
+
+.s-diff-viewer__sources { @apply flex min-w-0 items-center gap-2; }
+.s-diff-viewer__source { @apply min-w-0 truncate font-semibold; }
+.s-diff-viewer__direction,
+.s-diff-viewer__summary { @apply shrink-0 text-surface-500 dark:text-surface-400; }
+
+.s-diff-viewer__split-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  padding-inline: 0;
+}
+
+.s-diff-viewer__split-header > span { @apply truncate px-3 font-semibold; }
+.s-diff-viewer__split-header > span + span { @apply border-l border-surface-200 dark:border-surface-700; }
+
+.s-diff-viewer__viewport {
+  @apply min-h-0 min-w-0 flex-1;
+  overflow: hidden;
+}
+
+.s-diff-viewer__error {
+  @apply flex min-h-0 flex-col items-start gap-3 p-3;
+}
+
+.s-diff-viewer__gap-row {
+  @apply flex min-w-0 items-center border-y border-surface-200 px-2 dark:border-surface-700;
+  min-block-size: var(--s-diff-row-block-size);
+  background: var(--s-diff-context-surface);
+}
+
+.s-diff-viewer__unified-row,
+.s-diff-viewer__split-row,
+.s-diff-viewer__split-cell {
+  min-width: 0;
+  min-block-size: var(--s-diff-row-block-size);
+}
+
+.s-diff-viewer__unified-row {
+  display: grid;
+  grid-template-columns: 2rem 3rem 3rem minmax(var(--s-diff-unified-code-inline-size), 1fr);
+  width: 100%;
+  min-width: calc(9rem + var(--s-diff-unified-code-inline-size));
+}
+
+.s-diff-viewer__split-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  width: 100%;
+  min-width: 100%;
+}
+
+.s-diff-viewer__split-cell {
+  display: grid;
+  grid-template-columns: 3rem minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.s-diff-viewer__split-cell + .s-diff-viewer__split-cell {
+  @apply border-l border-surface-200 dark:border-surface-700;
+}
+
+.s-diff-viewer__marker,
+.s-diff-viewer__line-number {
+  @apply select-none text-right text-xs text-surface-500 dark:text-surface-400;
+  min-block-size: var(--s-diff-row-block-size);
+  padding-inline: 0.5rem;
+  background: var(--s-diff-gutter-surface);
+  font-family: var(--font-mono);
+  line-height: var(--s-diff-row-block-size);
+}
+
+.s-diff-viewer__marker { @apply text-center font-semibold; }
+
+.s-diff-viewer__code-cell {
+  @apply relative overflow-hidden px-2;
+  min-width: 0;
+  min-block-size: var(--s-diff-row-block-size);
+}
+
+.s-diff-viewer__unified-row[data-kind='added'],
+.s-diff-viewer__split-cell[data-kind='added'] {
+  background: var(--s-diff-added-surface);
+  box-shadow: inset 2px 0 var(--s-diff-added-accent);
+}
+
+.s-diff-viewer__unified-row[data-kind='removed'],
+.s-diff-viewer__split-cell[data-kind='removed'] {
+  background: var(--s-diff-removed-surface);
+  box-shadow: inset 2px 0 var(--s-diff-removed-accent);
+}
+
+.s-diff-viewer__split-cell[data-kind='empty'] { background: var(--s-diff-gutter-surface); }
+
+.s-diff-viewer__missing-break {
+  @apply absolute right-1 top-0 text-xs font-semibold text-surface-500 dark:text-surface-400;
+  line-height: var(--s-diff-row-block-size);
+}

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

@@ -0,0 +1,8 @@
+@reference "../../../styles/reference.css";
+
+.s-rich-document {
+  @apply min-w-0 text-base leading-7 text-surface-800 dark:text-surface-200;
+  display: grid;
+  gap: var(--s-space-section-gap);
+  overflow-wrap: anywhere;
+}

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

@@ -0,0 +1,53 @@
+@reference "../../../styles/reference.css";
+
+.s-scroll-viewport {
+  @apply relative min-h-0 min-w-0;
+}
+
+.s-scroll-viewport[data-axis='x'] {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.s-scroll-viewport[data-axis='y'] {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.s-scroll-viewport[data-axis='both'] {
+  overflow: auto;
+}
+
+.s-scroll-viewport[data-block-size='sm'] {
+  block-size: var(--s-scroll-viewport-max-block-size-sm);
+}
+
+.s-scroll-viewport[data-block-size='md'] {
+  block-size: var(--s-scroll-viewport-max-block-size-md);
+}
+
+.s-scroll-viewport[data-block-size='lg'] {
+  block-size: var(--s-scroll-viewport-max-block-size-lg);
+}
+
+.s-scroll-viewport[data-block-size='fill'] {
+  block-size: 100%;
+}
+
+.s-scroll-viewport[data-overscroll-behavior='contain'] {
+  overscroll-behavior: contain;
+}
+
+.s-scroll-viewport[data-overscroll-behavior='none'] {
+  overscroll-behavior: none;
+}
+
+.s-scroll-viewport[data-focusable='true']:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-scroll-viewport__content {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+}

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

@@ -0,0 +1,72 @@
+@reference "../../../../styles/reference.css";
+
+.s-code-token-line {
+  display: block;
+  min-width: max-content;
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: var(--s-diff-row-block-size);
+  tab-size: 2;
+  white-space: pre;
+}
+
+.s-code-token-line[data-wrap='true'] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.s-code-token-line[data-variant='code-block'] {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--s-code-token-comment);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst,
+.hljs-built_in,
+.hljs-type {
+  color: var(--s-code-token-keyword);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: var(--s-code-token-title);
+  font-weight: 600;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute {
+  color: var(--s-code-token-literal);
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: var(--s-code-token-string);
+}
+
+.hljs-meta,
+.hljs-link,
+.hljs-name,
+.hljs-tag,
+.hljs-deletion {
+  color: var(--s-code-token-meta);
+}
+
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }

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

@@ -0,0 +1,109 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-document__paragraph {
+  min-width: 0;
+  margin: 0;
+}
+
+.s-rich-document__heading {
+  @apply font-semibold text-surface-950 dark:text-surface-50;
+  min-width: 0;
+  margin: 0;
+  line-height: 1.25;
+}
+
+h1.s-rich-document__heading { @apply text-3xl; }
+h2.s-rich-document__heading { @apply text-2xl; }
+h3.s-rich-document__heading { @apply text-xl; }
+h4.s-rich-document__heading { @apply text-lg; }
+h5.s-rich-document__heading,
+h6.s-rich-document__heading { @apply text-base; }
+
+.s-rich-document__list {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0;
+  padding-inline-start: 1.5rem;
+}
+
+ul.s-rich-document__list { list-style: disc; }
+ol.s-rich-document__list { list-style: decimal; }
+
+.s-rich-document__list[data-task-list='true'] {
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.s-rich-document__task-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--s-space-control-gap);
+}
+
+.s-rich-document__list-item-content,
+.s-rich-document__footnote-definition {
+  display: grid;
+  min-width: 0;
+  gap: var(--s-space-content-gap);
+}
+
+.s-rich-document__footnote-definition {
+  @apply border-t border-surface-200 pt-3 text-sm text-surface-600 dark:border-surface-700 dark:text-surface-300;
+  scroll-margin-block-start: var(--s-space-section-gap);
+}
+
+.s-rich-document__quote {
+  @apply border-l-4 border-primary-300 text-surface-600 dark:border-primary-700 dark:text-surface-300;
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0;
+  padding-inline-start: var(--s-space-section-gap);
+}
+
+.s-rich-document__divider {
+  @apply border-0 border-t border-surface-200 dark:border-surface-700;
+  width: 100%;
+  margin: 0;
+}
+
+.s-rich-document__figure {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  min-width: 0;
+  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__caption,
+.s-rich-document__resource-description {
+  @apply text-sm text-surface-500 dark:text-surface-400;
+}
+
+.s-rich-document__caption {
+  text-align: center;
+}
+
+.s-rich-document__resource {
+  @apply flex min-w-0 flex-wrap items-center;
+  gap: var(--s-space-content-gap);
+}
+
+.s-rich-document__callout-content {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  min-width: 0;
+}
+
+.s-rich-document__actions {
+  @apply flex min-w-0 flex-wrap items-center;
+  gap: var(--s-space-content-gap);
+}

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

@@ -0,0 +1,25 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-disclosure {
+  @apply rounded-lg border border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900;
+  min-width: 0;
+}
+
+.s-rich-disclosure__summary {
+  @apply cursor-pointer font-semibold text-surface-900 dark:text-surface-100;
+  min-height: var(--s-control-hitbox-sm);
+  padding: var(--s-space-content-gap) var(--s-space-section-gap);
+}
+
+.s-rich-disclosure__summary:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-rich-disclosure__content {
+  @apply border-t border-surface-200 dark:border-surface-700;
+  display: grid;
+  min-width: 0;
+  gap: var(--s-space-content-gap);
+  padding: var(--s-space-section-gap);
+}