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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.7",
   "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/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",