@smwb/ui-styles 1.4.3 → 1.5.0

package/less/components/progressIndicator/progressIndicator.less

@@ -78,6 +78,39 @@
   }
 }
 
+// fullWidth: the track follows its container, and may shrink in a grid track
+// or a table cell instead of stretching it.
+.smwb-indicator_linear.smwb-indicator_full-width {
+  width: 100%;
+  min-width: 0;
+}
+
+// valueLabel: the bar and its value side by side; the bar takes what the text
+// leaves (its 240px when the wrapper is not sized).
+.smwb-indicator_labeled {
+  display: inline-flex;
+  align-items: center;
+  gap: @smui-space-sm;
+  max-width: 100%;
+  vertical-align: middle;
+  > .smwb-indicator_linear {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  &.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%;

package/less/components/sectionHeader/sectionHeader.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./sectionHeader.less";

package/less/components/sectionHeader/sectionHeader.less

@@ -0,0 +1,115 @@
+// A section's heading row: the title with its count and help hint (a subtitle
+// under them) on the left, the actions at the end. On a narrow screen the
+// actions wrap onto a line of their own and stay at the end.
+.smwb-section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: @smui-space-sm @smui-space-md;
+  // Keep its natural height in a height-constrained flex column.
+  flex: 0 0 auto;
+  margin: 0 0 @smui-space-md;
+  min-width: 0;
+
+  &__titles {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  // Text flow, not flex: the count and the "?" follow the title's last word
+  // when it wraps. (A wrapped flex item is as wide as the line, which would
+  // push them to the far end.)
+  &__title-line {
+    font-size: @sectionHeaderTitleSize;
+    line-height: 1.3;
+    overflow-wrap: break-word;
+
+    > :not(.smwb-section-header__title) {
+      margin-left: @smui-space-sm;
+      vertical-align: middle;
+    }
+  }
+
+  // A subsection's heading (h3 and below) is a step smaller.
+  &_level-3,
+  &_level-4,
+  &_level-5,
+  &_level-6 {
+    .smwb-section-header__title-line {
+      font-size: @sectionHeaderMinorTitleSize;
+      line-height: 1.5;
+    }
+  }
+
+  &__title {
+    display: inline;
+    margin: 0;
+    font-size: inherit;
+    font-weight: 600;
+    line-height: inherit;
+    letter-spacing: -0.01em;
+    color: var(--smui-onSurfaceColor);
+  }
+
+  &__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;
+  }
+
+  &__help {
+    display: inline-flex;
+    border-radius: @smui-radius-circle;
+    color: var(--smui-onSurfaceVariant);
+    cursor: help;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--smui-primaryColor);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  // The help is a sentence or two, so its tooltip wraps — at its max-width, not
+  // at the icon's: it is positioned in the icon's box, which would otherwise
+  // squeeze it to a word per line. Two classes: the tooltip's own rule must not
+  // win on stylesheet order.
+  .smwb-tooltip&__tooltip {
+    width: max-content;
+    height: auto;
+    max-width: 280px;
+    padding: @smui-space-xs @smui-space-sm;
+    line-height: 1.4;
+    white-space: normal;
+    text-align: left;
+  }
+
+  &__subtitle {
+    margin-top: @smui-space-xxs;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: @smui-space-sm;
+    margin-left: auto;
+    min-width: 0;
+  }
+}

package/less/components/selectField/selectField.less

@@ -64,6 +64,12 @@
     & + span {
       margin-left: @selectFieldChipMarginLeft;
     }
+
+    // Chips sit at the top of the line: on the baseline they added half a pixel
+    // to the field's height.
+    .smwb-chip {
+      vertical-align: top;
+    }
   }
 
   &__search {
@@ -180,3 +186,16 @@
   font-style: italic;
   color: var(--smui-primaryColor);
 }
+
+// size, as for TextField: the padding and the font follow the control scale, so
+// a small select stands as tall as a small text field or button in a toolbar.
+.smwb-text-field_size-small .smwb-select-field:not(.smwb-select-field--inline) {
+  padding-top: @smui-space-sm;
+  padding-bottom: @smui-space-sm;
+  font-size: @smui-control-font-sm;
+}
+.smwb-text-field_size-large .smwb-select-field:not(.smwb-select-field--inline) {
+  padding-top: @smui-space-lg;
+  padding-bottom: @smui-space-lg;
+  font-size: @smui-control-font-lg;
+}

package/less/components/stat/stat.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./stat.less";

package/less/components/stat/stat.less

@@ -0,0 +1,117 @@
+// A figure with its label. The accent (a tile's edge, the icon) follows the tone.
+.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;
+
+  &__label {
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    color: var(--smui-onSurfaceVariant);
+    overflow-wrap: break-word;
+  }
+
+  &__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;
+  }
+
+  &__hint {
+    font-size: 0.75rem;
+    line-height: 1.3;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__icon {
+    display: inline-flex;
+    color: var(--smwb-stat-accent);
+  }
+
+  &__extra {
+    min-width: 0;
+    margin-top: @smui-space-xs;
+  }
+
+  // With an icon: the icon in its own column, the rest beside it.
+  &_with-icon {
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: @smui-space-sm;
+
+    > :not(.smwb-stat__icon) {
+      grid-column: 2;
+    }
+    .smwb-stat__icon {
+      grid-row: 1 / span 4;
+      align-self: start;
+      padding-top: 1px;
+    }
+  }
+
+  &_tile {
+    padding: @smui-space-md @smui-space-lg;
+    border: 1px solid var(--smui-dividerColor);
+    border-radius: @smui-radius-md;
+    background-color: var(--smui-surfaceBackground);
+    box-shadow: inset 3px 0 0 var(--smwb-stat-accent);
+  }
+
+  &_plain {
+    padding: @smui-space-sm @smui-space-md;
+    border: 1px solid transparent;
+    border-radius: @smui-radius-md;
+
+    .smwb-stat__value {
+      font-size: 1.25rem;
+    }
+  }
+
+  &_link {
+    cursor: pointer;
+    transition:
+      background-color 0.12s,
+      border-color 0.12s;
+
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+      border-color: var(--smui-dividerColor);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  &_tone-info {
+    --smwb-stat-accent: var(--smui-infoColor);
+  }
+  &_tone-success {
+    --smwb-stat-accent: var(--smui-successColor);
+  }
+  &_tone-warning {
+    --smwb-stat-accent: var(--smui-warningColor);
+  }
+  &_tone-error {
+    --smwb-stat-accent: var(--smui-errorColor);
+  }
+  &_tone-warning &__value,
+  &_tone-error &__value {
+    color: var(--smwb-stat-accent);
+  }
+}
+
+// A row of stats: as many columns as fit, each at least --smwb-stat-min wide.
+.smwb-stat-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--smwb-stat-min, 9rem), 100%), 1fr));
+  gap: @smui-space-sm;
+  min-width: 0;
+}

package/less/components/stepper/stepper.less

@@ -1,3 +1,32 @@
+// Column layout: the vertical stepper, and `auto` in a narrow container.
+.smwb-stepper-column() {
+  flex-direction: column;
+  align-items: stretch;
+
+  .smwb-stepper__step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: @stepperLabelGap;
+    min-width: 0;
+    text-align: start;
+  }
+
+  .smwb-stepper__text {
+    align-items: flex-start;
+  }
+
+  .smwb-stepper__connector {
+    width: 1px;
+    height: auto;
+    min-width: 0;
+    min-height: @smui-space-6;
+    margin: @smui-space-xs 0 @smui-space-xs (@stepperIconSize / 2);
+    background-color: var(--smui-dividerColor);
+    flex: 0 0 auto;
+  }
+}
+
 .smwb-stepper {
   display: flex;
   width: 100%;
@@ -8,8 +37,7 @@
   }
 
   &_vertical {
-    flex-direction: column;
-    align-items: stretch;
+    .smwb-stepper-column();
   }
 
   &__step {
@@ -59,10 +87,17 @@
     display: flex;
     flex-direction: column;
     line-height: 1.3;
+    min-width: 0;
   }
 
+  // Labels break between words only. A page with `hyphens: auto` would otherwise
+  // let a narrow step split them by syllables: hyphenation points count towards
+  // the step's minimum width, so steps under the label shrink to a syllable.
   &__label {
     font-size: 0.875rem;
+    hyphens: manual;
+    overflow-wrap: normal;
+    word-break: normal;
   }
 
   &__optional {
@@ -87,20 +122,6 @@
     background-color: var(--smui-dividerColor);
   }
 
-  &_vertical {
-    .smwb-stepper__step {
-      align-items: flex-start;
-    }
-
-    .smwb-stepper__connector {
-      width: 1px;
-      min-height: @smui-space-6;
-      margin: @smui-space-xs 0 @smui-space-xs (@stepperIconSize / 2);
-      background-color: var(--smui-dividerColor);
-      flex: 0 0 auto;
-    }
-  }
-
   &_alt-label {
     align-items: flex-start;
 
@@ -121,6 +142,26 @@
   }
 }
 
+// `auto`: a row while the container is wide enough for every step, a column when
+// it is not. The container is a wrapper around the stepper (the stepper's own
+// flex direction is what switches); the width it takes is the step count, set
+// as data-steps, times @stepperAutoStepWidth.
+.smwb-stepper-auto {
+  container: smwb-stepper / inline-size;
+  width: 100%;
+  min-width: 0;
+}
+
+.smwb-stepper-auto-steps(@n) when (@n <= @stepperAutoMaxSteps) {
+  @container smwb-stepper (max-width: (@n * @stepperAutoStepWidth)) {
+    .smwb-stepper_auto[data-steps="@{n}"] {
+      .smwb-stepper-column();
+    }
+  }
+  .smwb-stepper-auto-steps(@n + 1);
+}
+.smwb-stepper-auto-steps(1);
+
 .smwb-stepper__step_error {
   .smwb-stepper__icon {
     background-color: var(--smui-errorColor);

package/less/components/table/table.less

@@ -196,3 +196,76 @@
   z-index: 2;
   background-color: var(--smui-surfaceBackground);
 }
+
+// stackBelow: while the table's container is narrower than the breakpoint, each
+// row is a card — cells one under another, the column's name (data-label) in a
+// column of its own next to the value. A container query on the wrapper: the
+// space the table has decides, not the window's width.
+.smwb-table__wrapper_stack-sm,
+.smwb-table__wrapper_stack-md,
+.smwb-table__wrapper_stack-lg {
+  container: smwb-table / inline-size;
+}
+
+.smwb-table-stacked() {
+  // As a block the table would show the scrollbars of its overflow: scroll.
+  .smwb-table {
+    display: block;
+    white-space: normal;
+    overflow: visible;
+  }
+  // The column names move into the cells.
+  .smwb-table__head {
+    display: none;
+  }
+  .smwb-table__body {
+    display: block;
+  }
+  .smwb-table__row {
+    display: block;
+    padding: @smui-space-sm 0;
+  }
+  .smwb-table__cell:not(.smwb-table__loader) {
+    display: grid;
+    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
+    column-gap: @smui-space-md;
+    align-items: baseline;
+    height: auto;
+    padding: @smui-space-xs @tableCellPaddingX;
+    white-space: normal;
+    overflow: visible;
+    overflow-wrap: break-word;
+    text-overflow: clip;
+    text-align: start;
+
+    &::before {
+      content: attr(data-label);
+      font-size: 0.75rem;
+      line-height: 1.4;
+      color: var(--smui-onSurfaceVariant);
+    }
+    // A cell without a label (an action, a sub-row) takes the whole line.
+    &:not([data-label]) {
+      display: block;
+      &::before {
+        content: none;
+      }
+    }
+  }
+}
+
+@container smwb-table (max-width: (@smui-bp-sm - 0.02px)) {
+  .smwb-table__wrapper_stack-sm {
+    .smwb-table-stacked();
+  }
+}
+@container smwb-table (max-width: (@smui-bp-md - 0.02px)) {
+  .smwb-table__wrapper_stack-md {
+    .smwb-table-stacked();
+  }
+}
+@container smwb-table (max-width: (@smui-bp-lg - 0.02px)) {
+  .smwb-table__wrapper_stack-lg {
+    .smwb-table-stacked();
+  }
+}

package/less/components/tabs/tab/tab.less

@@ -112,3 +112,12 @@
   pointer-events: none;
   cursor: default;
 }
+
+// Compact tabs (Tabs dense): labels as written — no capitals, no letter spacing —
+// and less padding, so more tabs fit in a row.
+.smwb-tabs--dense .smwb-tab {
+  padding: 0 @tabDensePaddingX;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+}

package/less/components/tabs/tabs.less

@@ -25,6 +25,52 @@
     display: flex;
   }
 
+  // A scrollable row hides its scrollbar, so the edge beyond which more tabs are
+  // hidden fades out instead (the component sets --overflow-start / -end).
+  &--overflow-end &__scroller--scrollable {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - @tabsFadeWidth), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - @tabsFadeWidth), transparent);
+  }
+  &--overflow-start &__scroller--scrollable {
+    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - @tabsFadeWidth), transparent);
+    mask-image: linear-gradient(to left, #000 calc(100% - @tabsFadeWidth), transparent);
+  }
+  &--overflow-start&--overflow-end &__scroller--scrollable {
+    @fade: linear-gradient(
+      to right,
+      transparent,
+      #000 @tabsFadeWidth,
+      #000 calc(100% - @tabsFadeWidth),
+      transparent
+    );
+    -webkit-mask-image: @fade;
+    mask-image: @fade;
+  }
+
+  &__scroll-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: @tabsScrollButtonWidth;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--smui-onSurfaceVariant);
+    cursor: pointer;
+    &:hover:not(:disabled) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+    &:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
+  }
+
   &__indicator {
     display: flex;
     justify-content: center;

package/less/components/textField/textField.less

@@ -361,11 +361,17 @@
   }
 }
 
+// 8 + 23 + 9 = 40px, the md control height: the extra pixel at the bottom is the
+// same as the medium size's 16/17.
 .smwb-text-field_size-small .smwb-text-field__input:not(.smwb-text-field__input--inline) {
   padding-top: @smui-space-sm;
-  padding-bottom: @smui-space-sm;
+  padding-bottom: (@smui-space-sm + 1px);
   font-size: @smui-control-font-sm;
 }
+// A resting label sits in the middle of the smaller field, not 16px down.
+.smwb-text-field_size-small:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
+  transform: translate(16px, @smui-space-sm);
+}
 .smwb-text-field_size-large .smwb-text-field__input:not(.smwb-text-field__input--inline) {
   padding-top: @smui-space-lg;
   padding-bottom: @smui-space-lg;

package/less/components/timeline/timeline.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./timeline.less";