@smwb/ui-css 1.0.4 → 1.2.0

package/dist/ui.css

@@ -371,6 +371,7 @@
   left: 50%;
 }
 .smwb-checkbox__wrapper {
+  position: relative;
   color: var(--smui-primaryTextColor);
   display: flex;
   align-items: center;
@@ -390,7 +391,15 @@
   opacity: 0.8;
 }
 .smwb-checkbox__input {
-  display: none;
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  opacity: 0;
+}
+.smwb-checkbox__input:focus-visible ~ .smwb-checkbox__btn {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
 }
 .smwb-checkbox__input:hover ~ .smwb-checkbox__btn::before {
   background-color: var(--smui-onSurfaceHover);
@@ -498,6 +507,27 @@
   align-items: center;
   justify-content: center;
 }
+.smwb-chip__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: inherit;
+}
+.smwb-chip__content:focus {
+  outline-offset: 9999px;
+}
+.smwb-chip__content:focus::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  outline: inherit;
+  pointer-events: none;
+}
+.smwb-chip.smwb-outlined > .smwb-chip__content:focus::after {
+  inset: -1px;
+  border: 1px solid transparent;
+}
 .smwb-chip__delete-icon {
   background: transparent;
   border: 0;
@@ -988,6 +1018,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 +1197,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 +1272,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;
@@ -1154,7 +1358,17 @@
   display: none;
 }
 .smwb-radio__input {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+}
+.smwb-radio__input:focus-visible ~ .smwb-radio__btn {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
 }
 .smwb-radio__input:active ~ .radio__btn:hover ~ .smwb-radio__bg {
   transform: translate(-50%, -50%) scale(1);
@@ -1874,9 +2088,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;
@@ -1949,7 +2166,17 @@
   opacity: 1;
 }
 .smwb-toggle__checkbox {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+}
+.smwb-toggle__checkbox:focus-visible ~ .smwb-toggle__track {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
 }
 .smwb-toggle__checkbox:checked ~ .smwb-toggle__track {
   background-color: var(--smui-toggleTrackActiveColor);
@@ -2002,7 +2229,7 @@
   white-space: nowrap;
   height: 48px;
 }
-.smwb-menu__item:not(.smwb-menu__item--selected):not(:active):hover:before {
+.smwb-menu__item:not(.smwb-menu__item--selected):not(:active):not(:focus-visible):not(.smwb-select-field__option--active):hover:before {
   opacity: 0.08;
 }
 .smwb-menu__item:before {
@@ -2024,6 +2251,16 @@
 .smwb-menu__item--selected:before {
   opacity: 0.08;
 }
+.smwb-menu__item:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-menu__item:focus-visible:before {
+  opacity: 0.12;
+}
+.smwb-menu__item:has( > .smwb-menu__item-inner:focus-visible):before {
+  opacity: 0.12;
+}
 .smwb-menu__item:active:before {
   opacity: 0.12;
 }
@@ -2035,6 +2272,10 @@
   color: currentColor;
   gap: 6px;
 }
+.smwb-menu__item-inner:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
 .smwb-menu__text {
   flex-grow: 1;
 }
@@ -2094,6 +2335,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 +2482,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;
@@ -2533,12 +2815,39 @@
   width: 0;
   height: 0;
 }
+.smwb-select-field__control {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  align-self: stretch;
+}
+.smwb-select-field__control:focus {
+  outline-offset: 9999px;
+}
+.smwb-select-field__control:focus::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  outline: inherit;
+  pointer-events: none;
+}
 .smwb-select-field__actions {
   display: flex;
   align-items: center;
   column-gap: 2px;
   margin-right: -7px;
 }
+.smwb-select-field__clear {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
 .smwb-select-field__values {
   white-space: nowrap;
   font: inherit;
@@ -2548,9 +2857,13 @@
 .smwb-select-field__values > *:not(:first-child) {
   margin-left: 4px;
 }
-.smwb-select-field__values + span {
+.smwb-select-field__values + .smwb-select-field__search,
+.smwb-select-field__values + .smwb-select-field__control > .smwb-select-field__search {
   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 +2958,29 @@
   font-style: italic;
   color: var(--smui-primaryColor);
 }
+.smwb-select-field__listbox,
+.smwb-select-field__group-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.smwb-select-field__option--active {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-menu .smwb-menu__item.smwb-select-field__option--active:before {
+  opacity: 0.12;
+}
+.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,20 +3085,61 @@
   letter-spacing: 0.04em;
   list-style: none;
 }
-.smwb-gallery {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+.smwb-description-list {
+  display: grid;
+  row-gap: 8px;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  min-width: 0;
 }
-.smwb-gallery__list.smwb-default,
-.smwb-gallery__list.smwb-woven {
+.smwb-description-list__item {
   display: grid;
-  grid-template-columns: repeat(var(--cols-count), 1fr);
-  justify-content: center;
-  align-items: center;
-  padding: calc(var(--gap) / 2);
+  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-gallery__list.smwb-masonry {
+.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;
+  width: 100%;
+}
+.smwb-gallery__list.smwb-default,
+.smwb-gallery__list.smwb-woven {
+  display: grid;
+  grid-template-columns: repeat(var(--cols-count), 1fr);
+  justify-content: center;
+  align-items: center;
+  padding: calc(var(--gap) / 2);
+}
+.smwb-gallery__list.smwb-masonry {
   display: block;
   column-count: var(--cols-count);
   -webkit-column-count: var(--cols-count);
@@ -2921,7 +3298,6 @@
   flex-direction: column;
   border-radius: 8px;
   overflow: visible;
-  outline: none;
 }
 .smwb-thumb-card--interactive {
   cursor: pointer;
@@ -2930,6 +3306,11 @@
   opacity: 0.5;
   pointer-events: none;
 }
+.smwb-thumb-card__content {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
 .smwb-thumb-card__media {
   position: relative;
   width: 100%;
@@ -2942,7 +3323,7 @@
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 1px;
 }
-.smwb-thumb-card--interactive:focus-visible .smwb-thumb-card__media {
+.smwb-thumb-card__content:focus-visible .smwb-thumb-card__media {
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 1px;
 }
@@ -3836,12 +4217,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 +4228,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;
@@ -4355,6 +4735,13 @@
   pointer-events: none;
   opacity: 0.38;
 }
+.smwb-card__content {
+  display: flex;
+  flex-direction: column;
+}
+.smwb-card__content:focus-visible {
+  outline: none;
+}
 .smwb-card__title {
   font-size: 1.25rem;
   font-weight: 500;
@@ -4365,10 +4752,108 @@
 .smwb-card_interactive {
   cursor: pointer;
 }
-.smwb-card_interactive:focus-visible {
+.smwb-card:has( > .smwb-card__content:focus-visible) {
+  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 +4994,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,6 +5031,62 @@
 .smwb-accordion__arrow-icon_opened {
   transform: rotate(-180deg);
 }
+.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;
@@ -5163,6 +5723,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;
@@ -5225,6 +5920,14 @@
 .smwb-table__cell.smwb-head-cell .smwb-head-cell__content input {
   font-weight: 500;
 }
+.smwb-table__cell.smwb-head-cell .smwb-head-cell__actions {
+  align-items: center;
+  display: inline-flex;
+  vertical-align: middle;
+  gap: 5px;
+  margin-inline-start: 5px;
+  cursor: auto;
+}
 .smwb-table__cell.smwb-head-cell.smwb-align_left {
   text-align: left;
 }
@@ -5325,14 +6028,145 @@
   z-index: 2;
   background-color: var(--smui-surfaceBackground);
 }
-.smwb-table__pagination {
-  display: flex;
-  width: 100%;
-  height: 52px;
-  border: 1px solid var(--smui-tableBorderColor);
-  border-top: 0;
-  border-radius: 0 0 4px 4px;
-  justify-content: flex-end;
+.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%;
+  height: 52px;
+  border: 1px solid var(--smui-tableBorderColor);
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+  justify-content: flex-end;
   padding: 0 16px;
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
 }
@@ -5800,6 +6634,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,21 +6973,106 @@
 }
 .smwb-avatar-group {
   display: inline-flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: center;
+  isolation: isolate;
+}
+.smwb-avatar-group > :not(:first-child) {
+  margin-left: -8px;
+}
+.smwb-avatar-group > :nth-child(1) {
+  z-index: 12;
+}
+.smwb-avatar-group > :nth-child(2) {
+  z-index: 11;
+}
+.smwb-avatar-group > :nth-child(3) {
+  z-index: 10;
+}
+.smwb-avatar-group > :nth-child(4) {
+  z-index: 9;
+}
+.smwb-avatar-group > :nth-child(5) {
+  z-index: 8;
+}
+.smwb-avatar-group > :nth-child(6) {
+  z-index: 7;
+}
+.smwb-avatar-group > :nth-child(7) {
+  z-index: 6;
+}
+.smwb-avatar-group > :nth-child(8) {
+  z-index: 5;
+}
+.smwb-avatar-group > :nth-child(9) {
+  z-index: 4;
+}
+.smwb-avatar-group > :nth-child(10) {
+  z-index: 3;
+}
+.smwb-avatar-group > :nth-child(11) {
+  z-index: 2;
+}
+.smwb-avatar-group > :nth-child(12) {
+  z-index: 1;
+}
+.smwb-avatar-group > :focus-visible,
+.smwb-avatar-group > :has(:focus-visible) {
+  z-index: 13;
 }
 .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-person-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  min-width: 0;
+  vertical-align: middle;
+  color: inherit;
+  text-decoration: none;
+}
+.smwb-avatar.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;
@@ -6252,14 +7291,23 @@
 }
 .smwb-rating {
   display: inline-flex;
-  align-items: center;
-  gap: 2px;
+  flex-direction: column;
+  align-items: flex-start;
   color: var(--smui-primaryColor);
 }
 .smwb-rating_disabled {
   opacity: 0.38;
   pointer-events: none;
 }
+.smwb-rating__control {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.smwb-rating__control:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
 .smwb-rating__item {
   position: relative;
   display: inline-flex;
@@ -6366,60 +7414,341 @@
   flex-direction: column;
   gap: 8px;
 }
-.smwb-stepper {
-  display: flex;
+.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-stepper_horizontal {
-  flex-direction: row;
-  align-items: center;
+.smwb-chart__canvas {
+  position: absolute;
+  inset: 0;
 }
-.smwb-stepper_vertical {
-  flex-direction: column;
-  align-items: stretch;
+.smwb-chart .smwb-chart__skeleton {
+  position: absolute;
+  inset: 0;
 }
-.smwb-stepper__step {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  color: var(--smui-onSurfaceVariant);
+.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;
 }
-.smwb-stepper__step_active {
+: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-dag-view {
+  --smwb-dag-view-node-bg: var(--smui-surfaceBackground);
+  --smwb-dag-view-node-border: var(--smui-outlineColor);
+  --smwb-dag-view-edge-color: var(--smui-outlineColor);
+  --smwb-dag-view-edge-active-color: var(--smui-primaryColor);
+  --smwb-dag-view-selected-ring: var(--smui-primaryColor);
+  --smwb-dag-view-status-idle: var(--smui-outlineColor);
+  --smwb-dag-view-status-pending: var(--smui-onSurfaceVariant);
+  --smwb-dag-view-status-running: var(--smui-infoColor);
+  --smwb-dag-view-status-success: var(--smui-successColor);
+  --smwb-dag-view-status-warning: var(--smui-warningColor);
+  --smwb-dag-view-status-error: var(--smui-errorColor);
+  --smwb-dag-view-status-skipped: var(--smui-disabledTextColor);
+  --smwb-dag-view-dim-opacity: 0.35;
+  position: relative;
+  width: 100%;
+  height: 480px;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow: clip;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 12px;
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 2%, var(--smui-surfaceBackground));
   color: var(--smui-onSurfaceColor);
+  touch-action: none;
+  overscroll-behavior: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
 }
-.smwb-stepper__step_active .smwb-stepper__icon {
-  background-color: var(--smui-primaryColor);
-  color: var(--smui-onPrimaryColor);
+.smwb-dag-view[data-interacting] {
+  cursor: grabbing;
 }
-.smwb-stepper__step_active .smwb-stepper__label {
-  font-weight: 600;
-  color: var(--smui-primaryColor);
+.smwb-dag-view__world {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
 }
-.smwb-stepper__step_completed .smwb-stepper__icon {
-  background-color: var(--smui-primaryColor);
-  color: var(--smui-onPrimaryColor);
+.smwb-dag-view[data-interacting] .smwb-dag-view__world {
+  will-change: transform;
 }
-.smwb-stepper__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: var(--smui-disabledBgColor);
-  color: var(--smui-onSurfaceVariant);
-  font-size: 0.8rem;
-  font-weight: 500;
+.smwb-dag-view__edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
 }
-.smwb-stepper__text {
+.smwb-dag-view__edge {
+  fill: none;
+  stroke: var(--smwb-dag-view-edge-color);
+  stroke-width: 1.5px;
+  transition: stroke 0.12s, opacity 0.12s;
+}
+.smwb-dag-view__edge--active {
+  stroke: var(--smwb-dag-view-edge-active-color);
+  stroke-width: 2.5px;
+}
+.smwb-dag-view__edge--reversed {
+  stroke-dasharray: 6 4;
+}
+.smwb-dag-view__edge--dimmed {
+  opacity: var(--smwb-dag-view-dim-opacity);
+}
+.smwb-dag-view__arrow {
+  fill: var(--smwb-dag-view-edge-color);
+}
+.smwb-dag-view__arrow--active {
+  fill: var(--smwb-dag-view-edge-active-color);
+}
+.smwb-dag-view__node {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 0 10px;
+  border: 1px solid var(--smwb-dag-view-node-border);
+  border-left: 4px solid var(--smwb-dag-view-accent);
+  border-radius: 8px;
+  background-color: var(--smwb-dag-view-node-bg);
+  color: var(--smui-onSurfaceColor);
+  font-size: 0.875rem;
+  line-height: 1.3;
+  overflow: hidden;
+  contain: layout paint;
+  cursor: pointer;
+  transition: box-shadow 0.12s, border-color 0.12s, opacity 0.12s;
+}
+.smwb-dag-view__node[data-status="pending"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-pending));
+}
+.smwb-dag-view__node[data-status="running"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-running));
+}
+.smwb-dag-view__node[data-status="success"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-success));
+}
+.smwb-dag-view__node[data-status="warning"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-warning));
+}
+.smwb-dag-view__node[data-status="error"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-error));
+}
+.smwb-dag-view__node[data-status="skipped"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-skipped));
+}
+.smwb-dag-view__node:hover {
+  border-color: color-mix(in srgb, var(--smwb-dag-view-edge-active-color) 45%, var(--smwb-dag-view-node-border));
+  border-left-color: var(--smwb-dag-view-accent);
+}
+.smwb-dag-view__node:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+.smwb-dag-view__node--selected {
+  box-shadow: 0 0 0 2px var(--smwb-dag-view-selected-ring);
+}
+.smwb-dag-view__node--upstream,
+.smwb-dag-view__node--downstream {
+  border-color: var(--smwb-dag-view-edge-active-color);
+  border-left-color: var(--smwb-dag-view-accent);
+}
+.smwb-dag-view__node--dimmed {
+  opacity: var(--smwb-dag-view-dim-opacity);
+}
+.smwb-dag-view__node--disabled {
+  cursor: default;
+  color: var(--smui-disabledTextColor);
+}
+.smwb-dag-view__dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--smwb-dag-view-accent);
+}
+.smwb-dag-view__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.smwb-dag-view__status {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-dag-view[data-zoom="far"] .smwb-dag-view__status,
+.smwb-dag-view[data-zoom="far"] .smwb-dag-view__detail {
+  display: none;
+}
+.smwb-dag-view__summary {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.smwb-dag-view__controls {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  cursor: default;
+}
+.smwb-dag-view__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 8px;
+  background-color: var(--smui-surfaceBackground);
+  color: var(--smui-onSurfaceVariant);
+  cursor: pointer;
+}
+.smwb-dag-view__control svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.smwb-dag-view__control:hover {
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, var(--smui-surfaceBackground));
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-dag-view__control:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
+    animation: smwb-dag-view-pulse 1.4s ease-in-out infinite;
+  }
+}
+@keyframes smwb-dag-view-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+.smwb-stepper {
+  display: flex;
+  width: 100%;
+}
+.smwb-stepper_horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+.smwb-stepper_vertical {
+  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;
+  gap: 8px;
+  flex-shrink: 0;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-stepper__step_active {
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-stepper__step_active .smwb-stepper__icon {
+  background-color: var(--smui-primaryColor);
+  color: var(--smui-onPrimaryColor);
+}
+.smwb-stepper__step_active .smwb-stepper__label {
+  font-weight: 600;
+  color: var(--smui-primaryColor);
+}
+.smwb-stepper__step_completed .smwb-stepper__icon {
+  background-color: var(--smui-primaryColor);
+  color: var(--smui-onPrimaryColor);
+}
+.smwb-stepper__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--smui-disabledBgColor);
+  color: var(--smui-onSurfaceVariant);
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+.smwb-stepper__text {
   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 +7768,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 +7783,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 +8120,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;
 }
@@ -6542,16 +8178,15 @@
   font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
+  text-transform: var(--smui-font-overline-transform, uppercase);
+  letter-spacing: var(--smui-font-overline-letter-spacing, 0.06em);
 }
 .smwb-typography_button {
   font-size: 14px;
   font-weight: 500;
   line-height: 1.75;
-}
-.smwb-typography_overline,
-.smwb-typography_button {
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  text-transform: var(--smui-font-button-transform, uppercase);
+  letter-spacing: var(--smui-font-button-letter-spacing, 0.06em);
 }
 .smwb-typography_color-primary {
   color: var(--smui-primaryColor);
@@ -6600,6 +8235,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 +8328,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;
@@ -6812,10 +8548,14 @@
   background: blue;
   opacity: 1;
 }
+.smwb-head-cell .smwb-head-cell__actions:has(> .smwb-rt-table--resizer:only-child) {
+  margin-inline-start: 0;
+}
 @media (hover: hover) {
   .smwb-rt-table--resizer {
     opacity: 0.5;
   }
+  .smwb-head-cell:hover .smwb-rt-table--resizer,
   *:hover > .smwb-rt-table--resizer {
     opacity: 1;
   }
@@ -7068,6 +8808,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 +8948,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;