@smwb/ui-styles 1.5.1 → 2.0.0

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

@@ -50,6 +50,13 @@
     }
   }
 
+  // normalize.css removes the outline, and the state layer above is no ring: a tab
+  // reached by the arrow keys shows one of its own.
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+
   &__content {
     position: relative;
     display: flex;
@@ -113,6 +120,86 @@
   cursor: default;
 }
 
+// A tab with a close button or actions (Tab `closable`, `actions`) sits in an item with them:
+// a control inside role="tab" would join the tab's name, so the controls are the tab's siblings.
+// They stay in the tab list, which ARIA 1.2 lets own only tabs (see the README). The item is the
+// row's flex child in the tab's place, and draws the hover layer over the whole of it, controls
+// included.
+.smwb-tab-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+
+  &:before {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    content: "";
+    pointer-events: none;
+    transition: opacity 15ms linear;
+    background-color: @tabBgColor;
+  }
+
+  &:hover:not(&--disabled):before {
+    opacity: @tabOpacityHover;
+  }
+
+  // The item's layer replaces the tab's own hover layer (focus keeps the tab's).
+  > .smwb-tab:hover:before {
+    opacity: 0;
+  }
+  > .smwb-tab:focus:before {
+    opacity: @tabOpacityFocus;
+  }
+
+  // The controls take the room the tab's trailing padding was.
+  > .smwb-tab:not(:last-child) {
+    padding-right: @smui-space-sm;
+  }
+}
+
+.smwb-tab__close,
+.smwb-tab__actions {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  margin-right: @tabControlsGap;
+}
+
+.smwb-tab__actions {
+  display: inline-flex;
+  align-items: center;
+}
+
+.smwb-tab__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: @tabCloseSize;
+  height: @tabCloseSize;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--smui-onSurfaceVariant);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background-color: var(--smui-onSurfaceHover);
+  }
+  // normalize.css removes the outline: the close button is out of the Tab order but takes focus from a press or a screen reader.
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+  &:disabled {
+    opacity: 0.38;
+    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 {
@@ -121,3 +208,44 @@
   letter-spacing: normal;
   text-transform: none;
 }
+
+// The close button shows when it is reachable: the item is hovered (item not disabled),
+// the item is the active tab, or focus is inside the item. The disabled button stays
+// hidden; the reveal restores what the hidden defaults below took away. Hidden means
+// opacity/pointer-events only — never `visibility`, so the button stays in the
+// accessibility tree (its accessible name is computed, a screen reader reaches it) — and
+// never size, so the row does not jump. Scoped under .smwb-tabs so the rules only ever
+// match inside a tabs row (dense included); a standalone closable Tab outside a row
+// renders its close button visible and clickable.
+.smwb-tabs {
+  .smwb-tab__close {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s linear;
+  }
+
+  .smwb-tab-item:hover:not(.smwb-tab-item--disabled) .smwb-tab__close:not(:disabled),
+  .smwb-tab-item--active .smwb-tab__close:not(:disabled),
+  .smwb-tab-item:focus-within .smwb-tab__close:not(:disabled) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  // Drag-to-reorder states (Tabs `onReorder`): the dragged item dims, the drop target
+  // is marked with a 2px indicator line on its leading edge. The line rides above the
+  // item's hover layer and never takes pointer events.
+  .smwb-tab-item--dragging {
+    opacity: 0.6;
+  }
+
+  .smwb-tab-item--drop-target:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: @tabsDragIndicatorSize;
+    background-color: var(--smui-primaryColor);
+    pointer-events: none;
+  }
+}

package/less/components/tabs/tabPanel/tabPanel.entry.less

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

package/less/components/tabs/tabPanel/tabPanel.less

@@ -0,0 +1,8 @@
+// A tab panel is a tab stop of its own (Tab moves from the tab list into it), and
+// normalize.css removes the focus outline, so it draws its own ring.
+.smwb-tab-panel {
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+}

package/less/components/tabs/tabs.less

@@ -71,6 +71,32 @@
     }
   }
 
+  // The overflow-menu trigger (Tabs `overflowMenu`) renders beside the scroller in the
+  // scroll buttons' spot: the same box, its own width token.
+  &__overflow-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);
+    }
+    &: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

@@ -31,7 +31,9 @@
     left: 0;
     top: 0;
     transform: translate(16px, 16px);
-    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transition:
+      color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
       max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
     user-select: none;
 
@@ -72,8 +74,14 @@
     box-sizing: content-box;
     width: 100%;
 
+    // The control height comes from min-height (see the size rules below), so the
+    // vertical padding is 0 and the text is centred in the border box.
     &:not(&--inline) {
       padding: @textFieldFilledInputPadding;
+      padding-top: 0;
+      padding-bottom: 0;
+      box-sizing: border-box;
+      min-height: var(--smui-control-h-md, @smui-control-h-md);
     }
 
     &::placeholder {
@@ -361,19 +369,36 @@
   }
 }
 
-// 8 + 23 + 9 = 40px, the md control height: the extra pixel at the bottom is the
-// same as the medium size's 16/17.
+// The height of an outlined field is its @smui-control-h-* token (md is the base
+// rule above): the input is border-box with no vertical padding, so min-height is
+// the whole box. The resting label is centred by the same token: its 23px line box
+// sits (height - 23) / 2 from the top, i.e. 4.5 / 8.5 / 12.5px for 32 / 40 / 48.
+.smwb-text-field:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
+  transform: translate(16px, calc((var(--smui-control-h-md, @smui-control-h-md) - 23px) / 2));
+}
 .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 + 1px);
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: var(--smui-control-h-sm, @smui-control-h-sm);
   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);
+  transform: translate(16px, calc((var(--smui-control-h-sm, @smui-control-h-sm) - 23px) / 2));
 }
 .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;
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: var(--smui-control-h-lg, @smui-control-h-lg);
   font-size: @smui-control-font-lg;
 }
+.smwb-text-field_size-large:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
+  transform: translate(16px, calc((var(--smui-control-h-lg, @smui-control-h-lg) - 23px) / 2));
+}
+// A filled field keeps its own height: the shrunk label needs the 23px of top
+// padding, so there min-height is not a floor and the box is the padding sum.
+.smwb-text-field--filled .smwb-text-field__input:not(.smwb-text-field__input--inline) {
+  box-sizing: content-box;
+  min-height: 0;
+  padding-top: 23px;
+  padding-bottom: 10px;
+}

package/less/components/thumbCard/thumbCard.less

@@ -1,10 +1,12 @@
+// The root is a box around the content (the image and the caption: the card's
+// button when it is selectable) and the corner slots, laid over the image
+// beside that button, not inside it.
 .smwb-thumb-card {
   position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 8px;
   overflow: visible;
-  outline: none;
 
   &--interactive {
     cursor: pointer;
@@ -15,6 +17,13 @@
     pointer-events: none;
   }
 
+  // Takes focus; the ring is drawn on the image instead.
+  &__content {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+  }
+
   &__media {
     position: relative;
     width: 100%;
@@ -29,11 +38,12 @@
     outline-offset: 1px;
   }
 
-  &--interactive:focus-visible &__media {
+  &__content:focus-visible &__media {
     outline: 2px solid var(--smui-primaryColor);
     outline-offset: 1px;
   }
 
+  // Positioned against the root, whose top-left corner is the image's.
   &__slot {
     position: absolute;
     top: 4px;

package/less/components/toggle/toggle.less

@@ -17,6 +17,30 @@
       align-items: center;
     }
   }
+
+  // The size prop maps the row onto the control-height scale. :has() is what
+  // reaches it: the size class rides .smwb-toggle, the switch itself, while the row
+  // is its ancestor __wrapper — and putting min-height on the switch would stretch
+  // the 50x30 box, whose track fills its parent by height: 100%. So the switch
+  // keeps its geometry at every size (no @smui-selection-* edge applies to it: a
+  // track and a 15/20px thumb are not a selection box), and the 40px thumb halo
+  // (::before) stays unscaled with it — it already surrounds the largest switch.
+  // justify-content centers the switch inside the taller row in the default
+  // column layout; with a label above (top/unset placement) the wrapper is
+  // already 61px at every size, so the row min-height is inert there and
+  // nothing moves. In the row layouts (label left/right) it is a no-op.
+  &__wrapper:has(.smwb-toggle_size-small) {
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
+    justify-content: center;
+  }
+  &__wrapper:has(.smwb-toggle_size-medium) {
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
+    justify-content: center;
+  }
+  &__wrapper:has(.smwb-toggle_size-large) {
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
+    justify-content: center;
+  }
   &.smwb-disabled {
     opacity: 0.35;
     pointer-events: none;
@@ -46,7 +70,10 @@
     transform: translateY(-50%);
     top: 50%;
     transition: all 0.2s ease-in-out;
-    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    box-shadow:
+      0 3px 1px -2px rgb(0 0 0 / 20%),
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 1px 5px 0 rgb(0 0 0 / 12%);
     &::before {
       width: 40px;
       height: 40px;
@@ -70,7 +97,20 @@
   }
 
   &__checkbox {
-    display: none;
+    // Visually hidden but rendered: with display: none the input would be out of
+    // the tab order and the accessibility tree. It fills the switch, under the
+    // track and thumb, which take the pointer and pass clicks on through the label.
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    &:focus-visible ~ .smwb-toggle__track {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
     &:checked {
       & ~ .smwb-toggle__track {
         background-color: var(--smui-toggleTrackActiveColor);

package/less/components/treeView/treeView.less

@@ -46,20 +46,58 @@
       }
     }
 
-    &__content {
+    // Chevron, checkbox, the row's button and the actions are siblings: the button holds only the
+    // label, so a control beside it never sits inside a role="button".
+    &__row {
       display: flex;
       align-items: center;
       gap: @treeViewItemGap;
       // min-height, not height: a fixed row height let a wrapped two-line label
       // overflow the node and overlap the next one.
       min-height: 40px;
+    }
+
+    &__toggle {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      // Leaves keep the empty box so labels line up across levels.
+      width: 24px;
       cursor: pointer;
       user-select: none;
+
+      &:empty {
+        cursor: default;
+      }
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
+      align-self: stretch;
+      cursor: pointer;
+      user-select: none;
+      border-radius: 4px;
+
+      &:focus-visible {
+        outline: 2px solid var(--smui-primaryColor);
+        outline-offset: -2px;
+      }
+    }
+
+    &__actions {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: 4px;
     }
   }
 }
 
-.smwb-tree__node_selected > .smwb-tree__node__content {
+.smwb-tree__node_selected > .smwb-tree__node__row {
   background-color: var(--smui-onSurfaceHover);
   border-radius: 4px;
 }

package/less/components/typography/typography.less

@@ -7,10 +7,23 @@
     @s: ~"smui-font-@{v}-size";
     @w: ~"smui-font-@{v}-weight";
     @l: ~"smui-font-@{v}-lh";
+    @t: ~"smui-font-@{v}-transform";
+    @ls: ~"smui-font-@{v}-letter-spacing";
     &_@{v} {
       font-size: @@s;
       font-weight: @@w;
       line-height: @@l;
+      // `auto` (the default) declares nothing, so consumer rules on the element keep winning.
+      // A set value is emitted behind a runtime token: override --smui-font-<variant>-transform
+      // / -letter-spacing in CSS, or leave the compiled value.
+      & when not (@@t = auto) {
+        @tv: @@t;
+        text-transform: ~"var(--@{t}, @{tv})";
+      }
+      & when not (@@ls = auto) {
+        @lsv: @@ls;
+        letter-spacing: ~"var(--@{ls}, @{lsv})";
+      }
     }
   }
   .smui-type(h1);
@@ -27,12 +40,6 @@
   .smui-type(overline);
   .smui-type(button);
 
-  &_overline,
-  &_button {
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
   &_color-primary {
     color: var(--smui-primaryColor);
   }

package/less/components.less

@@ -13,6 +13,9 @@
 @import "./components/saveAssetDialog/saveAssetDialog.less";
 @import "./components/progressIndicator/progressIndicator.less";
 @import "./components/meter/meter.less";
+@import "./components/diffStat/diffStat.less";
+@import "./components/statusDot/statusDot.less";
+@import "./components/qrCode/qrCode.less";
 @import "./components/radioButton/radioButton.less";
 @import "./components/sidebar/sidebar.less";
 @import "./components/bottomBar/bottomBar.less";
@@ -23,6 +26,7 @@
 @import "./components/overflowMenu/overflowMenu.less";
 @import "./components/tabs/tabs.less";
 @import "./components/tabs/tab/tab.less";
+@import "./components/tabs/tabPanel/tabPanel.less";
 @import "./components/slider/slider.less";
 @import "./components/valueSlider/valueSlider.less";
 @import "./components/selectField/selectField.less";
@@ -36,6 +40,8 @@
 @import "./components/assetGrid/assetGrid.less";
 @import "./components/grid/grid.less";
 @import "./components/tooltip/tooltip.less";
+@import "./components/kbd/kbd.less";
+@import "./components/commandPalette/commandPalette.less";
 @import "./components/sheet/sheet.less";
 @import "./components/floatingWindow/floatingWindow.less";
 @import "./components/badge/badge.less";
@@ -50,6 +56,7 @@
 @import "./components/table/tablePagination/tablePagination.less";
 @import "./components/icon/icon.less";
 @import "./components/screenDivider/screenDivider.less";
+@import "./components/tabGroups/tabGroups.less";
 @import "./components/datePicker/dataPicker.less";
 @import "./components/timePicker/timePicker.less";
 @import "./components/treeView/treeView.less";
@@ -64,6 +71,9 @@
 @import "./components/rating/rating.less";
 @import "./components/skeleton/skeleton.less";
 @import "./components/chart/chart.less";
+@import "./components/dagView/dagView.less";
+@import "./components/swimlanes/swimlanes.less";
+@import "./components/composer/composer.less";
 @import "./components/stepper/stepper.less";
 @import "./components/typography/typography.less";
 @import "./components/stack/stack.less";

package/less/connects/rt/table.less

@@ -15,11 +15,18 @@
   opacity: 1;
 }
 
+// The resizer is one of the head cell's actions. It sits on the cell's edge, out
+// of the flow, so alone it takes no room there: no gap after the sort control.
+.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;
   }