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

package/package.json

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

package/src/segmented-control/segmented-control.css

@@ -59,6 +59,8 @@
     --_inset: var(--slotted-segmented-control-inset, var(--slotted-space-1, 0.125rem));
     /** What is left for a segment once the track has taken its edge and ring. */
     --_inner: calc(var(--_height) - (var(--_inset) + var(--_border-width)) * 2);
+    /** The space between two segments: the ring's own step. */
+    --_spacing: var(--slotted-segmented-control-gap, var(--_inset));
     /** The thumb's corner, kept concentric with the track's own. */
     --_thumb-radius: max(calc(var(--_radius) - var(--_inset)), var(--slotted-radius-xs, 2px));
     /**
@@ -69,15 +71,22 @@
      */
     --_travel: var(--slotted-duration-medium);
 
-    /* A control in a row of controls: the fill, edge and lift a field has. */
-    background: var(--slotted-segmented-control-background, var(--slotted-control-surface, Field));
-    border: var(--_border-width) solid
-      var(
-        --slotted-segmented-control-border-color,
-        var(--slotted-control-border-color, ButtonBorder)
-      );
+    /**
+     * A neutral track: the page's own ink at a low alpha rather than an opaque
+     * fill, so it darkens whatever it stands on — a surface, a sunken panel, a
+     * card header — by the same step, and reads as a recess in each. The edge
+     * keeps its width and is transparent by default, so the arithmetic below is
+     * the same with a theme's edge and without one. An accent track with an
+     * accent thumb edge was the first appearance: a coloured outline on a row
+     * of neutral controls read as an alert before it read as a choice.
+     */
+    background: var(
+      --slotted-segmented-control-background,
+      color-mix(in oklab, var(--slotted-text, CanvasText) 6%, transparent)
+    );
+    border: var(--_border-width) solid var(--slotted-segmented-control-border-color, transparent);
     border-radius: var(--_radius);
-    box-shadow: var(--slotted-segmented-control-shadow, var(--slotted-control-shadow, none));
+    box-shadow: var(--slotted-segmented-control-shadow, none);
     box-sizing: border-box;
     display: inline-grid;
     font-family: var(--slotted-control-font-family, system-ui, sans-serif);
@@ -87,8 +96,15 @@
      * sized grid resolves every track to the largest content contribution, so
      * the rule Carbon states — base the width on the longest label, and give
      * every segment that width — falls out of the layout.
+     *
+     * The column carries the segment's floor, and the segment none of its own:
+     * a segment with a minimum inside a column that could shrink below it ran
+     * past its column in a narrow container, while the thumb, a column wide,
+     * did not — the thumb and its segment no longer matched, and the label
+     * overflowed the track.
      */
-    grid-auto-columns: minmax(0, 1fr);
+    gap: var(--_spacing);
+    grid-auto-columns: minmax(max(var(--_inner), var(--slotted-target-min, 24px)), 1fr);
     grid-auto-flow: column;
     isolation: isolate;
     min-inline-size: 0;
@@ -172,7 +188,10 @@
     color: var(--slotted-segmented-control-color, var(--slotted-text, ButtonText));
     cursor: pointer;
     display: flex;
-    font-weight: var(--slotted-control-font-weight, 600);
+    font-weight: var(
+      --slotted-segmented-control-font-weight,
+      var(--slotted-font-weight-medium, 500)
+    );
     gap: var(--_gap);
     justify-content: center;
     letter-spacing: var(--slotted-control-letter-spacing, 0);
@@ -180,18 +199,34 @@
     /**
      * The thumb is shorter than the control it lives in, so at the smallest
      * step and the tightest density it is eighteen pixels tall. The WCAG
-     * minimum is the floor across the segment, and the radio below reaches the
-     * track's own edge to meet it in the other axis.
+     * minimum is the column's floor across the segment, and the radio below
+     * reaches the track's own edge to meet it in the other axis.
      */
-    min-inline-size: max(var(--_inner), var(--slotted-target-min, 24px));
+    min-inline-size: 0;
     padding-inline: var(--_padding-inline);
+    /**
+     * Positioned without a `z-index`: the segment paints after the thumb, which
+     * comes first in the DOM, so its words lie over the thumb, and its divider
+     * and its hover ground — pseudo-elements at `z-index: -1` — lie under it.
+     * A segment at `z-index: 1` lifted both over the thumb as well, and a thumb
+     * crossing a hovered segment or a divider lost part of its edge for the
+     * length of the slide.
+     */
     position: relative;
-    transition:
-      background-color var(--slotted-control-transition-duration)
-        var(--slotted-control-transition-easing),
-      color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
-    /* Above the thumb, which is painted behind every segment. */
-    z-index: 1;
+    transition: color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+  }
+
+  /** The hover and press ground, under the thumb; see the segment above. */
+  [data-ui='segmented-control'] [data-part='item']::after {
+    background: transparent;
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    transition: background-color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+    z-index: -1;
   }
 
   /* An empty label is no label: a binding that always renders the span must
@@ -205,27 +240,36 @@
   }
 
   /**
-   * ── The rule between two segments ─────────────────────────────────────
+   * ── Between two segments ──────────────────────────────────────────────
+   *
+   * Segments stand apart by the same step as the ring of track around them,
+   * so each one — its hover ground, the thumb on it — is a shape of its own
+   * on the track, and a rule in the middle of that room says the control is
+   * divided: a track of words with nothing between them reads as a sentence.
    *
-   * A track of words with nothing between them reads as a sentence. The rule
-   * is what says the control is divided, and it is what Mantine ships on by
-   * default, Apple draws, and Carbon draws. It is shorter than the segment, so
-   * it reads as a divider rather than as a second frame, and it gives way
-   * around the thumb — a grey line touching the accent edge is the "border
-   * inside a border" this family had to correct elsewhere.
+   * The rule is centred in the gap rather than on a segment's edge, half the
+   * segment's height, rounded at its ends, in a light tint of the ink rather
+   * than an opaque border colour. It gives way wherever it would touch a
+   * shape: beside the thumb, and beside the segment under the pointer, whose
+   * ground would otherwise meet it. It lies under the thumb, so a thumb that
+   * crosses it while sliding passes over it.
    */
   [data-ui='segmented-control'] [data-part='item'] + [data-part='item']::before {
     /* No system colour behind it: an unthemed decoration disappears rather
        than shouting, which is what `fallbacks.test.mjs` holds a pseudo-element
-       to. The rule is a decoration — what divides the segments in forced
-       colours is the thumb's own border. */
-    background: var(--slotted-segmented-control-divider-color, var(--slotted-border-subtle));
+       to. In forced colours the thumb's own edge is what divides. */
+    background: var(
+      --slotted-segmented-control-divider-color,
+      color-mix(in oklab, var(--slotted-text) 14%, transparent)
+    );
+    border-radius: var(--slotted-radius-full, 9999px);
     content: '';
     inline-size: var(--_border-width);
-    inset-block: 22%;
-    inset-inline-start: 0;
+    inset-block: 25%;
+    inset-inline-start: calc((var(--_spacing) + var(--_border-width)) / -2);
     position: absolute;
     transition: opacity var(--_travel) var(--slotted-easing-standard);
+    z-index: -1;
   }
 
   [data-ui='segmented-control'][data-part='root'][data-orientation='vertical']
@@ -233,13 +277,17 @@
     + [data-part='item']::before {
     block-size: var(--_border-width);
     inline-size: auto;
-    inset-block: auto;
-    inset-block-start: 0;
-    inset-inline: 22%;
+    inset-block: calc((var(--_spacing) + var(--_border-width)) / -2) auto;
+    inset-inline: 25%;
   }
 
   [data-ui='segmented-control'] [data-part='item'][data-checked]::before,
-  [data-ui='segmented-control'] [data-part='item'][data-checked] + [data-part='item']::before {
+  [data-ui='segmented-control'] [data-part='item'][data-checked] + [data-part='item']::before,
+  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
+    [data-part='item']:hover:has([data-part='control']:enabled)::before,
+  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
+    [data-part='item']:hover:has([data-part='control']:enabled)
+    + [data-part='item']::before {
     opacity: 0;
   }
 
@@ -257,7 +305,9 @@
     border-radius: inherit;
     cursor: inherit;
     inset-block: calc(-1 * (var(--_inset) + var(--_border-width)));
-    inset-inline: 0;
+    /* Half the space on each side, so the room between two segments is not a
+       place a press lands on nothing. */
+    inset-inline: calc(var(--_spacing) / -2);
     margin: 0;
     opacity: 0;
     padding: 0;
@@ -277,7 +327,12 @@
    * string stays whole in the DOM: truncation never removes content.
    */
   [data-ui='segmented-control'] [data-part='label'] {
-    overflow: hidden;
+    /* Clipped along the line only: `hidden` on a one-line box cut the
+       descenders and the accents above the cap height. A clipped box is not a
+       scroll container, so the flex minimum is given back by hand, or the words
+       would hold their full width and run into the next segment. */
+    min-inline-size: 0;
+    overflow-x: clip;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -307,20 +362,33 @@
    * never seen — which is what Mantine does.
    */
   [data-ui='segmented-control'] [data-part='indicator'] {
+    /* A raised surface with a hairline and the lightest elevation: the chosen
+       segment sits on the track rather than being painted into it. In a dark
+       scheme the raised surface is darker than the tinted track, and a thumb
+       darker than its track reads as a hole, so it takes a step of the ink. */
     background: var(
       --slotted-segmented-control-indicator-background,
-      var(--slotted-tone-accent-subtle-active, Highlight)
+      light-dark(
+        var(--slotted-surface-raised, Canvas),
+        color-mix(
+          in oklab,
+          var(--slotted-text, CanvasText) 14%,
+          var(--slotted-surface-raised, Canvas)
+        )
+      )
     );
     block-size: calc(100% - var(--_inset) * 2);
     border: var(--_border-width) solid
       var(
         --slotted-segmented-control-indicator-border-color,
-        var(--slotted-tone-accent-border, Highlight)
+        color-mix(in oklab, var(--slotted-text, CanvasText) 10%, transparent)
       );
     border-radius: var(--_thumb-radius);
-    box-shadow: var(--slotted-control-shadow, none);
+    box-shadow: var(--slotted-segmented-control-indicator-shadow, var(--slotted-shadow-xs, none));
     box-sizing: border-box;
-    inline-size: calc((100% - var(--_inset) * 2) / var(--_count));
+    inline-size: calc(
+      (100% - var(--_inset) * 2 - var(--_spacing) * (var(--_count) - 1)) / var(--_count)
+    );
     inset-block-start: var(--_inset);
     inset-inline-start: var(--_inset);
     pointer-events: none;
@@ -328,7 +396,7 @@
     transition:
       opacity var(--slotted-control-transition-duration) var(--slotted-easing-standard),
       translate var(--_travel) var(--slotted-easing-standard);
-    translate: calc(var(--_index) * 100%);
+    translate: calc(var(--_index) * (100% + var(--_spacing)));
     z-index: 0;
 
     @starting-style {
@@ -337,14 +405,16 @@
   }
 
   [data-ui='segmented-control'] [data-part='indicator']:dir(rtl) {
-    translate: calc(var(--_index) * -100%);
+    translate: calc(var(--_index) * (-100% - var(--_spacing)));
   }
 
   [data-ui='segmented-control'][data-part='root'][data-orientation='vertical']
     [data-part='indicator'] {
-    block-size: calc((100% - var(--_inset) * 2) / var(--_count));
+    block-size: calc(
+      (100% - var(--_inset) * 2 - var(--_spacing) * (var(--_count) - 1)) / var(--_count)
+    );
     inline-size: calc(100% - var(--_inset) * 2);
-    translate: 0 calc(var(--_index) * 100%);
+    translate: 0 calc(var(--_index) * (100% + var(--_spacing)));
   }
 
   /**
@@ -356,10 +426,7 @@
    * beside it.
    */
   [data-ui='segmented-control'] [data-part='item'][data-checked] {
-    color: var(
-      --slotted-segmented-control-checked-color,
-      var(--slotted-tone-accent-text, HighlightText)
-    );
+    color: var(--slotted-segmented-control-checked-color, var(--slotted-text, CanvasText));
   }
 
   /* ── Hover and press, held back for every stronger state ──────────────── */
@@ -376,10 +443,10 @@
   [data-ui='segmented-control'][data-part='root']:not([data-readonly])
     [data-part='item']:hover:not([data-disabled]):not([data-checked]):has(
       [data-part='control']:enabled
-    ) {
+    )::after {
     background: var(
       --slotted-segmented-control-hover-background,
-      var(--slotted-tone-secondary-subtle-hover, ButtonFace)
+      color-mix(in oklab, var(--slotted-text) 5%, transparent)
     );
   }
 
@@ -391,10 +458,10 @@
   [data-ui='segmented-control'][data-part='root']:not([data-readonly])
     [data-part='item']:active:not([data-disabled]):not([data-checked]):has(
       [data-part='control']:enabled
-    ) {
+    )::after {
     background: var(
       --slotted-segmented-control-active-background,
-      var(--slotted-tone-secondary-subtle-active, ButtonFace)
+      color-mix(in oklab, var(--slotted-text) 9%, transparent)
     );
     transition-duration: var(--slotted-duration-instant);
   }
@@ -544,7 +611,9 @@
   [data-ui='segmented-control'][data-part='root'][data-variant='underline'] [data-part='indicator'],
   [data-ui='segmented-control'][data-part='root'][data-variant='underline']
     [data-part='item']
-    + [data-part='item']::before {
+    + [data-part='item']::before,
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item']::after {
     display: none;
   }
 
@@ -636,6 +705,16 @@
    * ring belongs to a segment and leaves it alone.
    */
   @media (forced-colors: active) {
+    /* The neutral track is a tint, and a tint flattens to Canvas: the edge
+       says where the control is, and the thumb's edge says which is chosen. */
+    [data-ui='segmented-control'][data-part='root']:not([data-variant='underline']) {
+      border-color: ButtonBorder;
+    }
+
+    [data-ui='segmented-control'] [data-part='indicator'] {
+      border-color: Highlight;
+    }
+
     [data-ui='segmented-control'][data-part='root'][data-invalid] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));

package/src/segmented-control/segmented-control.tokens.json

@@ -1,13 +1,10 @@
 [
-  "--slotted-border-subtle",
   "--slotted-border-width-thick",
-  "--slotted-control-border-color",
   "--slotted-control-border-width",
   "--slotted-control-font-family",
   "--slotted-control-font-size-lg",
   "--slotted-control-font-size-md",
   "--slotted-control-font-size-sm",
-  "--slotted-control-font-weight",
   "--slotted-control-gap-lg",
   "--slotted-control-gap-md",
   "--slotted-control-gap-sm",
@@ -24,8 +21,6 @@
   "--slotted-control-padding-inline-md",
   "--slotted-control-padding-inline-sm",
   "--slotted-control-radius",
-  "--slotted-control-shadow",
-  "--slotted-control-surface",
   "--slotted-control-transition-duration",
   "--slotted-control-transition-easing",
   "--slotted-disabled-background",
@@ -39,6 +34,7 @@
   "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
   "--slotted-font-weight-medium",
+  "--slotted-radius-full",
   "--slotted-radius-xs",
   "--slotted-segmented-control-active-background",
   "--slotted-segmented-control-background",
@@ -49,9 +45,12 @@
   "--slotted-segmented-control-disabled-color",
   "--slotted-segmented-control-disabled-indicator-background",
   "--slotted-segmented-control-divider-color",
+  "--slotted-segmented-control-font-weight",
+  "--slotted-segmented-control-gap",
   "--slotted-segmented-control-hover-background",
   "--slotted-segmented-control-indicator-background",
   "--slotted-segmented-control-indicator-border-color",
+  "--slotted-segmented-control-indicator-shadow",
   "--slotted-segmented-control-inset",
   "--slotted-segmented-control-invalid-border-color",
   "--slotted-segmented-control-invalid-edge-width",
@@ -61,15 +60,12 @@
   "--slotted-segmented-control-underline-checked-color",
   "--slotted-segmented-control-underline-color",
   "--slotted-segmented-control-underline-gap",
+  "--slotted-shadow-xs",
   "--slotted-space-1",
   "--slotted-space-6",
+  "--slotted-surface-raised",
   "--slotted-target-min",
   "--slotted-text",
   "--slotted-text-muted",
-  "--slotted-tone-accent-border",
-  "--slotted-tone-accent-subtle-active",
-  "--slotted-tone-accent-text",
-  "--slotted-tone-danger-border",
-  "--slotted-tone-secondary-subtle-active",
-  "--slotted-tone-secondary-subtle-hover"
+  "--slotted-tone-danger-border"
 ]