@pgcorp/ui-kit 0.12.0 → 0.14.0

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

@@ -56,6 +56,10 @@
   max-width: 48rem;
 }
 
+.s-dialog-surface[data-presentation='modal'][data-size='4xl'] {
+  max-width: 56rem;
+}
+
 .s-dialog-surface[data-presentation='modal'][data-size='wide'] {
   max-width: 72rem;
 }
@@ -97,6 +101,10 @@
   @apply relative flex h-full w-full flex-col overflow-hidden border-l border-surface-200 bg-surface-0 text-surface-900 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
 }
 
+.s-dialog-surface[data-presentation='drawer'][data-placement='left'] {
+  @apply border-l-0 border-r;
+}
+
 .s-dialog-surface[data-presentation='drawer'][data-size='sm'] {
   max-width: 30rem;
 }
@@ -112,23 +120,42 @@
 .s-dialog-surface[data-presentation='drawer'][data-placement='bottom'] {
   @apply max-w-none rounded-t-2xl border-l-0 border-t border-surface-200 dark:border-surface-700;
   width: 100%;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'] {
   max-height: calc(100dvh - 1rem);
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='sm'] {
+.s-dialog-surface[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'][data-size='sm'] {
   height: 50dvh;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='md'] {
+.s-dialog-surface[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'][data-size='md'] {
   height: 70dvh;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='lg'] {
+.s-dialog-surface[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'][data-size='lg'] {
   height: 90dvh;
 }
 
+.s-dialog-surface[data-presentation='drawer'][data-scope='contained'] {
+  max-inline-size: none;
+  max-block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-scope='contained'][data-placement='bottom'] {
+  block-size: var(--s-drawer-extent);
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-scope='contained'][data-placement='left'],
+.s-dialog-surface[data-presentation='drawer'][data-scope='contained'][data-placement='right'] {
+  inline-size: var(--s-drawer-extent);
+}
+
 .s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__header {
-  @apply flex items-start gap-3 border-b border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+  @apply flex shrink-0 items-start gap-3 border-b border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
 }
 
 .s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__title {
@@ -136,15 +163,24 @@
 }
 
 .s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__body {
-  @apply flex-1 overflow-y-auto p-5 md:p-6;
+  @apply min-h-0 min-w-0 flex-1 overflow-y-auto p-5 md:p-6;
+  overscroll-behavior: contain;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-scroll='content'] .s-dialog-surface__body {
+  @apply flex flex-col overflow-hidden p-0;
 }
 
 .s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__footer {
-  @apply flex flex-wrap justify-end gap-3 border-t border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+  @apply flex shrink-0 flex-wrap justify-end gap-3 border-t border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
 }
 
 @media (max-width: 767px) {
   .s-dialog-surface[data-presentation='drawer'][data-layout='mobile-fullscreen'] {
-    @apply max-w-full border-l-0;
+    @apply max-w-full border-l-0 border-r-0;
   }
 }
+
+.s-dialog-surface[data-presentation][hidden] {
+  display: none;
+}

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

@@ -80,13 +80,34 @@
   background: currentColor;
 }
 
-.s-menu-item__label {
+.s-menu-item__text {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.s-menu-item__label,
+.s-menu-item__description {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.s-menu-item__description {
+  color: var(--s-menu-item-secondary-foreground);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.s-menu-item:hover:not([aria-disabled='true']) .s-menu-item__description,
+.s-menu-item:focus-visible .s-menu-item__description,
+.s-menu-item[data-current='true'] .s-menu-item__description {
+  color: var(--s-menu-item-state-foreground);
+}
+
 .s-menu-item__meta {
   @apply ml-auto inline-flex shrink-0 items-center;
   gap: var(--s-space-control-gap);

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

@@ -2,6 +2,10 @@
   position: fixed;
 }
 
+.s-menu-layer[hidden] {
+  display: none;
+}
+
 .s-menu-layer--dropdown {
   --s-menu-surface-width: max-content;
   --s-menu-surface-min-width: 12rem;

package/src/components/shared/containers/SDrawer.css

@@ -12,13 +12,24 @@
 }
 
 .s-drawer-positioner {
-  @apply absolute inset-0 flex items-stretch justify-end;
+  @apply absolute inset-0 flex items-stretch;
+  justify-content: right;
+}
+
+.s-drawer-positioner[data-placement='left'] {
+  justify-content: left;
 }
 
 .s-drawer-positioner[data-placement='bottom'] {
   @apply items-end justify-stretch;
 }
 
+.s-drawer-backdrop[data-scope='contained'],
+.s-drawer-shell[data-scope='contained'] {
+  position: absolute;
+  pointer-events: auto;
+}
+
 .s-drawer-backdrop-enter-active,
 .s-drawer-backdrop-leave-active {
   transition: opacity var(--s-motion-standard) ease;
@@ -42,6 +53,11 @@
   transform: translateX(1.5rem);
 }
 
+.s-drawer-shell[data-placement='left'].s-drawer-panel-enter-from,
+.s-drawer-shell[data-placement='left'].s-drawer-panel-leave-to {
+  transform: translateX(-1.5rem);
+}
+
 .s-drawer-shell[data-placement='bottom'].s-drawer-panel-enter-from,
 .s-drawer-shell[data-placement='bottom'].s-drawer-panel-leave-to {
   transform: translateY(1.5rem);
@@ -63,7 +79,9 @@
   }
 
   .s-drawer-panel-enter-from,
-  .s-drawer-panel-leave-to {
+  .s-drawer-panel-leave-to,
+  .s-drawer-shell[data-placement].s-drawer-panel-enter-from,
+  .s-drawer-shell[data-placement].s-drawer-panel-leave-to {
     transform: none;
   }
 }

package/src/components/shared/containers/SOverlayHost.css

@@ -0,0 +1,14 @@
+@reference "../../../styles/reference.css";
+
+.s-overlay-host {
+  @apply relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden;
+  isolation: isolate;
+}
+
+.s-overlay-host__content {
+  @apply flex min-h-0 min-w-0 flex-1 flex-col;
+}
+
+.s-overlay-host__portal {
+  @apply pointer-events-none absolute inset-0;
+}

package/src/components/shared/containers/SPopover.css

@@ -13,7 +13,7 @@
   background: var(--s-floating-surface);
   color: var(--s-floating-foreground);
   box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
-  display: inline-block;
+  display: block;
 }
 
 .s-popover-panel[data-width='sm'] {
@@ -28,8 +28,14 @@
   width: min(36rem, calc(100vw - 1rem));
 }
 
+.s-popover-panel[data-surface='transparent'] {
+  max-width: 90vw;
+}
+
 .s-popover-panel[data-surface='transparent'] .s-popover-content {
   @apply bg-transparent shadow-none dark:bg-transparent;
   box-shadow: none;
-  max-width: 90vw;
+}
+.s-popover-panel[hidden] {
+  display: none;
 }

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

@@ -10,6 +10,7 @@
   --s-button-outline: color-mix(in srgb, var(--s-button-accent) 45%, transparent);
   --s-button-soft-background: color-mix(in srgb, var(--s-button-accent) 12%, transparent);
   --s-button-hover-background: color-mix(in srgb, var(--s-button-accent) 10%, transparent);
+  --s-passive-content-foreground: var(--s-button-foreground);
 
   @apply relative inline-flex min-w-0 items-center justify-center font-semibold;
   border: 1px solid transparent;
@@ -175,6 +176,7 @@
 }
 
 .s-button[data-appearance='solid'] {
+  --s-passive-content-foreground: var(--s-button-on-solid);
   border-color: var(--s-button-solid-background);
   background: var(--s-button-solid-background);
   box-shadow: var(--s-elevation-control);
@@ -256,6 +258,7 @@
 }
 
 .s-button:disabled {
+  --s-passive-content-foreground: var(--s-button-disabled-foreground);
   border-color: transparent;
   background: var(--s-button-disabled-background);
   box-shadow: none;
@@ -264,6 +267,7 @@
 }
 
 .s-button[aria-disabled='true'] {
+  --s-passive-content-foreground: var(--s-button-disabled-foreground);
   border-color: transparent;
   background: var(--s-button-disabled-background);
   box-shadow: none;

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

@@ -13,6 +13,12 @@
   @apply h-full;
 }
 
+.s-field[data-content-flow='phrasing'] {
+  display: inline-grid;
+  width: auto;
+  vertical-align: middle;
+}
+
 .s-field--stacked[data-fill='container'] {
   grid-template-rows: auto minmax(0, 1fr) auto auto;
 }

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,15 +6,49 @@
   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 {
+  min-width: 0;
+}
+
+.s-menu-group + .s-menu-group {
+  margin-top: var(--s-space-control-gap);
+  padding-top: var(--s-space-control-gap);
+  border-top: 1px solid var(--s-floating-outline);
+}
+
+.s-menu-group__label {
+  padding: 0.25rem var(--s-menu-item-inline-padding);
+  color: var(--s-menu-item-secondary-foreground);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }

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/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/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;
 }