@slotted/styles 0.1.0-beta.6 → 0.1.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.8",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/app-shell/app-shell.css

@@ -82,6 +82,16 @@
     /** The box a row's mark occupies: a control's own size, so the two agree. */
     --_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));
     --_row-gap: var(--slotted-control-gap-md, 8px);
+    /**
+     * How far a focus ring drawn outside a control reaches past its box: the
+     * ring's width and its offset, 4px with the default theme. The three parts
+     * of the navigation column pad their inline sides by it, because the body
+     * scrolls and clips at its padding box, and a full-width control's ring
+     * stood outside that box on both sides.
+     */
+    --_row-ring-inset: calc(
+      var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px)
+    );
 
     /**
      * A row's type. A list of destinations is text and not a control, so it
@@ -495,7 +505,19 @@
     gap: var(--_row-gap);
     min-block-size: var(--_rail-size);
     min-inline-size: 0;
+    /**
+     * The gutter the body reserves, reserved here too. `scrollbar-gutter`
+     * applies to a scroll container only, and `hidden` is the overflow that
+     * makes one without a bar of its own: with classic scrollbars the body's
+     * content box ended one bar width (10px in Chrome) before the head's and
+     * the foot's. Nothing is clipped that was drawn before: the ring inset
+     * keeps a control's focus ring inside the padding box. The bar's width is
+     * the body's, or the gutter is the platform's full bar (15px in Chrome).
+     */
+    overflow: hidden;
     padding-block: var(--_row-inset);
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
   }
   /**
    * The inset is the rows', not the region's: on the parts, a seam drawn by
@@ -505,7 +527,13 @@
   [data-ui='app-shell']
     > [data-part='nav']
     > :is([data-part='nav-header'], [data-part='nav-body'], [data-part='nav-footer']) {
-    padding-inline: var(--_nav-inset);
+    /**
+     * Published where it pads, beside the row geometry the root publishes:
+     * `side-navigation` reads it to keep its rows' box on the edge it had,
+     * and a row it reaches outside these parts reads nothing.
+     */
+    --slotted-app-shell-row-ring-inset: var(--_row-ring-inset);
+    padding-inline: calc(var(--_nav-inset) + var(--_row-ring-inset));
   }
   /**
    * The body scrolls the way `scroll-area` scrolls, and for the reasons written
@@ -1221,6 +1249,19 @@
     border-start-end-radius: 0;
     margin-inline-end: 0;
   }
+
+  /**
+   * The seam re-read in each region's scope. `--_seam` declared on the root
+   * holds the root's `--slotted-app-shell-border-color`, so the property written
+   * on a region recoloured nothing. Declared again on every region, the chain
+   * resolves where the region stands: a colour written there recolours the
+   * seams the region and its parts draw, and `transparent` removes them. The
+   * tone rules below state the same two declarations at a higher specificity.
+   */
+  [data-ui='app-shell'] > [data-part] {
+    --_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));
+    --_seam: var(--_rule-width) solid var(--_rule);
+  }
   /* ── Separation by tone ──────────────────────────────────────────────── */
 
   /**
@@ -1238,7 +1279,8 @@
    * where it is declared, and a region carrying a scheme of its own must mix
    * its own ink.
    */
-  [data-ui='app-shell'][data-separation='tone'] {
+  [data-ui='app-shell'][data-separation='tone'],
+  [data-ui='app-shell'][data-separation='tone'] > [data-part] {
     --_seam: none;
     --_seam-width: 0px;
   }
@@ -1365,7 +1407,7 @@
   [data-ui='app-shell']
     > [data-part='nav']:has(> [data-part='nav-rail'])
     > :is([data-part='nav-header'], [data-part='nav-body'], [data-part='nav-footer']) {
-    padding-inline-start: var(--_row-inset);
+    padding-inline-start: calc(var(--_row-inset) + var(--_row-ring-inset));
     transition: visibility var(--_duration) step-start;
   }
   [data-ui='app-shell'][data-nav-mode='inline'][data-open]
@@ -1400,7 +1442,8 @@
    * a forced-colours rule of its own for.
    */
   @media (forced-colors: active) {
-    [data-ui='app-shell'][data-separation='tone'] {
+    [data-ui='app-shell'][data-separation='tone'],
+    [data-ui='app-shell'][data-separation='tone'] > [data-part] {
       --_seam: var(--_rule-width) solid CanvasText;
       --_seam-width: var(--_rule-width);
     }
@@ -1501,8 +1544,12 @@
    * mode at any width. The container query further down is the fallback for
    * the frame before the binding has measured, and nothing else.
    */
+  /* The rail holds the parts' ring inset on each side as well, so a control
+     at the mark's size keeps its focus ring inside the body beside the gutter. */
   [data-ui='app-shell'][data-nav-mode='inline'] > [data-part='nav'] {
-    inline-size: calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges));
+    inline-size: calc(
+      var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges)
+    );
   }
   [data-ui='app-shell'][data-nav-mode='inline'][data-open] > [data-part='nav'] {
     inline-size: var(--_nav-size);
@@ -1779,7 +1826,9 @@
    */
   @container slotted-app-shell (inline-size >= 600px) {
     [data-ui='app-shell']:not([data-nav-mode]) > [data-part='nav'] {
-      inline-size: calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges));
+      inline-size: calc(
+        var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges)
+      );
     }
     [data-ui='app-shell']:not([data-nav-mode])[data-open] > [data-part='nav'] {
       inline-size: var(--_nav-size);

package/src/button/button.css

@@ -625,14 +625,29 @@
     position: relative;
   }
 
-  [data-ui='button'] [data-part='start'] > *:not([data-part='indicator']),
-  [data-ui='button'] [data-part='end'] > *:not([data-part='indicator']),
+  [data-ui='button'] [data-part='start'] > *:not([data-part='indicator'], [data-ui='kbd']),
+  [data-ui='button'] [data-part='end'] > *:not([data-part='indicator'], [data-ui='kbd']),
   [data-ui='button'] [data-part='icon'] > *:not([data-part='indicator']) {
     block-size: 100%;
     display: block;
     inline-size: 100%;
   }
 
+  /**
+   * A key in a slot is sized by its own family. The slot above is a glyph's
+   * box: it stated `display: block` on the key, which put the legend on a line
+   * box's baseline instead of the key's centre, sixteen pixels square, and the
+   * icon's font size, which `size="inherit"` read as the text's. Measured, a
+   * `Kbd` legend stood 1.5px above the label's centre and a `Shortcut` 1.5px
+   * below it. Here the slot takes the key's measure and the label's type, and
+   * the flex container centres the key on the label.
+   */
+  [data-ui='button'] :is([data-part='start'], [data-part='end']):has(> [data-ui='kbd']) {
+    block-size: auto;
+    font-size: inherit;
+    inline-size: auto;
+  }
+
   /**
    * The label carries a wrapping line height of its own: the control's line
    * height is 1, which centres a single line inside the box and crushes the

package/src/dialog/dialog.css

@@ -932,6 +932,8 @@
       block-size: 100%;
       border-radius: 0;
       border: 0;
+      box-sizing: border-box;
+      padding-block-end: var(--slotted-keyboard-inset, 0px);
     }
   }
 
@@ -961,6 +963,16 @@
      * layer, which on a phone is a stray line under the browser chrome.
      */
     border: 0;
+    /**
+     * The virtual keyboard. `observeKeyboardInset` in `@slotted/core/measure`
+     * measures what the keyboard covers, the binding writes it on the open
+     * layer, and the panel's rows end above the keys: a full-screen panel is
+     * the layout viewport's height, and the keyboard shrinks only the visual
+     * one. Nought under `interactive-widget=resizes-content`, whose layout
+     * already shrank.
+     */
+    box-sizing: border-box;
+    padding-block-end: var(--slotted-keyboard-inset, 0px);
   }
 
   /* ── Forced colours ───────────────────────────────────────────────────── */

package/src/kbd/kbd.css

@@ -237,6 +237,10 @@
     align-items: center;
     direction: ltr;
     display: inline-flex;
+    /* The root is a `kbd`: without these it keeps the user agent's monospace
+       face and its line box, which a key in the combination does not share. */
+    font-family: var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));
+    line-height: 1;
     /**
      * A shortcut wider than its column wraps between caps and never inside
      * one. The row gets taller; no instruction gets shorter.

package/src/menu/menu.css

@@ -290,6 +290,28 @@
     visibility: hidden;
   }
 
+  /**
+   * The surface as wide as its trigger: an account switcher at the foot of a
+   * sidebar, opened from a row the column's full width. The content takes the
+   * anchor's width as its size and its floor, as `popover`'s `width="anchor"`
+   * does, and the room the positioner reports caps both. The layer drops the
+   * family's floor and cap, which would hold it narrower or wider than the
+   * row. Opened above or below, the layer has no inline padding, so the
+   * content and the trigger share both edges.
+   */
+  [data-ui='menu'][data-width='anchor'] {
+    max-inline-size: var(--slotted-positioner-available-width, 100vw);
+    min-inline-size: 0;
+  }
+  [data-ui='menu'][data-width='anchor'] > [data-part='content'] {
+    inline-size: var(--slotted-positioner-anchor-width, auto);
+    max-inline-size: var(--slotted-positioner-available-width, 100vw);
+    min-inline-size: min(
+      var(--slotted-positioner-anchor-width, 0px),
+      var(--slotted-positioner-available-width, 100vw)
+    );
+  }
+
   [data-ui='menu'][data-size='sm'] {
     --_item-padding: var(--slotted-control-padding-inline-sm, 0.625rem);
     --_item-height: var(--slotted-control-height-sm, 30px);

package/src/side-navigation/side-navigation.css

@@ -48,6 +48,13 @@
      * there is to give.
      */
     --_standoff: min(var(--slotted-space-2, 0.25rem), var(--_inset));
+    /**
+     * The inline padding `app-shell`'s navigation parts add for an outward
+     * focus ring, read so a row's box keeps the edge it had there: the row
+     * reaches back into that padding, and its own ring is drawn inside. Nought
+     * outside those parts.
+     */
+    --_ring-inset: var(--slotted-app-shell-row-ring-inset, 0px);
     --_gap: var(--slotted-app-shell-row-gap, var(--slotted-control-gap-md, 8px));
     --_font-size: var(--slotted-app-shell-row-font-size, var(--slotted-font-size-sm, 0.8125rem));
     --_line-height: var(--slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45));
@@ -354,11 +361,11 @@
     grid-template-columns: auto minmax(0, 1fr) auto auto;
     grid-template-rows: auto auto;
     margin-block: 0;
-    margin-inline: var(--_standoff);
+    margin-inline: calc(var(--_standoff) - var(--_ring-inset));
     min-block-size: var(--_row-height);
     min-inline-size: 0;
     padding-block: 0;
-    padding-inline: calc(var(--_inset) - var(--_standoff));
+    padding-inline: calc(var(--_inset) - var(--_standoff) + var(--_ring-inset));
     position: relative;
     text-align: start;
     text-decoration: none;

package/src/side-navigation/side-navigation.tokens.json

@@ -5,6 +5,7 @@
   "--slotted-app-shell-row-inset",
   "--slotted-app-shell-row-line-height",
   "--slotted-app-shell-row-mark",
+  "--slotted-app-shell-row-ring-inset",
   "--slotted-border-subtle",
   "--slotted-border-width-thin",
   "--slotted-control-font-family",

package/src/tabs/tabs.css

@@ -469,7 +469,11 @@
    * end padding, so the end inset is nought there. Below the width of a short
    * label it keeps a minimum length, centred on the content. It stands
    * `--slotted-tabs-marker-offset` above the list's edge, over the track, and the axes are physical in this one rule
-   * because the measurement is: the translate is from the list's left edge.
+   * because the measurement is: the position is from the list's left edge.
+   * Position and length are both layout properties, so one thread advances
+   * both edges in the same frame: a composited `translate` beside a
+   * main-thread `inline-size` drifted apart while the panel rendered, and the
+   * bar grew and shrank on its way between tabs of unequal widths.
    */
   [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'] {
     --_start-inset: var(--_marker-inset);
@@ -483,13 +487,11 @@
     border-radius: var(--_marker-radius);
     inline-size: var(--_length);
     inset-block-end: calc(var(--_marker-lift, 0px) + var(--_marker-offset));
-    left: 0;
+    left: calc(
+      var(--_indicator-start, 0px) + var(--_left-inset) + (var(--_span) - var(--_length)) / 2
+    );
     pointer-events: none;
     position: absolute;
-    translate: calc(
-        var(--_indicator-start, 0px) + var(--_left-inset) + (var(--_span) - var(--_length)) / 2
-      )
-      0;
   }
 
   [data-ui='tabs']:dir(rtl) > :where([data-part='list']) > [data-part='marker'] {
@@ -520,7 +522,8 @@
     --_marker-easing: var(--slotted-tabs-marker-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
     transition:
-      translate var(--slotted-duration-medium) var(--_marker-easing),
+      left var(--slotted-duration-medium) var(--_marker-easing),
+      top var(--slotted-duration-medium) var(--_marker-easing),
       inline-size var(--slotted-duration-medium) var(--_marker-easing),
       block-size var(--slotted-duration-medium) var(--_marker-easing);
   }
@@ -590,10 +593,11 @@
     > [data-part='marker'] {
     block-size: var(--_length);
     inline-size: var(--_marker-size);
-    inset-block: 0 auto;
+    inset-block: calc(
+        var(--_indicator-start, 0px) + var(--_start-inset) + (var(--_span) - var(--_length)) / 2
+      )
+      auto;
     inset-inline: auto calc(var(--_marker-lift, 0px) + var(--_marker-offset));
-    translate: 0
-      calc(var(--_indicator-start, 0px) + var(--_start-inset) + (var(--_span) - var(--_length)) / 2);
   }
 
   [data-ui='tabs'][data-orientation='vertical']