@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -40,6 +40,22 @@
   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']) {
   block-size: var(--s-control-hitbox-sm);
   min-block-size: var(--s-control-hitbox-sm);
@@ -82,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/SInputText.css

@@ -15,6 +15,13 @@
 .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;
 }

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

@@ -29,6 +29,30 @@ h6.s-rich-document__heading { @apply text-base; }
 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;

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);
+}

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

@@ -4,3 +4,19 @@
   @apply rounded bg-surface-100 px-1 py-0.5 font-mono text-sm text-surface-800;
   @apply dark:bg-surface-800 dark:text-surface-100;
 }
+
+.s-rich-document__deletion {
+  @apply text-surface-500 decoration-surface-400 dark:text-surface-400 dark:decoration-surface-500;
+}
+
+.s-rich-document__keyboard {
+  @apply inline-flex rounded border border-surface-300 bg-surface-50 px-1.5 py-0.5 font-mono text-xs font-semibold text-surface-800 shadow-sm;
+  @apply dark:border-surface-600 dark:bg-surface-800 dark:text-surface-100;
+  line-height: 1.25;
+}
+
+.s-rich-document__script,
+.s-rich-document__footnote-reference {
+  font-size: 0.75em;
+  line-height: 0;
+}