Sync styleguide 2026.05.18.1

docs/styleguide/styles/01-foundations.css

@@ -175,6 +175,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -287,6 +289,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;

docs/styleguide/styles/46-patterns-scrollable-card.css

@@ -0,0 +1,34 @@
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}