Sync styleguide 2026.05.18.1

docs/styleguide/styles/42-components-data-display.css

@@ -67,3 +67,110 @@
   background: var(--surface-data-table-help-icon);
 }
 
+.sg-large-table {
+  width: 100%;
+}
+
+.sg-large-table__title-segment {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+}
+
+.sg-large-table__row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--color-white);
+}
+
+.sg-large-table__row--hidden {
+  display: none;
+}
+
+.sg-large-table__row--header {
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__row--striped-light {
+  background: var(--color-light-grey);
+}
+
+.sg-large-table__row--load-more {
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__cell {
+  min-width: 0;
+  padding: 0 var(--spacing-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-large-table__cell--load-more {
+  grid-column: 1 / -1;
+  padding: 0;
+  white-space: normal;
+}
+
+.sg-large-table__load-more-layout {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.sg-large-table__cell--header {
+  padding: 0;
+}
+
+.sg-large-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  width: 100%;
+  padding: 0 var(--spacing-small);
+  border: var(--border-none);
+  background: var(--color-transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sg-large-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-darkblue);
+  outline-offset: -2px;
+}
+
+.sg-large-table__sort-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.85rem;
+  height: 0.85rem;
+  line-height: 1;
+  transform: translateY(0.02em);
+}
+
+.sg-large-table__sort-icon::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 0.36rem solid transparent;
+  border-right: 0.36rem solid transparent;
+  border-bottom: 0.55rem solid currentColor;
+}
+
+.sg-large-table__sort-icon[data-direction="descending"]::before {
+  transform: rotate(180deg);
+}