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

package/src/table/table.css

@@ -189,8 +189,14 @@
   }
 
   /* The ring is drawn inside, because a scroller flush against the frame would
-     otherwise draw half its ring outside it. */
-  [data-ui='table'] [data-part='scroll']:focus-visible {
+     otherwise draw half its ring outside it. It is drawn for a focus from the
+     keyboard: a click on a cell focuses the scroller 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='table'] [data-part='scroll']:focus {
+    outline: none;
+  }
+  [data-ui='table'] [data-part='scroll']: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-offset, 2px) * -1);
   }

package/src/tabs/tabs.css

@@ -47,23 +47,35 @@
       min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, 0.25rem)), var(--_inner-size))
     );
     --_dismiss-overhang: calc((var(--_dismiss-size) - var(--_icon-size)) / 2);
-    --_marker-size: var(--slotted-border-width-thick, 2px);
+    /**
+     * The marker: one bar the list draws under the selected tab, and the hover
+     * bar under the tab the pointer is on, in the same geometry — the tab's
+     * content box, a pill just above the list's edge. It is never thinner than the
+     * thick border width, the floor the high-contrast scheme keeps for a mark
+     * that carries state, and its thickness, its rounding and its inset are
+     * tokens of their own: tied to the thick border width, a theme could not
+     * thicken the marker without thickening sixty other rules.
+     */
+    --_marker-size: max(
+      var(--slotted-tabs-marker-size, 3px),
+      var(--slotted-border-width-thick, 2px)
+    );
+    --_marker-radius: var(--slotted-tabs-marker-radius, var(--slotted-radius-full, 9999px));
+    --_marker-inset: var(--slotted-tabs-marker-inset, var(--_padding-inline));
+    /**
+     * The gap between the bars and the list's edge: the selected marker and the
+     * hover bar stand this far above the track, so the line reads as a line and
+     * the bar as a mark on it. An inset rather than a transform, because the
+     * marker's `translate` is its slide between tabs.
+     */
+    --_marker-offset: var(--slotted-tabs-marker-offset, 1px);
+    --_track-color: var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder));
     /**
      * The length of the fade a scrolling list takes at an edge that has more
      * behind it, read once here so the five mask gradients below state a
      * length and no public property of their own.
      */
     --_fade: var(--slotted-tabs-fade-size, var(--slotted-space-6, 1rem));
-    /**
-     * Which way the selection travelled, resolved into a transform origin. The
-     * marker of the tab being left collapses toward the direction of travel
-     * and the marker of the tab being entered grows from the side the reader
-     * came from, so the pair reads as one bar moving. Nothing is measured:
-     * every surveyed indicator reads the active tab's box, which is why Base UI
-     * ships `renderBeforeHydration` and Ark UI a `setIndicatorRect`.
-     */
-    --_marker-origin: 50%;
-    --_marker-origin-selected: 50%;
 
     /**
      * No column gap on the grid itself: three gaps stood around two empty
@@ -112,6 +124,9 @@
    * it the panel's first letter touched the track on the list's end edge.
    */
   [data-ui='tabs'][data-orientation='vertical'] {
+    /* The inset runs along the block axis, where a tab has no padding. */
+    --_marker-inset: var(--slotted-tabs-marker-inset, 0px);
+
     column-gap: var(--slotted-tabs-gap, var(--slotted-space-6, 1rem));
     grid-template-columns: auto minmax(0, 1fr);
     grid-template-rows: auto auto;
@@ -140,6 +155,8 @@
     overflow-x: auto;
     overflow-y: hidden;
     overscroll-behavior-inline: contain;
+    /* The containing block of the marker, which scrolls with the tabs. */
+    position: relative;
     /**
      * The platform's scrollbar is the affordance until the family draws its
      * own. It is hidden only once `data-overflowing` says the paging controls
@@ -153,9 +170,19 @@
     scrollbar-width: none;
   }
 
+  /**
+   * The track is an inset shadow on the list's own padding rather than its
+   * border. The list is a scroll container, which clips what it draws to its
+   * padding box, so a marker standing over a border was cut along it; inside
+   * the padding the marker lies over the line, flush with the list's edge. The
+   * shadow is the box's, so the line does not scroll with the tabs.
+   */
   [data-ui='tabs'][data-variant='line'][data-track='line'] > [data-part='list'] {
-    border-block-end: var(--_track-size) solid
-      var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder));
+    /* How far the hover bar reaches past an item to stand on the track. */
+    --_track-reach: var(--_track-size);
+
+    box-shadow: inset 0 calc(-1 * var(--_track-size)) 0 var(--_track-color);
+    padding-block-end: var(--_track-size);
   }
 
   /**
@@ -169,24 +196,10 @@
    * variant for the same case, which is a second family's worth of paint to
    * remove one line.
    *
-   * The marker then sits on the item's own edge rather than a track's width
-   * below it, so it lands on the line the page already drew. Where that line is
-   * is the page's business: the family stops at its own box.
+   * The marker then sits on the list's own edge, which is the items' edge, so
+   * it lands on the line the page already drew. Where that line is is the
+   * page's business: the family stops at its own box.
    */
-  [data-ui='tabs'][data-track='none'] > :where([data-part='list']) > [data-part='item']::before,
-  [data-ui='tabs'][data-track='none'] > :where([data-part='list']) > [data-part='item']::after {
-    inset-block-end: 0;
-  }
-
-  [data-ui='tabs'][data-track='none'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::before,
-  [data-ui='tabs'][data-track='none'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    inset-block-end: auto;
-    inset-inline-end: 0;
-  }
 
   /**
    * A column of labels reads down its own start edge. Centring them is what the
@@ -209,11 +222,17 @@
     overflow-y: auto;
   }
 
+  /* A shadow takes no logical offset, so the line's side is mirrored by hand. */
   [data-ui='tabs'][data-orientation='vertical'][data-variant='line'][data-track='line']
     > [data-part='list'] {
-    border-block-end: 0;
-    border-inline-end: var(--_track-size) solid
-      var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder));
+    box-shadow: inset calc(-1 * var(--_track-size)) 0 0 var(--_track-color);
+    padding-block-end: 0;
+    padding-inline-end: var(--_track-size);
+  }
+
+  [data-ui='tabs'][data-orientation='vertical'][data-variant='line'][data-track='line']:dir(rtl)
+    > [data-part='list'] {
+    box-shadow: inset var(--_track-size) 0 0 var(--_track-color);
   }
 
   /**
@@ -251,10 +270,9 @@
   /* ── One tab, and the box that holds it ───────────────────────────────── */
 
   /**
-   * The item is presentational, and it exists for two reasons a `button`
-   * cannot answer: a `button` may not contain a `button`, so a dismissible tab
-   * needs a box for its second control, and the marker has to span the pair
-   * rather than only the label.
+   * The item is presentational, and it exists because a `button` may not
+   * contain a `button`: a dismissible tab needs a box for its second control.
+   * It also carries the hover bar, under the tab and not the control.
    */
   [data-ui='tabs'] > :where([data-part='list']) > [data-part='item'] {
     align-items: stretch;
@@ -438,52 +456,111 @@
   /* ── The marker ───────────────────────────────────────────────────────── */
 
   /**
-   * Drawn on the item, on the edge the list runs along, and present on every
-   * item rather than only on the selected one: a mark that appears has nothing
-   * to transition from. It is scaled to nothing across the axis it marks, and
-   * the transform origin is what the direction of travel decides.
-   *
-   * It is pulled over the track by exactly the track's own width, so the two
-   * lines are one line rather than a hairline with a thicker line beside it.
+   * One bar, drawn by the list rather than by each item, that slides from the
+   * tab being left to the tab being entered: a mark per item can only appear
+   * or scale from an edge, and one mark moving is what says the selection
+   * moved. The binding creates it with `createIndicator` from
+   * `@slotted/core/measure`, which writes the selected tab's start and length
+   * in the list's scroll coordinates; everything else is decided here.
    *
-   * There are two of them in the same place. `::after` is the mark, in the
-   * accent, and the one that travels. `::before` is the hover, in a neutral
-   * a step darker than the track: the same bar, under the tab the pointer is
-   * on, saying where the mark would go. It fades rather than grows — a bar
-   * that slid in from one side on every pass of the pointer would be the
-   * travelling animation with nothing travelling — and it is never on the
-   * selected item, where the mark already is.
-   */
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::before,
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::after {
-    border-start-end-radius: var(--slotted-radius-xs, 2px);
-    border-start-start-radius: var(--slotted-radius-xs, 2px);
+   * It spans the tab's content box — the icon and the label — through
+   * `--slotted-tabs-marker-inset`, which defaults to the tab's own inline
+   * padding, and never the closing control: a tab followed by one gives up its
+   * 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.
+   */
+  [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'] {
+    --_start-inset: var(--_marker-inset);
+    --_end-inset: var(--_marker-inset);
+    --_left-inset: var(--_start-inset);
+    --_span: calc(var(--_indicator-length, 0px) - var(--_start-inset) - var(--_end-inset));
+    --_length: max(var(--slotted-space-6, 1rem), var(--_span));
+
+    background-color: var(--slotted-tabs-marker-color, var(--slotted-tone-accent-solid));
     block-size: var(--_marker-size);
-    content: '';
-    inset-block-end: calc(-1 * var(--_track-size));
-    inset-inline: 0;
-    opacity: 0;
+    border-radius: var(--_marker-radius);
+    inline-size: var(--_length);
+    inset-block-end: calc(var(--_marker-lift, 0px) + var(--_marker-offset));
+    left: 0;
     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'] {
+    --_left-inset: var(--_end-inset);
+  }
+
+  [data-ui='tabs']:not([data-orientation='vertical'])
+    > [data-part='list']:has(> [data-part='item'][data-selected] > [data-part='dismiss'])
+    > [data-part='marker'] {
+    --_end-inset: 0px;
+  }
+
+  [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][hidden] {
+    display: none;
+  }
+
+  /**
+   * It slides only when the selection moves: `data-moving` arrives with a
+   * position whose tab changed, and leaves with a re-measurement of the same
+   * tab, so the first position, a font arriving and a resized list place the
+   * bar without motion. The slide takes the medium duration on a curve that
+   * starts and ends slowly, `--slotted-tabs-marker-easing`: the control
+   * duration on the theme's decelerating curve covered a third of the
+   * distance in its first frame and read as a jump. Under reduced motion it
+   * jumps.
+   */
+  [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-moving] {
+    --_marker-easing: var(--slotted-tabs-marker-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
+    transition:
+      translate 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);
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-moving] {
+      transition: none;
+    }
+  }
+
+  /**
+   * The hover bar: the marker's geometry under the tab the pointer is on, in a
+   * neutral at a reduced opacity, saying where the mark would go. It is drawn
+   * on the item, and it fades rather than slides — a bar that travelled on
+   * every pass of the pointer would be the selection's motion with nothing
+   * selected. It reaches past the item by the track's width to lie on it, and
+   * stops at the tab where a closing control follows: that control is the
+   * tab's inline padding on either side of the glyph.
+   */
   [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::before {
-    /* No system colour as a last resort: unthemed, the bar disappears rather
-       than shouts, as the mark beside it already does. */
     background-color: var(--slotted-tabs-hover-marker-color, var(--slotted-border-strong));
+    block-size: var(--_marker-size);
+    border-radius: var(--_marker-radius);
+    content: '';
+    inset-block-end: calc(var(--_marker-offset) - var(--_track-reach, 0px));
+    inset-inline: var(--_marker-inset);
+    min-inline-size: var(--slotted-space-6, 1rem);
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
     transition:
       background-color var(--slotted-control-transition-duration)
         var(--slotted-control-transition-easing),
       opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::after {
-    background-color: var(--slotted-tabs-marker-color, var(--slotted-tone-accent-solid));
-    transform: scale(0, 1);
-    transform-origin: var(--_marker-origin) 50%;
-    transition:
-      opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),
-      transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+  [data-ui='tabs']:not([data-orientation='vertical'])
+    > :where([data-part='list'])
+    > [data-part='item']:has(> [data-part='dismiss'])::before {
+    inset-inline-end: calc(2 * var(--_padding-inline) + var(--_icon-size));
   }
 
   [data-ui='tabs'][data-variant='line']
@@ -491,7 +568,7 @@
     > [data-part='item']:not([data-selected]):has(
       > [data-part='tab']:not(:disabled):hover
     )::before {
-    opacity: 1;
+    opacity: var(--slotted-tabs-hover-marker-opacity, 0.5);
   }
 
   /** Press takes the bar to the label's own ink: the two say one thing. */
@@ -503,67 +580,31 @@
     background-color: var(--slotted-tabs-active-marker-color, var(--slotted-text));
   }
 
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item'][data-selected]::after {
-    opacity: 1;
-    transform: scale(1, 1);
-    transform-origin: var(--_marker-origin-selected) 50%;
-  }
-
   /**
-   * Forward is toward the end of the list. The tab being left collapses toward
-   * the end and the tab being entered grows from the start, which is one bar
-   * travelling. `transform-origin` takes no logical keyword, so the two
-   * percentages swap under `:dir(rtl)` — the one place in this stylesheet
-   * where a rule is mirrored by hand.
+   * A quarter turn: both bars stand on the list's inline-end edge and run along
+   * the block axis, where the inset defaults to nought because a tab has no
+   * block padding.
    */
-  [data-ui='tabs'][data-activation-direction='forward'] {
-    --_marker-origin: 100%;
-    --_marker-origin-selected: 0%;
-  }
-
-  [data-ui='tabs'][data-activation-direction='backward'] {
-    --_marker-origin: 0%;
-    --_marker-origin-selected: 100%;
-  }
-
-  [data-ui='tabs'][data-activation-direction='forward']:dir(rtl) {
-    --_marker-origin: 0%;
-    --_marker-origin-selected: 100%;
-  }
-
-  [data-ui='tabs'][data-activation-direction='backward']:dir(rtl) {
-    --_marker-origin: 100%;
-    --_marker-origin-selected: 0%;
-  }
-
-  /** A quarter turn: the bar stands on the list's own edge and grows in block. */
   [data-ui='tabs'][data-orientation='vertical']
     > :where([data-part='list'])
-    > [data-part='item']::before,
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    block-size: auto;
-    border-start-end-radius: var(--slotted-radius-xs, 2px);
-    border-start-start-radius: 0;
-    border-end-end-radius: var(--slotted-radius-xs, 2px);
+    > [data-part='marker'] {
+    block-size: var(--_length);
     inline-size: var(--_marker-size);
-    inset-block: 0;
-    inset-inline: auto calc(-1 * var(--_track-size));
-  }
-
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    transform: scale(1, 0);
-    transform-origin: 50% var(--_marker-origin);
+    inset-block: 0 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']
     > :where([data-part='list'])
-    > [data-part='item'][data-selected]::after {
-    transform: scale(1, 1);
-    transform-origin: 50% var(--_marker-origin-selected);
+    > [data-part='item']::before {
+    block-size: auto;
+    inline-size: var(--_marker-size);
+    inset-block: var(--_marker-inset);
+    inset-inline: auto calc(var(--_marker-offset) - var(--_track-reach, 0px));
+    min-block-size: var(--slotted-space-6, 1rem);
+    min-inline-size: 0;
   }
 
   /* ── Contained ────────────────────────────────────────────────────────── */
@@ -582,6 +623,9 @@
    * there the track is the edge of the panel below it.
    */
   [data-ui='tabs'][data-variant='contained'] > [data-part='list'] {
+    /* The marker underlines the label inside the selected surface, a step above its edge. */
+    --_marker-lift: calc(2 * var(--slotted-space-1, 0.125rem));
+
     background-color: var(--slotted-tabs-contained-background, var(--slotted-surface-sunken));
     border-radius: var(--slotted-radius-md, 6px);
     justify-self: start;
@@ -602,26 +646,6 @@
     box-shadow: var(--slotted-shadow-xs);
   }
 
-  /**
-   * Inset from the corners by the radius, so the bar underlines the label
-   * instead of tracing the edge of the surface it sits on. Sitting on the
-   * edge, it read as a second border of a different colour, and the capture
-   * showed a pill with one blue side.
-   */
-  [data-ui='tabs'][data-variant='contained']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    inset-block-end: var(--slotted-space-1, 0.125rem);
-    inset-inline: var(--slotted-radius-sm, 4px);
-  }
-
-  [data-ui='tabs'][data-variant='contained'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    inset-block: var(--slotted-radius-sm, 4px);
-    inset-inline: auto var(--slotted-space-1, 0.125rem);
-  }
-
   /* ── The dismiss control ──────────────────────────────────────────────── */
 
   /**
@@ -963,8 +987,8 @@
    * adds is the track: a disabled family should not read as a live one with
    * grey labels.
    */
-  [data-ui='tabs'][data-disabled][data-variant='line'][data-track='line'] > [data-part='list'] {
-    border-color: var(--slotted-disabled-border, GrayText);
+  [data-ui='tabs'][data-disabled] {
+    --_track-color: var(--slotted-disabled-border, GrayText);
   }
 
   [data-ui='tabs'][data-disabled][data-variant='contained'] > [data-part='list'] {
@@ -976,21 +1000,38 @@
    * decoration in an unthemed page should disappear rather than shout, and a
    * marker painted `GrayText` with no theme would be the loudest thing on it.
    */
-  [data-ui='tabs'][data-disabled]
-    > :where([data-part='list'])
-    > [data-part='item'][data-selected]::after {
+  [data-ui='tabs'][data-disabled] > :where([data-part='list']) > [data-part='marker'] {
     background-color: var(--slotted-disabled-border);
   }
 
   /* ── Forced colours ──────────────────────────────────────────────────── */
 
   /**
-   * The theme maps every scheme token to a system colour, so the only rule
-   * here is about paint the theme cannot reach: a selected tab in the
-   * contained variant has a fill that flattens to `Canvas` along with the
-   * track it stands in.
+   * The theme maps every scheme token to a system colour, so the rules here
+   * are about paint the theme cannot reach: the track drawn as a shadow, the
+   * marker's ground, and a selected tab in the contained variant, whose fill
+   * flattens to `Canvas` along with the track it stands in.
    */
   @media (forced-colors: active) {
+    /* A shadow is not drawn under forced colours: the track is a border again. */
+    [data-ui='tabs'][data-variant='line'][data-track='line'] > [data-part='list'] {
+      border-block-end: var(--_track-size) solid CanvasText;
+      padding-block-end: 0;
+    }
+
+    [data-ui='tabs'][data-orientation='vertical'][data-variant='line'][data-track='line']
+      > [data-part='list'] {
+      border-block-end: 0;
+      border-inline-end: var(--_track-size) solid CanvasText;
+      padding-inline-end: 0;
+    }
+
+    /* The marker's ground would flatten to Canvas with every other ground. */
+    [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'] {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+
     [data-ui='tabs'][data-variant='contained']
       > :where([data-part='list'])
       > [data-part='item'][data-selected] {

package/src/tabs/tabs.tokens.json

@@ -31,6 +31,7 @@
   "--slotted-disabled-background",
   "--slotted-disabled-border",
   "--slotted-disabled-foreground",
+  "--slotted-duration-medium",
   "--slotted-duration-short",
   "--slotted-easing-enter",
   "--slotted-focus-ring-color",
@@ -39,7 +40,6 @@
   "--slotted-radius-full",
   "--slotted-radius-md",
   "--slotted-radius-sm",
-  "--slotted-radius-xs",
   "--slotted-shadow-xs",
   "--slotted-space-1",
   "--slotted-space-2",
@@ -63,8 +63,14 @@
   "--slotted-tabs-hover-background",
   "--slotted-tabs-hover-color",
   "--slotted-tabs-hover-marker-color",
+  "--slotted-tabs-hover-marker-opacity",
   "--slotted-tabs-list-gap",
   "--slotted-tabs-marker-color",
+  "--slotted-tabs-marker-easing",
+  "--slotted-tabs-marker-inset",
+  "--slotted-tabs-marker-offset",
+  "--slotted-tabs-marker-radius",
+  "--slotted-tabs-marker-size",
   "--slotted-tabs-scroll-color",
   "--slotted-tabs-selected-color",
   "--slotted-tabs-track-color",