@slotted/styles 0.0.0-stage → 0.1.0-beta.0

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

@@ -0,0 +1,71 @@
+[
+  "--slotted-border-subtle",
+  "--slotted-border-width-thin",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-sm",
+  "--slotted-control-height-md",
+  "--slotted-control-height-sm",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-control-radius",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-medium",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-heading",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-2xl",
+  "--slotted-font-size-3xl",
+  "--slotted-font-size-lg",
+  "--slotted-font-size-md",
+  "--slotted-font-size-sm",
+  "--slotted-font-size-xl",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-2xl",
+  "--slotted-line-height-3xl",
+  "--slotted-line-height-lg",
+  "--slotted-line-height-md",
+  "--slotted-line-height-sm",
+  "--slotted-line-height-xl",
+  "--slotted-page-header-background",
+  "--slotted-page-header-border",
+  "--slotted-page-header-control-size",
+  "--slotted-page-header-description-measure",
+  "--slotted-page-header-gap",
+  "--slotted-page-header-heading-size-lg",
+  "--slotted-page-header-heading-size-md",
+  "--slotted-page-header-heading-size-sm",
+  "--slotted-page-header-inset",
+  "--slotted-page-header-padding-block",
+  "--slotted-page-header-radius",
+  "--slotted-page-header-shadow",
+  "--slotted-page-header-snapped-heading-size-lg",
+  "--slotted-page-header-snapped-heading-size-md",
+  "--slotted-page-header-snapped-heading-size-sm",
+  "--slotted-radius-full",
+  "--slotted-radius-lg",
+  "--slotted-radius-sm",
+  "--slotted-shadow-sm",
+  "--slotted-space-1",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-space-6",
+  "--slotted-surface",
+  "--slotted-target-comfortable",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-subtle-hover",
+  "--slotted-tone-accent-surface",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-secondary-subtle-active",
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-toolbar-inset",
+  "--slotted-z-index-sticky"
+]

package/src/pagination/pagination.css

@@ -0,0 +1,500 @@
+@layer slotted.components {
+  /**
+   * Moving between pages of a collection. Thirteen parts, twelve of them
+   * optional, and the arrangement is the consumer's: a numbered paginator is
+   * the row between two triggers, and a table's paginator bar is a page size,
+   * a range and two triggers. The field ships those as two components — MUI
+   * `Pagination` and Angular Material `mat-paginator` — and the difference
+   * between them is which parts were placed, not which stylesheet was loaded.
+   *
+   * The root is the container every part measures itself against. It declares
+   * its own `container-name`, so a paginator nested inside another family's
+   * container answers its own inline size and not that one's.
+   */
+  [data-ui='pagination'] {
+    --_target: var(--slotted-pagination-target, var(--slotted-control-height-md, 34px));
+    --_radius: var(--slotted-pagination-radius, var(--slotted-control-radius, 4px));
+    --_muted: var(--slotted-pagination-color-muted, var(--slotted-text-muted, GrayText));
+    --_strong: var(--slotted-pagination-color, var(--slotted-text, CanvasText));
+    --_glyph: var(--slotted-pagination-glyph-size, var(--slotted-control-icon-size-md, 16px));
+    --_hover-surface: var(
+      --slotted-pagination-surface-hover,
+      var(--slotted-tone-accent-subtle-hover, ButtonFace)
+    );
+    --_active-surface: var(
+      --slotted-pagination-surface-active,
+      var(--slotted-tone-accent-subtle-active, ButtonFace)
+    );
+
+    align-items: center;
+    color: var(--_strong);
+    /**
+     * The controls sit as tightly together as the numbers do, so the four
+     * triggers and the row read as one track rather than as six things spaced
+     * apart. The air goes around the two sentences instead, which is where the
+     * eye actually needs a break; a single gap on the root gave the same
+     * distance to "Next" and to "Rows per page", and the track fell apart.
+     */
+    column-gap: var(--slotted-pagination-gap, var(--slotted-space-1, 0.125rem));
+    container-name: slotted-pagination;
+    container-type: inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    font-family: var(--slotted-pagination-font-family, var(--slotted-font-family-sans, inherit));
+    font-size: var(--slotted-pagination-font-size, var(--slotted-control-font-size-md, 13px));
+    row-gap: var(--slotted-pagination-row-gap, var(--slotted-space-4, 0.5rem));
+  }
+
+  /* ── The row of pages ───────────────────────────────────────────────────
+   *
+   * `@slotted/core/pagination` keeps the row a constant number of items at
+   * every page, so nothing here has to defend against a row that grows. What
+   * this stylesheet defends against is the digits: page 9 and page 1000 are
+   * the same target, because the box is at least as wide as it is tall and the
+   * figures are tabular.
+   */
+
+  [data-ui='pagination'] [data-part='list'] {
+    align-items: center;
+    column-gap: var(--slotted-pagination-item-gap, var(--slotted-space-1, 0.125rem));
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  [data-ui='pagination'] [data-part='item'] {
+    display: flex;
+  }
+
+  [data-ui='pagination']
+    :is([data-part='status'], [data-part='summary'], [data-part='page-size-label']) {
+    margin-inline: var(--slotted-pagination-text-gap, var(--slotted-space-4, 0.5rem));
+  }
+
+  /* The air belongs between things, never against the family's own edge. */
+  [data-ui='pagination']
+    :is([data-part='status'], [data-part='summary'], [data-part='page-size-label']):first-child {
+    margin-inline-start: 0;
+  }
+
+  [data-ui='pagination']
+    :is([data-part='status'], [data-part='summary'], [data-part='page-size-label']):last-child {
+    margin-inline-end: 0;
+  }
+
+  /* Two sentences side by side share one step of air, not two: the page
+     size's label and the range read eighteen pixels apart while the range
+     and the trigger read ten. */
+  [data-ui='pagination']
+    :is([data-part='status'], [data-part='summary'], [data-part='page-size-label'])
+    + :is([data-part='status'], [data-part='summary'], [data-part='page-size-label']) {
+    margin-inline-start: 0;
+  }
+
+  [data-ui='pagination']
+    :is(
+      [data-part='page'],
+      [data-part='first'],
+      [data-part='previous'],
+      [data-part='next'],
+      [data-part='last']
+    ) {
+    align-items: center;
+    appearance: none;
+    background-color: transparent;
+    block-size: var(--_target);
+    border: var(--slotted-control-border-width, 1px) solid transparent;
+    border-radius: var(--_radius);
+    color: var(--_strong);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    /**
+     * Proportional figures give every digit its own width, so a row walking
+     * from page 8 to page 9 to page 10 shifts every item beside it. Tabular
+     * figures cost nothing and the row stops moving.
+     */
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--slotted-pagination-item-weight, var(--slotted-font-weight-medium, 500));
+    justify-content: center;
+    /** Square at one digit, and wider only when the digits demand it. */
+    min-inline-size: var(--_target);
+    padding-inline: var(--slotted-pagination-item-padding, var(--slotted-space-2, 0.25rem));
+    text-decoration: none;
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      border-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+  }
+
+  /**
+   * A page number rests one step back from the four triggers. A row of eight
+   * numbers at full strength competes with the one that is filled, and the
+   * triggers are glyphs rather than words: a chevron at the muted step reads
+   * as unavailable, which is the difference this family needs to keep for the
+   * trigger that actually is.
+   */
+  [data-ui='pagination'] [data-part='page']:not([aria-current]:not([aria-current='false'])) {
+    color: var(--_muted);
+  }
+
+  /**
+   * The page the reader is on. It is a solid fill rather than a heavier weight
+   * or a border, for the reason the breadcrumb gives its last crumb the
+   * strongest colour: a row of numbers is scanned rather than read, and a fill
+   * is the only difference visible at a glance. `aria-current="page"` is what
+   * paints it — the value the ARIA specification names for a link inside a set
+   * of pagination links — so what a screen reader announces and what the eye
+   * sees are one fact rather than two.
+   */
+  [data-ui='pagination'] [data-part='page'][aria-current]:not([aria-current='false']) {
+    background-color: var(
+      --slotted-pagination-current-surface,
+      var(--slotted-tone-accent-solid, Highlight)
+    );
+    color: var(
+      --slotted-pagination-current-color,
+      var(--slotted-tone-accent-on-solid, HighlightText)
+    );
+  }
+
+  /* ── Hover, press, and the states that outrank them ─────────────────────
+   *
+   * `[data-loading]` guards as well as `[data-disabled]`, which is what stops a
+   * reader pressing Next four times while one request is in flight: a
+   * paginator waiting for the page it already asked for answers the pointer
+   * with nothing. The current page is guarded too — it is where the reader
+   * already is, and a fill that lightens under the pointer would read as a
+   * different page.
+   */
+
+  [data-ui='pagination']
+    :is(
+      [data-part='page'],
+      [data-part='first'],
+      [data-part='previous'],
+      [data-part='next'],
+      [data-part='last']
+    ):not([data-disabled], [data-loading], [aria-current]:not([aria-current='false'])):hover {
+    background-color: var(--_hover-surface);
+    color: var(--_strong);
+  }
+
+  [data-ui='pagination']
+    :is(
+      [data-part='page'],
+      [data-part='first'],
+      [data-part='previous'],
+      [data-part='next'],
+      [data-part='last']
+    ):not([data-disabled], [data-loading], [aria-current]:not([aria-current='false'])):active {
+    background-color: var(--_active-surface);
+    color: var(--_strong);
+  }
+
+  [data-ui='pagination']
+    :is(
+      [data-part='page'],
+      [data-part='first'],
+      [data-part='previous'],
+      [data-part='next'],
+      [data-part='last'],
+      [data-part='page-size']
+    ):focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * A trigger at a bound, and every control while the whole family is
+   * unavailable. `data-disabled` rather than `:disabled`, because in link mode
+   * the control is an anchor: what makes an anchor unavailable is the
+   * destination the binding did not render, which is the shape `link` already
+   * ships and the only one that stops a middle click as well as a left one.
+   */
+  [data-ui='pagination'] :is([data-disabled], [data-loading]) {
+    color: var(--slotted-pagination-color-disabled, var(--slotted-disabled-foreground, GrayText));
+  }
+
+  [data-ui='pagination'] [data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /**
+   * The current page while the row is inert. The chip keeps its shape, because
+   * the reader still needs to know which page they are on, and loses its
+   * accent, because `disabled` and `loading` both outrank `current` in
+   * `STATE_PRECEDENCE` — a saturated chip inside a grey row reads as the one
+   * thing still operable, which is exactly backwards.
+   */
+  [data-ui='pagination']
+    [data-part='page'][aria-current]:not([aria-current='false']):is(
+      [data-disabled],
+      [data-loading]
+    ) {
+    background-color: var(--slotted-disabled-background, Canvas);
+    color: var(--slotted-disabled-foreground, GrayText);
+  }
+
+  /**
+   * A page change in flight. The row keeps its size and its text, because a
+   * paginator that emptied itself while loading would move the control the
+   * reader is about to press again.
+   */
+  [data-ui='pagination'] [data-loading] {
+    cursor: progress;
+  }
+
+  /**
+   * The pages the row does not draw. The mark is the character U+2026 as text,
+   * for the reason the breadcrumb's ellipsis is: rule 3 of
+   * `docs/token-foundation.md` forbids drawing an *icon* from a character, and
+   * this one stands in for nothing — it is the typographic mark for omitted
+   * content, and omitted content is exactly what it holds. It is announced to
+   * nobody, which is what Zag, MUI and Primer all ship.
+   */
+  [data-ui='pagination'] [data-part='ellipsis'] {
+    align-items: center;
+    block-size: var(--_target);
+    color: var(--_muted);
+    display: inline-flex;
+    justify-content: center;
+    letter-spacing: var(--slotted-pagination-ellipsis-tracking, 0.05em);
+    line-height: 1;
+    min-inline-size: var(--_target);
+    /**
+     * The ink of an ellipsis sits on the baseline, and a centred line box puts
+     * the baseline below the middle of the box. Half a cap height is the
+     * distance from the baseline to the optical centre of Latin text.
+     */
+    translate: 0 calc(-1 * var(--slotted-pagination-ellipsis-lift, 0.5cap));
+  }
+
+  /* ── The four triggers ──────────────────────────────────────────────────
+   *
+   * One chevron for a step and two for an end: the `chevron-right` and
+   * `chevrons-right` Glyph elements the bindings render in each trigger, both
+   * stroked with `currentColor` so each follows the state its button is in —
+   * including the muted colour a disabled trigger takes, which is why neither
+   * needs a rule of its own.
+   *
+   * Mirroring is stated twice rather than once, because there are two facts:
+   * a chevron points along the reading direction, which the icon box's own
+   * `directional` mirror answers in a right-to-left document; and `previous`
+   * and `first` point against it, which the half turn below answers. A turn
+   * rather than a second `scale`, which the box's mirror holds: the two
+   * compose, and a chevron turned half a turn is the chevron flipped.
+   */
+
+  [data-ui='pagination']
+    :is([data-part='first'], [data-part='previous'], [data-part='next'], [data-part='last']) {
+    --slotted-icon-size: var(--_glyph);
+  }
+
+  [data-ui='pagination'] :is([data-part='first'], [data-part='previous']) > [data-ui='icon'] {
+    rotate: 0.5turn;
+  }
+
+  /* ── The two sentences ──────────────────────────────────────────────────
+   *
+   * `status` is "21–40 of 482", and it is the polite live region: the numbers
+   * are what a reader who cannot see the row needs after a page change, and
+   * one region announcing one sentence is the whole of the announcement.
+   * `summary` is "Page 3 of 24", which is what the row itself becomes below
+   * the breakpoint.
+   */
+
+  [data-ui='pagination'] :is([data-part='status'], [data-part='summary']) {
+    color: var(--_muted);
+    font-variant-numeric: tabular-nums;
+    /* Only the paragraph's own block margin: the inline air between the
+       sentences and the triggers is stated above and stays. Read live, a
+       `margin: 0` here came after that rule and won, and "1–8 of 50" stood
+       two pixels from the previous-page trigger. */
+    margin-block: 0;
+  }
+
+  /**
+   * The summary is three words and never breaks; the range may be a sentence a
+   * consumer wrote, and forbidding it to wrap pushed the trigger after it onto
+   * a line of its own at 240 pixels.
+   */
+  [data-ui='pagination'] [data-part='summary'] {
+    white-space: nowrap;
+  }
+
+  [data-ui='pagination'] [data-part='summary'] {
+    align-items: center;
+    block-size: var(--_target);
+    display: none;
+  }
+
+  /* ── The page size ──────────────────────────────────────────────────────
+   *
+   * A native `select`, painted from the control tokens every other control in
+   * the library reads. `select` in a later wave owns the styled listbox; a
+   * paginator that could not change its page size until then is not one a
+   * table can use, and the native control is what section 2.8 of
+   * `docs/component-features.md` asks for first. Its popup follows the
+   * `color-scheme` the theme already emits, so neither scheme needs a rule.
+   *
+   * The label wraps the select rather than pointing at it, which gives the
+   * control its accessible name from the platform and gives the bindings
+   * somewhere to put the chevron: the `chevron-down` Glyph element after the
+   * select, laid over its end. A `select` takes no children of its own, and a
+   * chevron drawn as a `background-image` would be one fixed colour in a
+   * family that has three schemes.
+   */
+
+  [data-ui='pagination'] [data-part='page-size-label'] {
+    align-items: center;
+    color: var(--_muted);
+    column-gap: var(--slotted-pagination-page-size-gap, var(--slotted-space-3, 0.375rem));
+    display: inline-flex;
+    position: relative;
+    white-space: nowrap;
+  }
+
+  [data-ui='pagination'] [data-part='page-size-label'] > [data-ui='icon'] {
+    --slotted-icon-size: var(--_glyph);
+
+    inset-block-start: 50%;
+    inset-inline-end: var(--slotted-pagination-page-size-inset, var(--slotted-space-3, 0.375rem));
+    /* The chevron belongs to the select underneath it, and never takes a click. */
+    pointer-events: none;
+    position: absolute;
+    translate: 0 -50%;
+  }
+
+  [data-ui='pagination'] [data-part='page-size'] {
+    appearance: none;
+    background-color: var(
+      --slotted-pagination-page-size-surface,
+      var(--slotted-control-surface, Field)
+    );
+    block-size: var(--_target);
+    border: var(--slotted-control-border-width, 1px) solid
+      var(--slotted-control-border-color, ButtonBorder);
+    border-radius: var(--_radius);
+    box-shadow: var(--slotted-control-shadow);
+    color: var(--_strong);
+    cursor: pointer;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    padding-inline: var(--slotted-control-padding-inline-sm, 10px)
+      calc(var(--_glyph) + var(--slotted-space-6, 1rem));
+    transition: border-color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+  }
+
+  [data-ui='pagination'] [data-part='page-size']:not(:disabled):hover {
+    border-color: var(--slotted-border-strong, ButtonBorder);
+  }
+
+  [data-ui='pagination'] [data-part='page-size']:disabled {
+    background-color: var(--slotted-disabled-background, Canvas);
+    border-color: var(--slotted-disabled-border, GrayText);
+    color: var(--slotted-disabled-foreground, GrayText);
+    cursor: not-allowed;
+  }
+
+  /* ── Compaction ─────────────────────────────────────────────────────────
+   *
+   * Below the breakpoint the numbered row gives way to the sentence that says
+   * the same thing in less space, and the triggers stay. Both are always
+   * rendered and exactly one is displayed, so neither is announced twice.
+   *
+   * It is a container query and not a viewport query, so a paginator under a
+   * table in a split pane compacts while the same paginator on a full page
+   * does not. The breakpoint is a literal because
+   * `@container (min-width: var(--x))` is invalid CSS, which rule 4 of
+   * `docs/token-foundation.md` states.
+   */
+
+  @container slotted-pagination (max-width: 22rem) {
+    [data-ui='pagination'] [data-part='list'] {
+      display: none;
+    }
+
+    [data-ui='pagination'] [data-part='summary'] {
+      display: flex;
+    }
+
+    /**
+     * The range and the summary say overlapping things, and at this width
+     * there is room for one. The summary wins because it names the page the
+     * triggers move; the range names items the reader cannot act on.
+     *
+     * Only where a summary exists to replace it. A paginator over a collection
+     * whose total the server does not know has no page numbers and therefore
+     * no summary, and hiding its range left two chevrons and no sentence at
+     * all — which the 240-pixel capture showed and no test could have.
+     */
+    [data-ui='pagination']:has([data-part='summary']) [data-part='status'] {
+      display: none;
+    }
+
+    /**
+     * The page size takes the whole line, so the controls beside it are not
+     * split across two. At this width the label and its select are most of the
+     * row, and the trigger that did not fit landed alone underneath.
+     */
+    [data-ui='pagination'] [data-part='page-size-label'] {
+      flex-basis: 100%;
+      margin-inline: 0;
+    }
+
+    /**
+     * And the select fills the line with it. The chevron is drawn at the
+     * label's own inline end, so a label stretched to the full width with a
+     * select still sized to its content left the mark floating in the gap
+     * between the two.
+     */
+    [data-ui='pagination'] [data-part='page-size'] {
+      flex: 1;
+    }
+
+    /**
+     * A sentence claims its full length before a flex row decides where to
+     * break, so a range of any length pushed the trigger after it onto a line
+     * of its own. Basing it at nought lets the row keep every control on one
+     * line and gives the sentence whatever is left.
+     */
+    [data-ui='pagination'] [data-part='status'] {
+      flex: 1 1 0;
+    }
+  }
+
+  /* ── Forced colours ─────────────────────────────────────────────────────
+   *
+   * The system replaces every painted surface with the page's own background,
+   * which would take two things with it: the fill that is the only mark on
+   * the current page, and the fill that answers the pointer.
+   *
+   * The chevrons need nothing: they are stroked with `currentColor`, the
+   * button's own colour, which the system has already forced to the right
+   * value — including the grey a disabled trigger takes.
+   */
+
+  @media (forced-colors: active) {
+    [data-ui='pagination'] [data-part='page'][aria-current]:not([aria-current='false']) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+
+    [data-ui='pagination']
+      :is(
+        [data-part='page'],
+        [data-part='first'],
+        [data-part='previous'],
+        [data-part='next'],
+        [data-part='last']
+      ):not([data-disabled], [data-loading], [aria-current]:not([aria-current='false'])):hover {
+      border-color: ButtonBorder;
+    }
+  }
+}

package/src/pagination/pagination.tokens.json

@@ -0,0 +1,56 @@
+[
+  "--slotted-border-strong",
+  "--slotted-control-border-color",
+  "--slotted-control-border-width",
+  "--slotted-control-font-size-md",
+  "--slotted-control-height-md",
+  "--slotted-control-icon-size-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",
+  "--slotted-disabled-border",
+  "--slotted-disabled-foreground",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-sans",
+  "--slotted-font-weight-medium",
+  "--slotted-pagination-color",
+  "--slotted-pagination-color-disabled",
+  "--slotted-pagination-color-muted",
+  "--slotted-pagination-current-color",
+  "--slotted-pagination-current-surface",
+  "--slotted-pagination-ellipsis-lift",
+  "--slotted-pagination-ellipsis-tracking",
+  "--slotted-pagination-font-family",
+  "--slotted-pagination-font-size",
+  "--slotted-pagination-gap",
+  "--slotted-pagination-glyph-size",
+  "--slotted-pagination-item-gap",
+  "--slotted-pagination-item-padding",
+  "--slotted-pagination-item-weight",
+  "--slotted-pagination-page-size-gap",
+  "--slotted-pagination-page-size-inset",
+  "--slotted-pagination-page-size-surface",
+  "--slotted-pagination-radius",
+  "--slotted-pagination-row-gap",
+  "--slotted-pagination-surface-active",
+  "--slotted-pagination-surface-hover",
+  "--slotted-pagination-target",
+  "--slotted-pagination-text-gap",
+  "--slotted-space-1",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-6",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-on-solid",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-accent-subtle-active",
+  "--slotted-tone-accent-subtle-hover"
+]