@smwb/ui-styles 2.1.0 → 2.3.0

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

@@ -211,6 +211,52 @@
   font-weight: 500;
   letter-spacing: normal;
   text-transform: none;
+
+  // On a coarse pointer the row is never shorter than the sm step (44px there).
+  @media (pointer: coarse) {
+    min-height: max(var(--smui-tabDenseHeight, @tabDenseHeight), var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+  }
+}
+
+// Content-width tabs (Tabs `fit`): a tab is as wide as what it holds — marker, label, close button —
+// and the row no longer shares itself out between its tabs, so what is left of the row stays empty.
+// The width stays between two tokens: a short label does not shrink the tab to a sliver, a long one
+// is cut with an ellipsis at the maximum (the full text is the tab's `title`). The limits belong to
+// the row's flex child: the item when the tab has a close button or actions, the tab otherwise. In
+// an item the tab gives way to its controls, which keep their size, and fills the minimum.
+.smwb-tabs--fit {
+  // How far a cut label's box reaches past its line box, so that overflow: hidden, which text-overflow
+  // needs, does not clip the descenders and accents that line-height: 1 leaves outside it.
+  @tabFitLabelOverhang: 0.25em;
+
+  .smwb-tab,
+  .smwb-tab-item {
+    flex: 0 0 auto;
+    min-width: var(--smui-tabFitMinWidth, @tabFitMinWidth);
+    max-width: var(--smui-tabFitMaxWidth, @tabFitMaxWidth);
+  }
+
+  .smwb-tab-item > .smwb-tab {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .smwb-tab__content {
+    min-width: 0;
+  }
+
+  .smwb-tab__icon {
+    flex: 0 0 auto;
+  }
+
+  .smwb-tab__text-label {
+    min-width: 0;
+    padding-block: @tabFitLabelOverhang;
+    margin-block: -@tabFitLabelOverhang;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 // The close button shows when it is reachable: the item is hovered (item not disabled),

package/less/components/tabs/tabs.less

@@ -69,6 +69,11 @@
       opacity: 0.38;
       cursor: default;
     }
+
+    // On a coarse pointer the button is at least as wide as the sm step (44px there).
+    @media (pointer: coarse) {
+      width: max(@tabsScrollButtonWidth, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
   }
 
   // The overflow-menu trigger (Tabs `overflowMenu`) renders beside the scroller in the
@@ -95,6 +100,11 @@
       opacity: 0.38;
       cursor: default;
     }
+
+    // On a coarse pointer the button is at least as wide as the sm step (44px there).
+    @media (pointer: coarse) {
+      width: max(@tabsOverflowTriggerWidth, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
   }
 
   &__indicator {

package/less/components/toggle/toggle.less

@@ -41,6 +41,30 @@
     min-height: var(--smui-control-h-lg, @smui-control-h-lg);
     justify-content: center;
   }
+  // The compact look, for a status row or a toolbar: the label shares the line with
+  // the switch (placement "top", the default, counts as "left"; "right" keeps its
+  // order) and the row is the small control height, capped at the compact maximum, in
+  // place of the size rule's. The :has() rules above weigh the same, so this one
+  // follows them. The switch gives up height to fit the row; its width and thumb
+  // stay, and the thumb centres itself on the track. Nothing here clips: the focus
+  // ring and the thumb halo draw outside the row.
+  @compact-height: min(var(--smui-control-h-sm, @smui-control-h-sm), @toggleCompactMaxHeight);
+  &__wrapper_compact:has(.smwb-toggle) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: @compact-height;
+    height: @compact-height;
+    .smwb-toggle {
+      height: min(@toggleTrackHeight, 100%);
+    }
+    .smwb-toggle__label {
+      white-space: nowrap;
+    }
+  }
+  &__wrapper_compact.smwb-toggle__wrapper_label-right:has(.smwb-toggle) {
+    flex-direction: row-reverse;
+  }
   &.smwb-disabled {
     opacity: 0.35;
     pointer-events: none;

package/less/components/treeView/treeView.less

@@ -1,31 +1,54 @@
 .smwb-tree {
-  &__wrapper {
-    .smwb-tree__node {
-      &:first-child {
-        border-left: 0;
-        &::before {
-          opacity: 0;
-        }
-      }
+  // The row height, the node's left padding and the corner's horizontal arm are custom properties of the tree,
+  // so the guide corner (drawn by each node's ::before) follows the row: it is half the row height deep, which
+  // puts its arm at the middle of a row of any height. The dense look swaps in the small control height and a
+  // tighter indent; a caller can set any of the three on the tree itself (the `style` prop).
+  --smwb-tree-row-h: var(--smui-control-h-md, @smui-control-h-md);
+  --smwb-tree-indent: @treeViewIndent;
+  --smwb-tree-arm: @treeViewGuideArm;
+
+  &_dense {
+    --smwb-tree-row-h: var(--smui-control-h-sm, @smui-control-h-sm);
+    --smwb-tree-indent: @treeViewIndentDense;
+    --smwb-tree-arm: @treeViewGuideArmDense;
+  }
+
+  // A root node sits alone in its wrapper, so it is the wrapper's first child: that is the one to leave without
+  // a connector. Matched through the child combinator, the rule does not reach the first child of a nested level.
+  &__wrapper > .smwb-tree__node:first-child {
+    border-left: 0;
+    &::before {
+      opacity: 0;
     }
   }
+
+  // Without guides a nested node swaps its 1px line for the same width of padding, so the levels keep their step.
+  &_no-guides &__node &__node {
+    border-left-width: 0;
+    padding-left: calc(var(--smwb-tree-indent) + @treeViewGuideWidth);
+
+    &::before {
+      display: none;
+    }
+  }
+
   &__node {
     &:last-child {
       border-left-color: transparent;
     }
-    padding-left: @treeViewIndent;
-    margin-left: 9px;
+    padding-left: var(--smwb-tree-indent);
+    margin-left: @treeViewNodeMargin;
     position: relative;
-    border-left: 1px solid var(--smui-primaryColor);
+    border-left: @treeViewGuideWidth solid var(--smui-primaryColor);
 
     &::before {
       position: absolute;
       top: 0;
-      left: -1px;
-      height: 20px;
-      width: 25px;
-      border-bottom: 1px solid var(--smui-primaryColor);
-      border-left: 1px solid var(--smui-primaryColor);
+      left: -@treeViewGuideWidth;
+      height: calc(var(--smwb-tree-row-h) / 2);
+      width: var(--smwb-tree-arm);
+      border-bottom: @treeViewGuideWidth solid var(--smui-primaryColor);
+      border-left: @treeViewGuideWidth solid var(--smui-primaryColor);
       content: "";
       font-weight: 600;
       font-size: 14px;
@@ -54,7 +77,7 @@
       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;
+      min-height: var(--smwb-tree-row-h);
     }
 
     &__toggle {

package/less/default/globals/default.variables.less

@@ -97,6 +97,14 @@
 @avatarGroupMaxStacked: 12; // children laid each over the next; any past these overlap the other way
 
 @breadcrumbsGap: @smui-space-sm;
+// Single-line trail: the leading crumbs give way first (this many times as fast as the last one), down to
+// a floor, so the last crumb is cut only once they are.
+@breadcrumbsLeadingShrink: 100;
+@breadcrumbsLeadingMinWidth: 3em;
+// The last crumb never gets narrower than this, so a very narrow box still shows the start of the page title.
+@breadcrumbsLastMinWidth: 4em;
+// How far a clipped crumb still paints outside its box: a 2px focus ring at a 2px offset.
+@breadcrumbsClipMargin: @smui-space-xs;
 
 @dividerSpacing: @smui-space-sm;
 @dividerTextGap: @smui-space-md;
@@ -120,6 +128,8 @@
 @appBarPaddingX: @smui-space-lg;
 @appBarActionPadding: @smui-space-md;
 @appBarActionsGap: 10px; // off-grid
+// How far a clipped title still paints outside its box: a 2px focus ring at a 2px offset.
+@appBarClipMargin: @smui-space-xs;
 // Width reserved for the OS window buttons in `AppBar variant="window"`: the macOS traffic lights of Electron's
 // `hiddenInset` end around 70-78px, so with @appBarPaddingX the content starts at 80px; Windows/Linux draw three
 // 46px caption buttons. Not theme tokens — an app overrides both sides with --smui-appBarWindowControlsWidth.
@@ -177,9 +187,18 @@
 @progressDotMargin: @smui-space-xs;
 @meterHeight: 6px;
 @meterMinBarWidth: 3.5rem; // the bar keeps at least this much beside its text
+@meterCompactHeight: 4px; // off-grid
+@meterCompactBarWidth: 64px; // the compact meter's bar is this wide, not flexible
 @statusDotSizeSm: 8px; // @smui-space-2
 @statusDotSizeMd: 12px; // @smui-space-3
 @statusDotRing: 2px; // the unknown status is a ring this thick
+// A square turned 45deg spans side * sqrt(2), so the diamond's side is the dot's size
+// divided by this: the two shapes then share one bounding box, and a margin makes up
+// the layout box, which a transform leaves at the unturned side.
+@statusDotDiamondRatio: sqrt(2);
+@statusDotDiamondPrecision: 4; // decimals kept in the diamond's side and margin
+@statusDotDiamondRotation: 45deg; // corner-up, the diamond of the onreel thread marker
+@statusDotDiamondRadius: @smui-radius-none; // sharp corners; the dot's are a circle
 
 // A QR code is always dark modules on a white square — never theme tokens, so no
 // theme (or forced-colours mode, see the component's print/forced-color-adjust) can
@@ -261,6 +280,8 @@
 @tabLabelPaddingLeft: @smui-space-sm;
 @tabDensePaddingX: @smui-space-md;
 @tabDenseHeight: 36px; // off-grid; the row height of Tabs dense, the height of the compact onreel strips
+@tabFitMinWidth: (@smui-space-10 * 2); // Tabs `fit`: a short label does not shrink the tab below this
+@tabFitMaxWidth: (@smui-space-16 * 4); // Tabs `fit`: a longer label is cut with an ellipsis at this width
 @tabCloseSize: @smui-space-6; // the close button of a closable tab
 @tabControlsGap: @smui-space-xs; // between a tab's close button, its actions and the row's next tab
 @tabsFadeWidth: 2.5rem; // scrollable row: the fading edge beyond which tabs are hidden
@@ -273,6 +294,8 @@
 @tabGroupsSeparatorHitArea: 8px; // off-grid; the invisible grip around that track
 @tabGroupsDropTintOpacity: 0.16; // how much primary the zone a dragged tab would land in shows
 @tabGroupsActiveLineWidth: 2px; // off-grid; the line over the header of the group in use
+@tabGroupsStripActionsGap: @smui-space-xs; // between the controls the app puts at the end of a group's tab row
+@tabGroupsStripActionsPaddingX: @smui-space-xs; // that content's distance from the tabs and from the group's actions button
 
 @tableCellPaddingX: @smui-space-lg;
 @tableToolbarMarginBottom: 10px; // off-grid
@@ -295,11 +318,20 @@
 @textFieldAdornmentFilledMarginTop: @smui-space-md;
 
 @toggleGap: @smui-space-sm;
+// The compact Toggle's row is the small control height, but never taller than this.
+@toggleCompactMaxHeight: 28px;
 
 @tooltipPaddingX: @smui-space-sm;
 
 @treeViewIndent: 30px; // off-grid
 @treeViewItemGap: 10px; // off-grid
+@treeViewGuideWidth: 1px;
+@treeViewNodeMargin: 9px; // off-grid
+@treeViewGuideArm: 25px; // off-grid
+// The dense look. A node's indent is its padding; with @treeViewNodeMargin (9px) and @treeViewGuideWidth (1px) the step from a row to its
+// children's is 16px (6 + 9 + 1), the arm ends at the child's row, and the row height is @smui-control-h-sm.
+@treeViewIndentDense: 6px; // off-grid
+@treeViewGuideArmDense: 6px; // off-grid
 
 /*-------------------
      Text Field
@@ -367,6 +399,9 @@
     Button
 --------------------*/
 @buttonBorderRadius: 24px;
+// The most an icon-only button rounds its corners: the smaller of this and @buttonBorderRadius.
+// A pill radius would make the square a circle; set @smui-radius-pill here to get one.
+@buttonIconOnlyMaxBorderRadius: @smui-radius-md;
 @smallButtonFontSize: 13px;
 @mediumButtonFontSize: 14px;
 @largeButtonFontSize: 15px;
@@ -529,6 +564,7 @@
 // are the theme's runtime tokens, so the dark theme follows on its own.
 @dagViewNodeBg: ~"var(--smui-surfaceBackground)";
 @dagViewNodeBorder: ~"var(--smui-outlineColor)";
+@dagViewNodeBorderStyle: solid;
 @dagViewEdgeColor: ~"var(--smui-outlineColor)";
 @dagViewEdgeActiveColor: ~"var(--smui-primaryColor)";
 @dagViewSelectedRing: ~"var(--smui-primaryColor)";
@@ -540,6 +576,13 @@
 @dagViewStatusWarning: ~"var(--smui-warningColor)";
 @dagViewStatusError: ~"var(--smui-errorColor)";
 @dagViewStatusSkipped: ~"var(--smui-disabledTextColor)";
+// The line style of a status's node frame; `false`: the theme-wide @dagViewNodeBorderStyle.
+@dagViewStatusPendingBorderStyle: false;
+@dagViewStatusRunningBorderStyle: false;
+@dagViewStatusSuccessBorderStyle: false;
+@dagViewStatusWarningBorderStyle: false;
+@dagViewStatusErrorBorderStyle: false;
+@dagViewStatusSkippedBorderStyle: false;
 // How far the nodes and edges away from the selection fade, with dimUnrelated.
 @dagViewDimOpacity: 0.35;
 // The graph's height when the app sets none (its `height` prop or `style`).

package/less/foundation/sizing.less

@@ -43,6 +43,23 @@
 //      Button, so they inherit the tokens
 //
 //  Override one step from theme.config, e.g.  @smui-control-h-md: 44px;
+//
+//  Touch density: on a coarse pointer (finger, stylus) the three steps are
+//  replaced by @smui-control-h-*-coarse, so every control above is at least
+//  @smui-touch-target (44px) tall. variables.less remaps the runtime tokens in
+//  an `@media (pointer: coarse)` block, which is why most components need no
+//  rule of their own; only what sits off the scale has one (small clickable
+//  or link Chip, Tabs dense and its scroll buttons, TabGroups dense actions button,
+//  Menu dense items, List dense rows). A mouse keeps the sizes above.
+//  Still exempt on touch: the --filled and --inline fields, the compact Toggle
+//  (capped at @toggleCompactMaxHeight) and a small Chip that is neither a button
+//  nor a link.
+//  The -coarse steps never drop below the matching fine step, so a theme that
+//  raises a step is not shrunk on touch. Override one from theme.config
+//  (@smui-control-h-md-coarse: 48px;) or at runtime (--smui-control-h-md-coarse).
+//  A runtime override of --smui-control-h-* on :root, loaded after the library,
+//  also applies on a coarse pointer (the token layer always loses to it); set
+//  the -coarse token too, or scope the override to @media (pointer: fine).
 //=====================================================================
 
 // Control height (form fields, buttons, chips)
@@ -50,6 +67,14 @@
 @smui-control-h-md: 40px;
 @smui-control-h-lg: 48px;
 
+// Smallest touch target (Material and WCAG 2.5.5 call for 44-48px)
+@smui-touch-target: 44px;
+
+// Control height on a coarse pointer (finger, stylus): the fine step, raised to the touch target
+@smui-control-h-sm-coarse: max(@smui-touch-target, @smui-control-h-sm);
+@smui-control-h-md-coarse: max(@smui-touch-target, @smui-control-h-md);
+@smui-control-h-lg-coarse: max(@smui-touch-target, @smui-control-h-lg);
+
 // Horizontal padding inside controls
 @smui-control-px-sm: @smui-space-md; // 12
 @smui-control-px-md: @smui-space-lg; // 16

package/less/tokens.entry.less

@@ -14,6 +14,13 @@
   .smui-tokens-light();
 }
 
+// A coarse pointer swaps the control heights for the -coarse steps (foundation/sizing.less).
+@media (pointer: coarse) {
+  :where(:root) {
+    .smui-tokens-coarse();
+  }
+}
+
 :where(:root[data-theme="dark"]) {
   .smui-tokens-dark();
 }

package/less/variables.less

@@ -93,6 +93,8 @@
   --smui-tabIconColor: @tabIconColor;
   --smui-tabColorDefault: @tabColorDefault;
   --smui-tabDenseHeight: @tabDenseHeight;
+  --smui-tabFitMinWidth: @tabFitMinWidth;
+  --smui-tabFitMaxWidth: @tabFitMaxWidth;
 
   --smui-sliderColor: @sliderColor;
   --smui-sliderDisabledColor: @sliderDisabledColor;
@@ -151,6 +153,10 @@
   --smui-control-h-sm: @smui-control-h-sm;
   --smui-control-h-md: @smui-control-h-md;
   --smui-control-h-lg: @smui-control-h-lg;
+  // Their values on a coarse pointer (see .smui-tokens-coarse below)
+  --smui-control-h-sm-coarse: @smui-control-h-sm-coarse;
+  --smui-control-h-md-coarse: @smui-control-h-md-coarse;
+  --smui-control-h-lg-coarse: @smui-control-h-lg-coarse;
 
   /* Border-radius scale */
   --smui-radius-xs: @smui-radius-xs;
@@ -277,10 +283,24 @@
   --smui-messageBackground: @messageBgDark;
 }
 
+// Touch density: on a coarse pointer the control heights are the -coarse steps. Not part of
+// the light/dark mixins for the same reason the heights are light-only: mode-independent.
+.smui-tokens-coarse() {
+  --smui-control-h-sm: var(--smui-control-h-sm-coarse, @smui-control-h-sm-coarse);
+  --smui-control-h-md: var(--smui-control-h-md-coarse, @smui-control-h-md-coarse);
+  --smui-control-h-lg: var(--smui-control-h-lg-coarse, @smui-control-h-lg-coarse);
+}
+
 :root {
   .smui-tokens-light();
 }
 
+@media (pointer: coarse) {
+  :root {
+    .smui-tokens-coarse();
+  }
+}
+
 :root[data-theme="dark"] {
   .smui-tokens-dark();
 }

package/normalize.css

@@ -25,12 +25,11 @@ main {
 }
 
 /**
-   * Correct the font size and margin on `h1` elements within `section` and
-   * `article` contexts in Chrome, Firefox, and Safari.
+   * Correct the margin on `h1` elements. The font size is set with the other
+   * heading sizes at the end of this file, behind `:where()`.
    */
 
 h1 {
-  font-size: 2em;
   margin: 0.67em 0;
 }
 
@@ -74,7 +73,7 @@ a {
    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    */
 
-abbr[title] {
+:where(abbr[title]) {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
@@ -186,10 +185,7 @@ select {
    * Correct the inability to style clickable types in iOS and Safari.
    */
 
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+:where(button, [type="button"], [type="reset"], [type="submit"]) {
   -webkit-appearance: button;
 }
 
@@ -197,25 +193,11 @@ button,
    * Remove the inner border and padding in Firefox.
    */
 
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+:where(button, [type="button"], [type="reset"], [type="submit"])::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-/**
-   * Restore the focus styles unset by the previous rule.
-   */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
    * Correct the padding in Firefox.
    */
@@ -261,8 +243,7 @@ textarea {
    * 2. Remove the padding in IE 10.
    */
 
-[type="checkbox"],
-[type="radio"] {
+:where([type="checkbox"], [type="radio"]) {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -271,8 +252,8 @@ textarea {
    * Correct the cursor style of increment and decrement buttons in Chrome.
    */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+:where([type="number"])::-webkit-inner-spin-button,
+:where([type="number"])::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -281,7 +262,7 @@ textarea {
    * 2. Correct the outline style in Safari.
    */
 
-[type="search"] {
+:where([type="search"]) {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -290,7 +271,7 @@ textarea {
    * Remove the inner padding in Chrome and Safari on macOS.
    */
 
-[type="search"]::-webkit-search-decoration {
+:where([type="search"])::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -353,13 +334,20 @@ template {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-:focus,
-:active {
+:where(:focus, :active) {
   outline: none;
 }
-a:focus,
-a:active {
-  outline: none;
+/**
+ * Restore the focus styles unset by the rule above. Declared after it: both have zero
+ * specificity, so the later one wins, and a component's own :focus-visible ring beats both.
+ */
+:where(
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring
+) {
+  outline: 1px dotted ButtonText;
 }
 nav,
 footer,
@@ -392,11 +380,7 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-a,
-a:visited {
-  text-decoration: none;
-}
-a:hover {
+a {
   text-decoration: none;
 }
 ul li {
@@ -406,72 +390,78 @@ img {
   vertical-align: top;
 }
 
-/* heading elements */
-h1 {
+/*
+ * heading elements
+ *
+ * All behind :where(), so these have zero specificity and any component class (the
+ * font size and weight of Typography, say) wins, in or out of article, aside, nav and
+ * section. Among themselves they cascade in source order, as before.
+ *
+ * The section rules keep `:-webkit-any()`, which Firefox does not know: :where() takes a
+ * forgiving list, so there the branch matches nothing and a bare h1 stays 2em, as it
+ * always did. Do not turn it into :is(), that would resize Firefox's headings.
+ */
+:where(h1, h2, h3, h4, h5, h6) {
   display: block;
-  font-size: 2em;
   font-weight: bold;
 }
 
-:-webkit-any(article, aside, nav, section) h1 {
+:where(h1) {
+  font-size: 2em;
+}
+
+:where(:-webkit-any(article, aside, nav, section) h1) {
   font-size: 1.5em;
 }
 
-:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
+:where(:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1) {
   font-size: 1.17em;
 }
 
-:-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
+:where(
   :-webkit-any(article, aside, nav, section)
-  h1 {
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    h1
+) {
   font-size: 1em;
 }
 
-:-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
+:where(
   :-webkit-any(article, aside, nav, section)
-  h1 {
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    h1
+) {
   font-size: 0.83em;
 }
 
-:-webkit-any(article, aside, nav, section)
+:where(
   :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  h1 {
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    h1
+) {
   font-size: 0.67em;
 }
 
-h2 {
-  display: block;
+:where(h2) {
   font-size: 1.5em;
-  font-weight: bold;
 }
 
-h3 {
-  display: block;
+:where(h3) {
   font-size: 1.17em;
-  font-weight: bold;
-}
-
-h4 {
-  display: block;
-  font-weight: bold;
 }
 
-h5 {
-  display: block;
+:where(h5) {
   font-size: 0.83em;
-  font-weight: bold;
 }
 
-h6 {
-  display: block;
+:where(h6) {
   font-size: 0.67em;
-  font-weight: bold;
 }
 
 body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-control-heights.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs"
+    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-control-heights.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs && node scripts/check-normalize-specificity.mjs"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",
   "repository": {