@smwb/ui-styles 1.5.1 → 2.0.0

package/less/components/selectField/selectField.less

@@ -7,8 +7,16 @@
   box-sizing: border-box;
   cursor: pointer;
 
+  // The content row is 24px tall (the search wrapper's min-height and the 1.5rem
+  // arrow icon), so the vertical padding is (token - 24px) / 2: 24 + (token - 24)
+  // = token exactly, and the 23px text line sits at token / 2 as the resting
+  // label (textField.less: (token - 23px) / 2 above a 23px line) does. A wrapped
+  // multi-select grows past min-height and keeps the same padding.
   &:not(&--inline) {
     padding: @selectFieldPadding;
+    padding-top: calc((var(--smui-control-h-md, @smui-control-h-md) - 24px) / 2);
+    padding-bottom: calc((var(--smui-control-h-md, @smui-control-h-md) - 24px) / 2);
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
   }
 
   &:not(&--inline)&--filled {
@@ -44,6 +52,33 @@
     }
   }
 
+  // The control, the part of the field that is the button: the selected text
+  // and the search box. Chips sit before it and the clear button after it,
+  // outside, so it takes the room they leave.
+  &__control {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    align-self: stretch;
+    // The scrolling row the control sits in would cut its focus ring, so the
+    // ring goes around the whole field, as when the field was the control: the
+    // control's own is pushed out of sight, and ::after, laid over the field
+    // (the input holder is its containing block), takes its outline. Whatever
+    // sets that outline still decides it, e.g. a reset that removes focus rings
+    // (normalize.css) removes this one too.
+    &:focus {
+      outline-offset: 9999px;
+    }
+
+    &:focus::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      outline: inherit;
+      pointer-events: none;
+    }
+  }
+
   &__actions {
     display: flex;
     align-items: center;
@@ -51,6 +86,19 @@
     margin-right: -7px;
   }
 
+  // The clear button draws only its icon.
+  &__clear {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
   &__values {
     white-space: nowrap;
     font: inherit;
@@ -61,7 +109,10 @@
       margin-left: @selectFieldChipMarginLeft;
     }
 
-    & + span {
+    // The search box keeps its distance from the values: it follows the
+    // selected text in the control, or opens the control after the chips.
+    & + .smwb-select-field__search,
+    & + .smwb-select-field__control > .smwb-select-field__search {
       margin-left: @selectFieldChipMarginLeft;
     }
 
@@ -187,15 +238,46 @@
   color: var(--smui-primaryColor);
 }
 
+// The options: a listbox, and the groups in it, inside the menu's list.
+.smwb-select-field__listbox,
+.smwb-select-field__group-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// The option the keyboard is on. The focus stays on the field, which points at
+// the option, so it is drawn as a menu item with the keyboard focus: the ring
+// inside it (an optionRenderer's option too) and the focus state layer.
+.smwb-select-field__option--active {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+
+// Inside the menu, so it outranks the selected shade (.smwb-menu__item--selected)
+// whichever stylesheet comes first; menu.less keeps hover off it.
+.smwb-menu .smwb-menu__item.smwb-select-field__option--active:before {
+  opacity: @menuOpacity-focus;
+}
+
 // 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;
+  padding-top: calc((var(--smui-control-h-sm, @smui-control-h-sm) - 24px) / 2);
+  padding-bottom: calc((var(--smui-control-h-sm, @smui-control-h-sm) - 24px) / 2);
+  min-height: var(--smui-control-h-sm, @smui-control-h-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;
+  padding-top: calc((var(--smui-control-h-lg, @smui-control-h-lg) - 24px) / 2);
+  padding-bottom: calc((var(--smui-control-h-lg, @smui-control-h-lg) - 24px) / 2);
+  min-height: var(--smui-control-h-lg, @smui-control-h-lg);
   font-size: @smui-control-font-lg;
 }
+// A filled select keeps its own padding and height (the shrunk label needs it).
+.smwb-select-field--filled:not(.smwb-select-field--inline),
+.smwb-text-field_size-small .smwb-select-field--filled:not(.smwb-select-field--inline),
+.smwb-text-field_size-large .smwb-select-field--filled:not(.smwb-select-field--inline) {
+  min-height: 0;
+  padding: @selectFieldFilledPadding;
+}

package/less/components/sidebar/sidebar.less

@@ -47,6 +47,27 @@
     }
   }
 
+  // Contained mode (the `contained` prop): an in-flow rail for side panels
+  // inside a page area instead of a viewport-fixed one. The rail keeps its
+  // variant width, does not shrink, stretches to the container's height and
+  // scrolls a long menu inside itself.
+  &.smwb-sidebar_contained {
+    position: relative;
+    top: auto;
+    left: auto;
+    height: 100%;
+    min-height: 0;
+    align-self: stretch;
+    flex-shrink: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // A long one-word title (e.g. the compact variant's) must not spill past
+    // the rail: the rail clips horizontally instead of growing a scrollbar.
+    .smwb-nav-item {
+      overflow: hidden;
+    }
+  }
+
   &__collapse {
     width: 100%;
     display: flex;
@@ -94,6 +115,11 @@
     flex-direction: column;
     align-items: center;
     gap: @sidebarNavGap;
+    // Never squash items to fit a definite-height nav (contained mode):
+    // a long menu must scroll inside the rail, not compress its items.
+    .smwb-nav-item {
+      flex-shrink: 0;
+    }
   }
 
   .smwb-nav-item {

package/less/components/statusDot/statusDot.entry.less

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

package/less/components/statusDot/statusDot.less

@@ -0,0 +1,118 @@
+// A status marker: a small dot that sits beside a label in a tree node, a tab or
+// a graph node. The colour comes from theme tokens only; shape tells the quiet
+// statuses apart without it (idle is solid, unknown is a ring).
+.smwb-status-dot {
+  --smwb-status-dot-color: var(--smui-onSurfaceVariant);
+  display: inline-block;
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  width: @statusDotSizeMd;
+  height: @statusDotSizeMd;
+  border-radius: 50%;
+  background-color: var(--smwb-status-dot-color);
+  vertical-align: middle;
+
+  &_size-sm {
+    width: @statusDotSizeSm;
+    height: @statusDotSizeSm;
+  }
+
+  &_status-active {
+    --smwb-status-dot-color: var(--smui-infoColor);
+  }
+  &_status-attention {
+    --smwb-status-dot-color: var(--smui-warningColor);
+  }
+  &_status-idle {
+    --smwb-status-dot-color: var(--smui-onSurfaceVariant);
+  }
+  &_status-done {
+    --smwb-status-dot-color: var(--smui-successColor);
+  }
+  &_status-error {
+    --smwb-status-dot-color: var(--smui-errorColor);
+  }
+  // Not known yet: a ring, not a disc, in the outline colour.
+  &_status-unknown {
+    --smwb-status-dot-color: var(--smui-outlineColor);
+    background-color: transparent;
+    border: @statusDotRing solid var(--smwb-status-dot-color);
+  }
+
+  // After the statuses, so a `color` wins over the status's own.
+  &_color-default {
+    --smwb-status-dot-color: var(--smui-onSurfaceVariant);
+  }
+  &_color-primary {
+    --smwb-status-dot-color: var(--smui-primaryColor);
+  }
+  &_color-secondary {
+    --smwb-status-dot-color: var(--smui-secondaryColor);
+  }
+  &_color-error {
+    --smwb-status-dot-color: var(--smui-errorColor);
+  }
+  &_color-success {
+    --smwb-status-dot-color: var(--smui-successColor);
+  }
+  &_color-warning {
+    --smwb-status-dot-color: var(--smui-warningColor);
+  }
+  &_color-info {
+    --smwb-status-dot-color: var(--smui-infoColor);
+  }
+
+  // The pulse is a ring spreading from the dot. It is drawn only while motion is
+  // allowed, so with reduced motion the dot stays still and nothing else changes.
+  &_pulse::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--smwb-status-dot-color);
+    opacity: 0;
+    pointer-events: none;
+  }
+  // `unknown` is a ring, so its pulse is a ring too, not a disc inside it.
+  &_status-unknown&_pulse::after {
+    inset: -@statusDotRing;
+    background-color: transparent;
+    border: @statusDotRing solid var(--smwb-status-dot-color);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .smwb-status-dot_pulse::after {
+    animation: smwb-status-dot-pulse 1.6s ease-out infinite;
+  }
+}
+
+@keyframes smwb-status-dot-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+// Forced colours drop background colours: draw the dot in the text colour.
+@media (forced-colors: active) {
+  .smwb-status-dot {
+    background-color: CanvasText;
+    &_status-unknown {
+      background-color: transparent;
+      border-color: CanvasText;
+    }
+    &_pulse::after {
+      background-color: CanvasText;
+    }
+    &_status-unknown&_pulse::after {
+      background-color: transparent;
+      border-color: CanvasText;
+    }
+  }
+}

package/less/components/swimlanes/swimlanes.entry.less

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

package/less/components/swimlanes/swimlanes.less

@@ -0,0 +1,126 @@
+// Participant lanes: one row per lane, a header column fixed on the leading
+// edge and a content cell that scrolls sideways under it. The root is the
+// scroller; the rows are absolutely placed in a sizer, so a lane scrolled out
+// of the virtual window keeps its own place instead of joining a moved band.
+.smwb-swimlanes {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  // The default height; the `height` prop or a height in `style` wins.
+  height: @swimlanesHeight;
+  min-width: 0;
+  overflow: auto;
+  // A fling at an edge must not scroll the page. There is no smooth scrolling:
+  // the keyboard pages the virtual window, and the two must agree at once.
+  overscroll-behavior: contain;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: @smui-radius-lg;
+  background-color: var(--smui-surfaceBackground);
+  color: var(--smui-onSurfaceColor);
+
+  // No rows to scroll: the label sits centred in the box the grid keeps.
+  &_empty {
+    display: grid;
+    place-items: center;
+  }
+
+  &__empty {
+    padding: @smui-space-8 @smui-space-lg;
+    color: var(--smui-onSurfaceVariant);
+    text-align: center;
+  }
+
+  &__sizer {
+    position: relative;
+    // The width that creates the sideways overflow: both columns at least.
+    min-width: calc(
+      var(--smwb-swimlanes-header-width, @swimlanesHeaderWidth) + var(--smwb-swimlanes-content-min-width, 0px)
+    );
+  }
+
+  &__row {
+    // One tint for the whole band; both cells read it.
+    --smwb-swimlanes-tint: transparent;
+
+    position: absolute;
+    right: 0;
+    left: 0;
+    display: grid;
+    grid-template-columns: var(--smwb-swimlanes-header-width, @swimlanesHeaderWidth) minmax(0, 1fr);
+    box-sizing: border-box;
+    // The row height is JS-only: the virtual window's maths needs it there.
+    height: var(--smwb-swimlanes-row-height);
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
+
+  // Hover, then selected, then disabled — all at one class's weight, so this
+  // order alone decides the tint a lane wears.
+  &__row:where(:hover) {
+    --smwb-swimlanes-tint: var(--smui-onSurfaceHover);
+  }
+
+  &__row_selected {
+    --smwb-swimlanes-tint: color-mix(in srgb, var(--smui-primaryColor) 12%, transparent);
+  }
+
+  // A disabled lane is not a target, so it takes no tint under the pointer.
+  &__row_disabled {
+    --smwb-swimlanes-tint: transparent;
+    color: var(--smui-disabledTextColor);
+  }
+
+  &__header,
+  &__content {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    padding: @smui-space-sm @smui-space-md;
+    overflow: hidden;
+  }
+
+  // Sticks to the leading edge while the content scrolls under it. The
+  // background is opaque, so what scrolls past is hidden: the tint is painted
+  // over the surface as a gradient layer, and both follow the theme.
+  &__header {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    background: linear-gradient(var(--smwb-swimlanes-tint), var(--smwb-swimlanes-tint)), var(--smui-surfaceBackground);
+    // The divider between the fixed column and the scrolling one.
+    box-shadow: inset -1px 0 0 var(--smui-dividerColor);
+  }
+
+  // The selected lane's stripe, so the selection is not the tint alone.
+  &__row_selected &__header {
+    box-shadow:
+      inset 3px 0 0 var(--smui-primaryColor),
+      inset -1px 0 0 var(--smui-dividerColor);
+  }
+
+  &__content {
+    background-color: var(--smwb-swimlanes-tint);
+  }
+
+  // normalize.css takes the outline off :focus, so both cells get a ring here.
+  // It is inset: the rows abut, and the scroller would clip an outer one.
+  &__header:focus-visible,
+  &__content:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+}
+
+// Forced colours drop backgrounds and shadows: the selection becomes an
+// outline on both cells, and the sticky header stays opaque in Canvas. A
+// focused cell keeps its own ring.
+@media (forced-colors: active) {
+  .smwb-swimlanes__header {
+    background: Canvas;
+  }
+
+  .smwb-swimlanes__row_selected .smwb-swimlanes__header:not(:focus-visible),
+  .smwb-swimlanes__row_selected .smwb-swimlanes__content:not(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/less/components/tabGroups/tabGroups.entry.less

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

package/less/components/tabGroups/tabGroups.less

@@ -0,0 +1,219 @@
+// Tab groups: one CSS grid whose children are the groups' headers, the separators between them
+// and the panels. The component computes the tracks and every child's `grid-area` from the
+// layout (see `tabGroupsLayout.ts`), and the panels stay in the DOM in the order they first
+// appeared: a move only changes where a panel is drawn, so it keeps its state, its scroll, an
+// iframe in it and the focus inside it.
+.smwb-tab-groups {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  // The separator track the component's `grid-template-*` names.
+  --smwb-tab-groups-separator-size: @tabGroupsSeparatorSize;
+
+  &__header {
+    display: flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    min-width: 0;
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
+
+  // The group the user works in. An inset shadow, not a border: the header track is `auto` and
+  // shared by a row, so a border on one header would grow it past its neighbours. Drawn only
+  // under `--split` (two groups or more) — a single group is plain Tabs and marks nothing.
+  &--split &__header--active {
+    box-shadow: inset 0 @tabGroupsActiveLineWidth 0 0 var(--smui-primaryColor);
+  }
+
+  &__tabs {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  // The group's actions button: the box of Tabs' overflow trigger, which it sits beside.
+  &__actions-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: @tabsOverflowTriggerWidth;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--smui-onSurfaceVariant);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+    // normalize.css removes the outline: the trigger draws its own ring.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+    &:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
+  }
+
+  // The panel is a grid child of its own (one per tab, only the selected one shown), so it
+  // clips and scrolls by itself; `.smwb-tab-panel` keeps the focus ring.
+  &__panel {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  // A separator between two groups: ScreenDivider's resizer look, a grip wider than the track
+  // so the pointer has something to catch, and the resize the component drives from it.
+  &__separator {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    background: var(--smui-primaryContainer);
+    // A pointer-drag resize owns the touch gesture: no page scroll while it runs.
+    touch-action: none;
+    user-select: none;
+
+    // The invisible grip: the track is thin, the hit area is not.
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+    }
+
+    &--vertical {
+      border-left: thin solid var(--smui-primaryColor);
+      border-right: thin solid var(--smui-primaryColor);
+      cursor: col-resize;
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: @tabGroupsSeparatorHitArea;
+        transform: translateX(-50%);
+      }
+    }
+
+    &--horizontal {
+      border-top: thin solid var(--smui-primaryColor);
+      border-bottom: thin solid var(--smui-primaryColor);
+      cursor: row-resize;
+
+      &::before {
+        top: 50%;
+        right: 0;
+        left: 0;
+        height: @tabGroupsSeparatorHitArea;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:hover,
+    &--dragging {
+      background: var(--smui-primaryColor);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+  }
+
+  // The zone a dragged tab would land in, one per group and only while a drag runs. The
+  // element itself stays transparent and keeps its pointer events (it has to receive
+  // `dragover`, and it rides above the panels so an iframe in one cannot swallow it); the
+  // area the tab would take is painted by the pseudo-element: all of the body for `center`,
+  // the half beside that edge for an edge.
+  &__drop-target {
+    position: relative;
+    z-index: 2;
+
+    &::before {
+      content: "";
+      position: absolute;
+      background: color-mix(in srgb, var(--smui-primaryColor) percentage(@tabGroupsDropTintOpacity), transparent);
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+
+    &--center::before {
+      inset: 0;
+    }
+    &--top::before {
+      top: 0;
+      right: 0;
+      left: 0;
+      height: 50%;
+    }
+    &--right::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 50%;
+    }
+    &--bottom::before {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 50%;
+    }
+    &--left::before {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 50%;
+    }
+  }
+
+  // Nothing open: the slot takes the whole area, whatever the grid tracks are.
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-area: 1 / 1 / -1 / -1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  // The root's last Tab stop, through which the focus leaves the area (the Tab order follows the
+  // reading order, not the DOM's): never drawn, and never focused for longer than a key press.
+  // The panel's end marker: never drawn, focused only for a moment, as the point the browser's
+  // Shift+Tab enters the panel from.
+  &__panel-end {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    outline: none;
+  }
+
+  &__focus-guard {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    outline: none;
+  }
+
+  // The announcement region: never drawn, always in the accessibility tree.
+  &__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/less/components/table/table.less

@@ -64,6 +64,18 @@
           font-weight: 500;
         }
       }
+      // The column's controls (TableHeadCell actions) sit after the sort
+      // control, not in it: inside, their names and values would join its
+      // accessible name.
+      .smwb-head-cell__actions {
+        align-items: center;
+        display: inline-flex;
+        vertical-align: middle;
+        gap: @tableActionsGap;
+        margin-inline-start: @tableActionsGap;
+        // A sortable cell shows a pointer; the controls are not the sort control.
+        cursor: auto;
+      }
       &.smwb-align_left {
         text-align: left;
       }