@smwb/ui-css 1.0.4 → 1.1.0

package/dist/ui.css

@@ -988,6 +988,97 @@
   gap: 8px;
   min-width: 280px;
 }
+.smwb-empty-state {
+  min-width: 0;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-empty-state__title {
+  color: var(--smui-onSurfaceColor);
+  font-weight: 600;
+}
+.smwb-empty-state__description {
+  overflow-wrap: break-word;
+}
+.smwb-empty-state_block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 16px;
+  text-align: center;
+}
+.smwb-empty-state_block .smwb-empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin-bottom: 4px;
+  border-radius: 50%;
+  background-color: var(--smui-surfaceVariant);
+}
+.smwb-empty-state_block .smwb-empty-state__title {
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.smwb-empty-state_block .smwb-empty-state__description {
+  max-width: 36rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.smwb-empty-state_block .smwb-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+.smwb-empty-state_block.smwb-empty-state_small {
+  gap: 4px;
+  padding: 12px;
+}
+.smwb-empty-state_block.smwb-empty-state_small .smwb-empty-state__icon {
+  width: 44px;
+  height: 44px;
+  margin-bottom: 0;
+}
+.smwb-empty-state_block.smwb-empty-state_small .smwb-empty-state__title {
+  font-size: 0.875rem;
+}
+.smwb-empty-state_block.smwb-empty-state_small .smwb-empty-state__description {
+  font-size: 0.8125rem;
+}
+.smwb-empty-state_block.smwb-empty-state_small .smwb-empty-state__actions {
+  margin-top: 4px;
+}
+.smwb-empty-state_inline {
+  margin: 8px 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.smwb-empty-state_inline .smwb-empty-state__title,
+.smwb-empty-state_inline .smwb-empty-state__description {
+  display: inline;
+}
+.smwb-empty-state_inline .smwb-empty-state__title {
+  margin-right: 0.35em;
+}
+.smwb-empty-state_inline .smwb-empty-state__icon {
+  display: inline-flex;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.smwb-empty-state_inline .smwb-empty-state__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+.smwb-empty-state_inline.smwb-empty-state_small {
+  font-size: 0.8125rem;
+}
 .smwb-save-asset-dialog__body {
   display: flex;
   flex-direction: column;
@@ -1076,6 +1167,33 @@
 .smwb-indicator_linear.smwb-determinate .smwb-indicator_linear__thumb {
   transition: all 0.1s linear;
 }
+.smwb-indicator_linear.smwb-indicator_full-width {
+  width: 100%;
+  min-width: 0;
+}
+.smwb-indicator_labeled {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.smwb-indicator_labeled > .smwb-indicator_linear {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.smwb-indicator_labeled.smwb-indicator_full-width {
+  display: flex;
+  width: 100%;
+}
+.smwb-indicator__value {
+  flex: 0 0 auto;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--smui-onSurfaceVariant);
+}
 @keyframes linearLoad {
   0% {
     left: -70%;
@@ -1124,6 +1242,62 @@
   width: 64px;
   height: 64px;
 }
+.smwb-meter {
+  --smwb-meter-color: var(--smui-infoColor);
+  display: grid;
+  grid-template-columns: minmax(3.5rem, 1fr) auto;
+  align-items: center;
+  column-gap: 8px;
+  width: 100%;
+  min-width: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+.smwb-meter__track {
+  display: block;
+  height: 6px;
+  border-radius: 999px;
+  background-color: var(--smui-indicatorTrackBg);
+  overflow: hidden;
+}
+.smwb-meter__fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--smwb-meter-color);
+  transition: width 0.2s ease-out;
+}
+.smwb-meter__text {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.smwb-meter__value {
+  font-weight: 600;
+}
+.smwb-meter__of {
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-meter_bar-only {
+  grid-template-columns: minmax(3.5rem, 1fr);
+}
+.smwb-meter_color-neutral {
+  --smwb-meter-color: var(--smui-onSurfaceVariant);
+}
+.smwb-meter_color-primary {
+  --smwb-meter-color: var(--smui-primaryColor);
+}
+.smwb-meter_color-info {
+  --smwb-meter-color: var(--smui-infoColor);
+}
+.smwb-meter_color-success {
+  --smwb-meter-color: var(--smui-successColor);
+}
+.smwb-meter_color-warning {
+  --smwb-meter-color: var(--smui-warningColor);
+}
+.smwb-meter_color-error {
+  --smwb-meter-color: var(--smui-errorColor);
+}
 .smwb-radio {
   display: inline-flex;
   gap: 20px;
@@ -1874,9 +2048,12 @@
 }
 .smwb-text-field_size-small .smwb-text-field__input:not(.smwb-text-field__input--inline) {
   padding-top: 8px;
-  padding-bottom: 8px;
+  padding-bottom: 9px;
   font-size: 13px;
 }
+.smwb-text-field_size-small:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
+  transform: translate(16px, 8px);
+}
 .smwb-text-field_size-large .smwb-text-field__input:not(.smwb-text-field__input--inline) {
   padding-top: 16px;
   padding-bottom: 16px;
@@ -2094,6 +2271,41 @@
 .smwb-tabs__scroll-area {
   display: flex;
 }
+.smwb-tabs--overflow-end .smwb-tabs__scroller--scrollable {
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+}
+.smwb-tabs--overflow-start .smwb-tabs__scroller--scrollable {
+  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
+  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
+}
+.smwb-tabs--overflow-start.smwb-tabs--overflow-end .smwb-tabs__scroller--scrollable {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
+}
+.smwb-tabs__scroll-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 40px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--smui-onSurfaceVariant);
+  cursor: pointer;
+}
+.smwb-tabs__scroll-button:hover:not(:disabled) {
+  background-color: var(--smui-onSurfaceHover);
+}
+.smwb-tabs__scroll-button:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-tabs__scroll-button:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
 .smwb-tabs__indicator {
   display: flex;
   justify-content: center;
@@ -2206,6 +2418,12 @@
   pointer-events: none;
   cursor: default;
 }
+.smwb-tabs--dense .smwb-tab {
+  padding: 0 12px;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+}
 .smwb-slider {
   display: inline-block;
   position: relative;
@@ -2551,6 +2769,9 @@
 .smwb-select-field__values + span {
   margin-left: 4px;
 }
+.smwb-select-field__values .smwb-chip {
+  vertical-align: top;
+}
 .smwb-select-field__search {
   display: inline-flex;
   flex: 1 1 auto;
@@ -2645,6 +2866,16 @@
   font-style: italic;
   color: var(--smui-primaryColor);
 }
+.smwb-text-field_size-small .smwb-select-field:not(.smwb-select-field--inline) {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 13px;
+}
+.smwb-text-field_size-large .smwb-select-field:not(.smwb-select-field--inline) {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-size: 16px;
+}
 .smwb-ripple {
   position: absolute;
   inset: 0;
@@ -2749,6 +2980,47 @@
   letter-spacing: 0.04em;
   list-style: none;
 }
+.smwb-description-list {
+  display: grid;
+  row-gap: 8px;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  min-width: 0;
+}
+.smwb-description-list__item {
+  display: grid;
+  grid-template-columns: var(--smwb-description-term, minmax(6rem, 30%)) minmax(0, 1fr);
+  column-gap: 12px;
+  row-gap: 2px;
+  align-items: baseline;
+  min-width: 0;
+}
+.smwb-description-list__term {
+  color: var(--smui-onSurfaceVariant);
+  overflow-wrap: break-word;
+}
+.smwb-description-list__details {
+  margin: 0;
+  min-width: 0;
+  color: var(--smui-onSurfaceColor);
+  overflow-wrap: anywhere;
+}
+.smwb-description-list_dense {
+  row-gap: 4px;
+  font-size: 0.8125rem;
+}
+.smwb-description-list_stacked .smwb-description-list__item {
+  grid-template-columns: minmax(0, 1fr);
+}
+.smwb-description-list_auto {
+  container: smwb-description-list / inline-size;
+}
+@container smwb-description-list (max-width: 419.98px) {
+  .smwb-description-list_auto .smwb-description-list__item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
 .smwb-gallery {
   display: flex;
   flex-direction: column;
@@ -3836,12 +4108,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease-in-out;
   overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
   white-space: nowrap;
   min-width: 50px;
+  animation: smwb-tooltip-in 0.15s ease-out;
 }
 .smwb-tooltip__ref {
   display: inline-flex;
@@ -3849,16 +4119,17 @@
   justify-content: center;
   cursor: pointer;
 }
-.smwb-tooltip__ref:hover + .smwb-tooltip {
-  visibility: visible;
-  opacity: 1;
-}
 .smwb-tooltip__wrapper {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+@keyframes smwb-tooltip-in {
+  from {
+    opacity: 0;
+  }
+}
 .smwb-sheet {
   background-color: var(--smui-surfaceBackground);
   position: fixed;
@@ -4369,6 +4640,104 @@
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 2px;
 }
+.smwb-stat {
+  --smwb-stat-accent: var(--smui-dividerColor);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  row-gap: 2px;
+  min-width: 0;
+  color: var(--smui-onSurfaceColor);
+  text-decoration: none;
+}
+.smwb-stat__label {
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  color: var(--smui-onSurfaceVariant);
+  overflow-wrap: break-word;
+}
+.smwb-stat__value {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: break-word;
+}
+.smwb-stat__hint {
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-stat__icon {
+  display: inline-flex;
+  color: var(--smwb-stat-accent);
+}
+.smwb-stat__extra {
+  min-width: 0;
+  margin-top: 4px;
+}
+.smwb-stat_with-icon {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 8px;
+}
+.smwb-stat_with-icon > :not(.smwb-stat__icon) {
+  grid-column: 2;
+}
+.smwb-stat_with-icon .smwb-stat__icon {
+  grid-row: 1 / span 4;
+  align-self: start;
+  padding-top: 1px;
+}
+.smwb-stat_tile {
+  padding: 12px 16px;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 8px;
+  background-color: var(--smui-surfaceBackground);
+  box-shadow: inset 3px 0 0 var(--smwb-stat-accent);
+}
+.smwb-stat_plain {
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+.smwb-stat_plain .smwb-stat__value {
+  font-size: 1.25rem;
+}
+.smwb-stat_link {
+  cursor: pointer;
+  transition: background-color 0.12s, border-color 0.12s;
+}
+.smwb-stat_link:hover {
+  background-color: var(--smui-onSurfaceHover);
+  border-color: var(--smui-dividerColor);
+}
+.smwb-stat_link:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+.smwb-stat_tone-info {
+  --smwb-stat-accent: var(--smui-infoColor);
+}
+.smwb-stat_tone-success {
+  --smwb-stat-accent: var(--smui-successColor);
+}
+.smwb-stat_tone-warning {
+  --smwb-stat-accent: var(--smui-warningColor);
+}
+.smwb-stat_tone-error {
+  --smwb-stat-accent: var(--smui-errorColor);
+}
+.smwb-stat_tone-warning .smwb-stat__value,
+.smwb-stat_tone-error .smwb-stat__value {
+  color: var(--smwb-stat-accent);
+}
+.smwb-stat-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--smwb-stat-min, 9rem), 100%), 1fr));
+  gap: 8px;
+  min-width: 0;
+}
 .smwb-carousel {
   max-width: var(--smwb-carousel-max-width, 412px);
 }
@@ -4509,17 +4878,36 @@
   cursor: pointer;
   gap: 15px;
   width: 100%;
+  text-align: start;
 }
-.smwb-accordion__header arrow-icon {
-  flex-shrink: 0;
+.smwb-accordion__heading {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 .smwb-accordion__title {
   white-space: nowrap;
 }
+.smwb-accordion__subtitle {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  opacity: 0.8;
+}
+.smwb-accordion__end {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.smwb-accordion__end ~ .smwb-accordion__arrow-icon {
+  margin-left: 0;
+}
 .smwb-accordion__content {
   background-color: var(--smui-surfaceBackground);
 }
 .smwb-accordion__arrow-icon {
+  flex-shrink: 0;
   transform: rotate(0);
   transition: transform 0.3s ease-in-out;
   margin-left: auto;
@@ -4527,8 +4915,64 @@
 .smwb-accordion__arrow-icon_opened {
   transform: rotate(-180deg);
 }
-.smwb-expansion-panel {
-  display: flex;
+.smwb-accordion_outlined,
+.smwb-accordion_plain {
+  align-self: stretch;
+  box-shadow: none;
+}
+.smwb-accordion_outlined .smwb-accordion__header,
+.smwb-accordion_plain .smwb-accordion__header {
+  height: auto;
+  min-height: 48px;
+  padding: 8px 16px;
+  gap: 12px;
+  background-color: transparent;
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-accordion_outlined .smwb-accordion__header:hover:not(:disabled),
+.smwb-accordion_plain .smwb-accordion__header:hover:not(:disabled) {
+  background-color: var(--smui-onSurfaceHover);
+}
+.smwb-accordion_outlined .smwb-accordion__header:focus-visible,
+.smwb-accordion_plain .smwb-accordion__header:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-accordion_outlined .smwb-accordion__heading,
+.smwb-accordion_plain .smwb-accordion__heading {
+  flex: 1 1 auto;
+}
+.smwb-accordion_outlined .smwb-accordion__title,
+.smwb-accordion_plain .smwb-accordion__title {
+  white-space: normal;
+  overflow-wrap: break-word;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.smwb-accordion_outlined .smwb-accordion__subtitle,
+.smwb-accordion_plain .smwb-accordion__subtitle {
+  color: var(--smui-onSurfaceVariant);
+  opacity: 1;
+}
+.smwb-accordion_outlined .smwb-accordion__content,
+.smwb-accordion_plain .smwb-accordion__content {
+  background-color: transparent;
+}
+.smwb-accordion_outlined .smwb-accordion__arrow-icon,
+.smwb-accordion_plain .smwb-accordion__arrow-icon {
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-accordion_outlined {
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 8px;
+  background-color: var(--smui-surfaceBackground);
+  overflow: hidden;
+}
+.smwb-accordion_plain {
+  border-bottom: 1px solid var(--smui-dividerColor);
+}
+.smwb-expansion-panel {
+  display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0;
@@ -5163,6 +5607,141 @@
     padding-left: env(safe-area-inset-left, 0px);
   }
 }
+.smwb-kanban {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(var(--smwb-kanban-column-width, 15.5rem), 1fr);
+  gap: 12px;
+  align-items: start;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  scroll-snap-type: x proximity;
+  overscroll-behavior-x: contain;
+}
+.smwb-kanban__column {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 8rem;
+  padding: 10px;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 12px;
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 3%, var(--smui-surfaceBackground));
+  box-shadow: inset 0 3px 0 var(--smwb-kanban-accent, var(--smui-dividerColor));
+  scroll-snap-align: start;
+}
+.smwb-kanban__column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 2px 0 10px;
+}
+.smwb-kanban__column-title {
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--smui-onSurfaceColor);
+  overflow-wrap: break-word;
+}
+.smwb-kanban__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.6em;
+  padding: 0 0.45em;
+  border-radius: 9999px;
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, transparent);
+  color: var(--smui-onSurfaceVariant);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.7;
+  font-variant-numeric: tabular-nums;
+}
+.smwb-kanban__cards {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.smwb-kanban__empty {
+  margin: 4px 0;
+  font-size: 0.8125rem;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-kanban__column-footer {
+  margin-top: 8px;
+  font-size: 0.8125rem;
+  text-align: center;
+}
+.smwb-kanban__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 8px;
+  background-color: var(--smui-surfaceBackground);
+  font-size: 0.875rem;
+  transition: border-color 0.12s;
+}
+.smwb-kanban__card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--smwb-kanban-title-lines, 3);
+  overflow: hidden;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--smui-onSurfaceColor);
+  overflow-wrap: break-word;
+}
+.smwb-kanban__card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  font-size: 0.8125rem;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-kanban__card_link:hover {
+  border-color: color-mix(in srgb, var(--smui-primaryColor) 40%, var(--smui-dividerColor));
+}
+.smwb-kanban__card_link .smwb-kanban__card-title {
+  text-decoration: none;
+}
+.smwb-kanban__card_link .smwb-kanban__card-title::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 8px;
+}
+.smwb-kanban__card_link .smwb-kanban__card-title:hover {
+  color: var(--smui-primaryColor);
+}
+.smwb-kanban__card_link .smwb-kanban__card-title:focus-visible {
+  outline: none;
+}
+.smwb-kanban__card_link .smwb-kanban__card-title:focus-visible::after {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+.smwb-kanban__card_link .smwb-kanban__card-body :is(a, button, input, select, textarea, [tabindex]) {
+  position: relative;
+  z-index: 1;
+}
+:where(.smwb-kanban__card-body, .smwb-kanban__column-footer) a {
+  color: var(--smui-primaryColor);
+  text-decoration: none;
+}
+:where(.smwb-kanban__card-body, .smwb-kanban__column-footer) a:hover {
+  text-decoration: underline;
+}
 .smwb-table {
   width: 100%;
   white-space: nowrap;
@@ -5325,6 +5904,137 @@
   z-index: 2;
   background-color: var(--smui-surfaceBackground);
 }
+.smwb-table__wrapper_stack-sm,
+.smwb-table__wrapper_stack-md,
+.smwb-table__wrapper_stack-lg {
+  container: smwb-table / inline-size;
+}
+@container smwb-table (max-width: 419.98px) {
+  .smwb-table__wrapper_stack-sm .smwb-table {
+    display: block;
+    white-space: normal;
+    overflow: visible;
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__head {
+    display: none;
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__body {
+    display: block;
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__row {
+    display: block;
+    padding: 8px 0;
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__cell:not(.smwb-table__loader) {
+    display: grid;
+    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
+    column-gap: 12px;
+    align-items: baseline;
+    height: auto;
+    padding: 4px 16px;
+    white-space: normal;
+    overflow: visible;
+    overflow-wrap: break-word;
+    text-overflow: clip;
+    text-align: start;
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__cell:not(.smwb-table__loader)::before {
+    content: attr(data-label);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--smui-onSurfaceVariant);
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__cell:not(.smwb-table__loader):not([data-label]) {
+    display: block;
+  }
+  .smwb-table__wrapper_stack-sm .smwb-table__cell:not(.smwb-table__loader):not([data-label])::before {
+    content: none;
+  }
+}
+@container smwb-table (max-width: 767.98px) {
+  .smwb-table__wrapper_stack-md .smwb-table {
+    display: block;
+    white-space: normal;
+    overflow: visible;
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__head {
+    display: none;
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__body {
+    display: block;
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__row {
+    display: block;
+    padding: 8px 0;
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__cell:not(.smwb-table__loader) {
+    display: grid;
+    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
+    column-gap: 12px;
+    align-items: baseline;
+    height: auto;
+    padding: 4px 16px;
+    white-space: normal;
+    overflow: visible;
+    overflow-wrap: break-word;
+    text-overflow: clip;
+    text-align: start;
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__cell:not(.smwb-table__loader)::before {
+    content: attr(data-label);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--smui-onSurfaceVariant);
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__cell:not(.smwb-table__loader):not([data-label]) {
+    display: block;
+  }
+  .smwb-table__wrapper_stack-md .smwb-table__cell:not(.smwb-table__loader):not([data-label])::before {
+    content: none;
+  }
+}
+@container smwb-table (max-width: 1023.98px) {
+  .smwb-table__wrapper_stack-lg .smwb-table {
+    display: block;
+    white-space: normal;
+    overflow: visible;
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__head {
+    display: none;
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__body {
+    display: block;
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__row {
+    display: block;
+    padding: 8px 0;
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__cell:not(.smwb-table__loader) {
+    display: grid;
+    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
+    column-gap: 12px;
+    align-items: baseline;
+    height: auto;
+    padding: 4px 16px;
+    white-space: normal;
+    overflow: visible;
+    overflow-wrap: break-word;
+    text-overflow: clip;
+    text-align: start;
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__cell:not(.smwb-table__loader)::before {
+    content: attr(data-label);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--smui-onSurfaceVariant);
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__cell:not(.smwb-table__loader):not([data-label]) {
+    display: block;
+  }
+  .smwb-table__wrapper_stack-lg .smwb-table__cell:not(.smwb-table__loader):not([data-label])::before {
+    content: none;
+  }
+}
 .smwb-table__pagination {
   display: flex;
   width: 100%;
@@ -5800,6 +6510,126 @@
   font-size: 13px;
   color: var(--smui-onSurfaceVariant);
 }
+.smwb-timeline {
+  --smwb-timeline-mark: 24px;
+  --smwb-timeline-pad: 4px;
+  display: grid;
+  row-gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  min-width: 0;
+}
+.smwb-timeline__group {
+  display: grid;
+  row-gap: 4px;
+  min-width: 0;
+}
+.smwb-timeline__label {
+  padding: 2px 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-timeline__items {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+}
+.smwb-timeline__item {
+  --smwb-timeline-tone: var(--smui-onSurfaceVariant);
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--smwb-timeline-mark) minmax(0, 1fr) auto;
+  column-gap: 8px;
+  align-items: start;
+  padding: var(--smwb-timeline-pad) 0;
+  min-width: 0;
+}
+.smwb-timeline__item::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--smwb-timeline-mark) / 2 - 1px);
+  top: calc(var(--smwb-timeline-pad) + var(--smwb-timeline-mark));
+  bottom: calc(-1 * var(--smwb-timeline-pad));
+  width: 2px;
+  background-color: var(--smui-dividerColor);
+}
+.smwb-timeline__item:last-child::before {
+  display: none;
+}
+.smwb-timeline__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--smwb-timeline-mark);
+  height: var(--smwb-timeline-mark);
+  color: var(--smwb-timeline-tone);
+}
+.smwb-timeline__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.smwb-timeline__body {
+  min-width: 0;
+}
+.smwb-timeline__title {
+  overflow-wrap: anywhere;
+}
+.smwb-timeline__title a {
+  color: inherit;
+  text-decoration: none;
+}
+.smwb-timeline__title a:hover {
+  color: var(--smui-primaryColor);
+  text-decoration: underline;
+}
+.smwb-timeline__meta {
+  font-size: 0.75rem;
+  color: var(--smui-onSurfaceVariant);
+  overflow-wrap: anywhere;
+}
+.smwb-timeline__content {
+  margin-top: 4px;
+}
+.smwb-timeline__time {
+  font-size: 0.75rem;
+  line-height: 1.45rem;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-timeline__item_tone-info {
+  --smwb-timeline-tone: var(--smui-infoColor);
+}
+.smwb-timeline__item_tone-success {
+  --smwb-timeline-tone: var(--smui-successColor);
+}
+.smwb-timeline__item_tone-warning {
+  --smwb-timeline-tone: var(--smui-warningColor);
+}
+.smwb-timeline__item_tone-error {
+  --smwb-timeline-tone: var(--smui-errorColor);
+}
+.smwb-timeline_dense {
+  --smwb-timeline-pad: 2px;
+  row-gap: 8px;
+  font-size: 0.8125rem;
+}
+.smwb-timeline_sticky-labels .smwb-timeline__label {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--smwb-timeline-label-bg, var(--smui-surfaceBackground));
+}
 .smwb-message {
   padding: 12px 20px;
   min-height: 1rem;
@@ -6019,31 +6849,75 @@
 }
 .smwb-avatar-group {
   display: inline-flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: center;
 }
+.smwb-avatar-group > :not(:first-child) {
+  margin-left: -8px;
+}
 .smwb-avatar-group .smwb-avatar {
   border: 2px solid var(--smui-surfaceBackground);
   box-sizing: content-box;
 }
-.smwb-avatar-group .smwb-avatar:not(:last-child) {
-  margin-left: -8px;
+.smwb-avatar-group__hidden {
+  display: none;
 }
 .smwb-avatar-group__surplus {
   background-color: var(--smui-surfaceVariant);
   color: var(--smui-onSurfaceVariant);
   font-size: 0.8rem;
 }
-.smwb-breadcrumbs {
-  color: var(--smui-onSurfaceVariant);
-  font-size: 0.875rem;
-}
-.smwb-breadcrumbs__list {
-  display: flex;
-  flex-wrap: wrap;
+.smwb-person-chip {
+  display: inline-flex;
   align-items: center;
   gap: 8px;
-  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  vertical-align: middle;
+  color: inherit;
+  text-decoration: none;
+}
+.smwb-person-chip__avatar {
+  flex-shrink: 0;
+  color: #fff;
+}
+.smwb-person-chip__text {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.3;
+}
+.smwb-person-chip__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.smwb-person-chip__meta {
+  font-size: 0.75rem;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-person-chip_link {
+  border-radius: 4px;
+  cursor: pointer;
+}
+.smwb-person-chip_link:hover .smwb-person-chip__name {
+  color: var(--smui-primaryColor);
+  text-decoration: underline;
+}
+.smwb-person-chip_link:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+.smwb-breadcrumbs {
+  color: var(--smui-onSurfaceVariant);
+  font-size: 0.875rem;
+}
+.smwb-breadcrumbs__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
@@ -6366,6 +7240,46 @@
   flex-direction: column;
   gap: 8px;
 }
+.smwb-chart {
+  --smwb-chart-series-1: #0072b2;
+  --smwb-chart-series-2: #e69f00;
+  --smwb-chart-series-3: #009e73;
+  --smwb-chart-series-4: #cc79a7;
+  --smwb-chart-series-5: #56b4e9;
+  --smwb-chart-series-6: #d55e00;
+  --smwb-chart-series-7: #7a7a7a;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+.smwb-chart__canvas {
+  position: absolute;
+  inset: 0;
+}
+.smwb-chart .smwb-chart__skeleton {
+  position: absolute;
+  inset: 0;
+}
+.smwb-chart__summary {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+:root[data-theme="dark"] .smwb-chart {
+  --smwb-chart-series-1: #5aa9e6;
+  --smwb-chart-series-2: #f0b43a;
+  --smwb-chart-series-3: #2fc59b;
+  --smwb-chart-series-4: #e08cc0;
+  --smwb-chart-series-5: #8fd0f5;
+  --smwb-chart-series-6: #f27c3c;
+  --smwb-chart-series-7: #a8b0bc;
+}
 .smwb-stepper {
   display: flex;
   width: 100%;
@@ -6378,6 +7292,26 @@
   flex-direction: column;
   align-items: stretch;
 }
+.smwb-stepper_vertical .smwb-stepper__step {
+  flex-direction: row;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  text-align: start;
+}
+.smwb-stepper_vertical .smwb-stepper__text {
+  align-items: flex-start;
+}
+.smwb-stepper_vertical .smwb-stepper__connector {
+  width: 1px;
+  height: auto;
+  min-width: 0;
+  min-height: 24px;
+  margin: 4px 0 4px 12px;
+  background-color: var(--smui-dividerColor);
+  flex: 0 0 auto;
+}
 .smwb-stepper__step {
   display: flex;
   align-items: center;
@@ -6417,9 +7351,13 @@
   display: flex;
   flex-direction: column;
   line-height: 1.3;
+  min-width: 0;
 }
 .smwb-stepper__label {
   font-size: 0.875rem;
+  hyphens: manual;
+  overflow-wrap: normal;
+  word-break: normal;
 }
 .smwb-stepper__optional {
   font-size: 0.75rem;
@@ -6439,16 +7377,6 @@
   margin: 0 8px;
   background-color: var(--smui-dividerColor);
 }
-.smwb-stepper_vertical .smwb-stepper__step {
-  align-items: flex-start;
-}
-.smwb-stepper_vertical .smwb-stepper__connector {
-  width: 1px;
-  min-height: 24px;
-  margin: 4px 0 4px 12px;
-  background-color: var(--smui-dividerColor);
-  flex: 0 0 auto;
-}
 .smwb-stepper_alt-label {
   align-items: flex-start;
 }
@@ -6464,6 +7392,323 @@
 .smwb-stepper_alt-label .smwb-stepper__connector {
   margin-top: 12px;
 }
+.smwb-stepper-auto {
+  container: smwb-stepper / inline-size;
+  width: 100%;
+  min-width: 0;
+}
+@container smwb-stepper (max-width: 8rem) {
+  .smwb-stepper_auto[data-steps="1"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="1"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="1"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="1"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 16rem) {
+  .smwb-stepper_auto[data-steps="2"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="2"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="2"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="2"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 24rem) {
+  .smwb-stepper_auto[data-steps="3"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="3"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="3"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="3"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 32rem) {
+  .smwb-stepper_auto[data-steps="4"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="4"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="4"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="4"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 40rem) {
+  .smwb-stepper_auto[data-steps="5"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="5"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="5"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="5"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 48rem) {
+  .smwb-stepper_auto[data-steps="6"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="6"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="6"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="6"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 56rem) {
+  .smwb-stepper_auto[data-steps="7"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="7"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="7"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="7"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 64rem) {
+  .smwb-stepper_auto[data-steps="8"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="8"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="8"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="8"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 72rem) {
+  .smwb-stepper_auto[data-steps="9"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="9"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="9"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="9"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 80rem) {
+  .smwb-stepper_auto[data-steps="10"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="10"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="10"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="10"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 88rem) {
+  .smwb-stepper_auto[data-steps="11"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="11"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="11"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="11"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+@container smwb-stepper (max-width: 96rem) {
+  .smwb-stepper_auto[data-steps="12"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .smwb-stepper_auto[data-steps="12"] .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+    text-align: start;
+  }
+  .smwb-stepper_auto[data-steps="12"] .smwb-stepper__text {
+    align-items: flex-start;
+  }
+  .smwb-stepper_auto[data-steps="12"] .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: 24px;
+    margin: 4px 0 4px 12px;
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
 .smwb-stepper__step_error .smwb-stepper__icon {
   background-color: var(--smui-errorColor);
   color: var(--smui-onErrorColor);
@@ -6484,27 +7729,27 @@
   color: var(--smui-onSurfaceColor);
 }
 .smwb-typography_h1 {
-  font-size: 48px;
+  font-size: clamp(2rem, 1.5714rem + 1.9048vw, 3rem);
   font-weight: 300;
   line-height: 1.2;
 }
 .smwb-typography_h2 {
-  font-size: 40px;
+  font-size: clamp(1.75rem, 1.4286rem + 1.4286vw, 2.5rem);
   font-weight: 300;
   line-height: 1.2;
 }
 .smwb-typography_h3 {
-  font-size: 32px;
+  font-size: clamp(1.5rem, 1.2857rem + 0.9524vw, 2rem);
   font-weight: 400;
   line-height: 1.25;
 }
 .smwb-typography_h4 {
-  font-size: 28px;
+  font-size: clamp(1.375rem, 1.2143rem + 0.7143vw, 1.75rem);
   font-weight: 400;
   line-height: 1.3;
 }
 .smwb-typography_h5 {
-  font-size: 24px;
+  font-size: clamp(1.25rem, 1.1429rem + 0.4762vw, 1.5rem);
   font-weight: 500;
   line-height: 1.3;
 }
@@ -6600,6 +7845,17 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.smwb-typography_clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--smwb-typography-lines);
+  line-clamp: var(--smwb-typography-lines);
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+.smwb-typography_tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
 .smwb-stack {
   min-width: 0;
 }
@@ -6682,6 +7938,96 @@
     width: 100%;
   }
 }
+.smwb-section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  flex: 0 0 auto;
+  margin: 0 0 12px;
+  min-width: 0;
+}
+.smwb-section-header__titles {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.smwb-section-header__title-line {
+  font-size: 1.15rem;
+  line-height: 1.3;
+  overflow-wrap: break-word;
+}
+.smwb-section-header__title-line > :not(.smwb-section-header__title) {
+  margin-left: 8px;
+  vertical-align: middle;
+}
+.smwb-section-header_level-3 .smwb-section-header__title-line,
+.smwb-section-header_level-4 .smwb-section-header__title-line,
+.smwb-section-header_level-5 .smwb-section-header__title-line,
+.smwb-section-header_level-6 .smwb-section-header__title-line {
+  font-size: 1rem;
+  line-height: 1.5;
+}
+.smwb-section-header__title {
+  display: inline;
+  margin: 0;
+  font-size: inherit;
+  font-weight: 600;
+  line-height: inherit;
+  letter-spacing: -0.01em;
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-section-header__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  padding: 0 0.45em;
+  border-radius: 999px;
+  background-color: var(--smui-surfaceVariant);
+  color: var(--smui-onSurfaceVariant);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.7;
+  font-variant-numeric: tabular-nums;
+}
+.smwb-section-header__help {
+  display: inline-flex;
+  border-radius: 50%;
+  color: var(--smui-onSurfaceVariant);
+  cursor: help;
+}
+.smwb-section-header__help:hover,
+.smwb-section-header__help:focus-visible {
+  color: var(--smui-primaryColor);
+}
+.smwb-section-header__help:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+.smwb-tooltip.smwb-section-header__tooltip {
+  width: max-content;
+  height: auto;
+  max-width: 280px;
+  padding: 4px 8px;
+  line-height: 1.4;
+  white-space: normal;
+  text-align: left;
+}
+.smwb-section-header__subtitle {
+  margin-top: 2px;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-section-header__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  min-width: 0;
+}
 .smwb-app-layout {
   display: flex;
   flex-direction: column;
@@ -7068,6 +8414,7 @@
   --smui-outlineColor: #79747e;
   --smui-onSurfaceHover: color-mix(in srgb, #1c1b1f 8%, transparent);
   --smui-onSurfaceActive: color-mix(in srgb, #1c1b1f 12%, transparent);
+  --smui-onSurfaceFocus: color-mix(in srgb, #1c1b1f 12%, transparent);
   --smui-surfaceVariant: #e7e0ec;
   --smui-disabledBgColor: color-mix(in srgb, #1c1b1f 12%, transparent);
   --smui-primaryContainer: #eaddff;
@@ -7207,6 +8554,7 @@
   --smui-outlineColor: #938f99;
   --smui-onSurfaceHover: color-mix(in srgb, #e6e1e5 8%, transparent);
   --smui-onSurfaceActive: color-mix(in srgb, #e6e1e5 12%, transparent);
+  --smui-onSurfaceFocus: color-mix(in srgb, #e6e1e5 12%, transparent);
   --smui-surfaceVariant: #49454f;
   --smui-disabledBgColor: color-mix(in srgb, #e6e1e5 12%, transparent);
   --smui-primaryContainer: #4f378b;