Pagination

/* smbk-pagination — Pagination. Figma "Pagination" 4253:3044 (Type: Default, Select, Range; Border: Yes, No).
 * The numbers type is a bar of ghost buttons, the current page held in the
 * pressed look, with or without its border. The select type is Previous, a
 * select of pages, Next. The range type says which rows are showing out of
 * how many, with a select of ranges, for a table's foot.
 * The current page shows by its pressed fill and a label one weight bolder, so
 * it is found without telling colors apart. Digits are tabular, every one as
 * wide as the next, so numbers line up and do not shift as they change.
 * In a narrow space the numbers bar has no room for its numbers, so it shows
 * a short form: Previous, "6 of 11", Next (the status part); the select type's
 * Previous and Next show their icons alone. */

.smbk-pagination {
  display: inline-flex;
  align-items: center;
}

.smbk-pagination__list {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--smbk-space-inline-xs);
  margin: 0;
  padding: var(--smbk-space-inset-xs);
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
  border-radius: var(--smbk-radius-control-lg);
  list-style: none;
}

.smbk-pagination--borderless .smbk-pagination__list {
  border-color: transparent;
}

.smbk-pagination__item {
  display: inline-flex;
}

/* At least a square, and as wide as its number needs with the inset beside it, so a page past 999 fits. Column, so the
   copy below lies under the number and not beside it. */
.smbk-pagination__page {
  flex-direction: column;
  gap: 0;
  min-width: var(--smbk-size-control-sm);
  padding: 0 var(--smbk-space-inset-xs);
  font-variant-numeric: tabular-nums;
}

/* The button is always as wide as its number at the current page's weight: an invisible copy of the number
   (`data-label`, which the wrapper writes) lies under it with no height, so a page turning current never moves the
   pages beside it. The copy is generated content, hidden, with empty words for assistive technology. */
.smbk-pagination__page[data-label]::after {
  content: attr(data-label);
  content: attr(data-label) / "";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--smbk-typography-body-sm-semibold-font-weight);
  pointer-events: none;
  user-select: none;
}

/* Figma holds the current page in the pressed fill; its label one weight bolder, the semibold of the
   same 14 px, is the code's own: the weight variants of the text styles live in the token source, not
   in Figma. Only the weight changes, so the digit sits level with the others. */
.smbk-pagination__page[aria-current="page"] {
  background: var(--smbk-color-action-ghost-background-pressed);
  font-weight: var(--smbk-typography-body-sm-semibold-font-weight);
}

.smbk-pagination__gap {
  display: inline-block;
  text-align: center;
  min-width: var(--smbk-size-control-sm);
  color: var(--smbk-color-text-subtlest);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

/* The short form's "6 of 11", shown only in a narrow space. */
.smbk-pagination__status {
  display: none;
  align-items: center;
  padding: 0 var(--smbk-space-inset-md);
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The select type's Previous and Next: with their words in a wide space, their icons alone in a
   narrow one, so the three fit a phone. */
.smbk-pagination .smbk-pagination__narrow-only {
  display: none;
}

@container style(--smbk-layout: narrow) {
  .smbk-pagination__item:has(> .smbk-pagination__page, > .smbk-pagination__gap) {
    display: none;
  }

  .smbk-pagination__status,
  .smbk-pagination .smbk-pagination__narrow-only {
    display: inline-flex;
  }

  .smbk-pagination .smbk-pagination__wide-only {
    display: none;
  }
}

/* ---- type: select ---- */

.smbk-pagination--type-select {
  gap: var(--smbk-space-inline-lg);
}

.smbk-pagination--type-select .smbk-pagination__select {
  width: auto;
}

.smbk-pagination__select .smbk-select__value,
.smbk-pagination__select .smbk-select__option-label {
  font-variant-numeric: tabular-nums;
}

/* ---- type: range ---- */

.smbk-pagination--type-range {
  gap: var(--smbk-space-inline-lg);
}

.smbk-pagination--type-range .smbk-pagination__select {
  width: auto;
}

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
   user's own colors. Nothing here applies outside that mode. */

@media (forced-colors: active) {
  .smbk-pagination__page[aria-current="page"] {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    box-shadow: none;
  }

  .smbk-pagination__page[aria-current="page"]:focus-visible {
    outline-color: CanvasText;
  }
}

{
  "name": "pagination",
  "block": "smbk-pagination",
  "summary": "Moves between the pages of a long list: numbered buttons in a bar, Previous and Next around a select of pages, or a range readout for a table.",
  "adapt": "css",
  "axes": {
    "type": {
      "values": [
        "numbers",
        "select",
        "range"
      ],
      "default": "numbers",
      "description": "Figma: Default (numbers), Select, Range."
    }
  },
  "flags": {
    "borderless": {
      "description": "The numbers bar without its border. Figma: Border=No."
    }
  },
  "parts": [
    "list",
    "item",
    "page",
    "gap",
    "status",
    "previous",
    "next",
    "select",
    "label",
    "wide-only",
    "narrow-only"
  ],
  "figmaNodeId": "4253:3044"
}