@slotted/styles 0.1.0-beta.3 → 0.1.0-beta.5

package/package.json

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

package/src/chart/chart.css

@@ -1258,8 +1258,14 @@
     direction: rtl;
   }
 
-  /* The region scrolls, so it takes focus to be scrolled by keyboard. */
-  [data-ui='chart'] [data-part='table-region']:focus-visible {
+  /* The region scrolls, so it takes focus to be scrolled by keyboard. The ring
+     is drawn for a focus from the keyboard: a click on a cell focuses the region
+     too, and the next Shift would make it match `:focus-visible`
+     (`createFocusOrigin`). The browser's own ring is suppressed for the same focus. */
+  [data-ui='chart'] [data-part='table-region']:focus {
+    outline: none;
+  }
+  [data-ui='chart'] [data-part='table-region']:focus-visible[data-focus-origin='keyboard'] {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
   }

package/src/page-header/page-header.css

@@ -234,6 +234,43 @@
     z-index: 2;
   }
 
+  /**
+   * The title area paints the ground only where something passes under it:
+   * the header area, which it covers while it collapses. Without one, the
+   * root's ground is the one layer under the title, so a ground with alpha is
+   * composited once — painted on both, 0.5 read as 0.75. With a header area
+   * the title keeps its own ground, because a title that let the area show
+   * through would print the area's words under its own.
+   */
+  [data-ui='page-header']:not(:has(> * > [data-part='header-area']))
+    > *
+    > [data-part='title-area'] {
+    background-color: transparent;
+  }
+
+  /**
+   * Stuck, the chrome stands over the content, and a theme may blur what passes
+   * under it: `--slotted-page-header-backdrop-filter`, `none` unless set. It
+   * composes with a ground that has alpha, which is what lets the content show
+   * at all. The filter is the stuck state's alone, so a `plain` header,
+   * transparent at rest, filters nothing at rest.
+   */
+  [data-ui='page-header'][data-stuck] {
+    -webkit-backdrop-filter: var(--slotted-page-header-backdrop-filter, none);
+    backdrop-filter: var(--slotted-page-header-backdrop-filter, none);
+  }
+
+  /**
+   * A reader who asked for less transparency gets none of the effect, and under
+   * forced colours the ground is the system's and the blur has nothing to add.
+   */
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-ui='page-header'][data-stuck] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
   /**
    * The pill straddles the chrome's edge, so whatever ends at that edge
    * keeps half a pill clear of it: the title area, because stuck the edge

package/src/page-header/page-header.tokens.json

@@ -31,6 +31,7 @@
   "--slotted-line-height-md",
   "--slotted-line-height-sm",
   "--slotted-line-height-xl",
+  "--slotted-page-header-backdrop-filter",
   "--slotted-page-header-background",
   "--slotted-page-header-border",
   "--slotted-page-header-control-size",

package/src/scroll-area/scroll-area.css

@@ -410,8 +410,18 @@
    *
    * `:has()` rather than `:focus-within`, because a link inside the content is
    * focus *within* the area and is not the area being focused.
+   *
+   * The ring is drawn for a focus from the keyboard: a click on the content
+   * focuses the viewport too, and the next Shift would make it match
+   * `:focus-visible` (`createFocusOrigin`). The browser's own ring on the
+   * viewport is suppressed: the frame draws the one ring.
    */
-  [data-ui='scroll-area']:has(> [data-part='viewport']:focus-visible) {
+  [data-ui='scroll-area'] > [data-part='viewport']:focus {
+    outline: none;
+  }
+  [data-ui='scroll-area']:has(
+    > [data-part='viewport']:focus-visible[data-focus-origin='keyboard']
+  ) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }