@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-paginator.scss

@@ -1,235 +1,689 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-paginator.scss — Pagination for tables and lists
-// Aligned with Figma matcha/paginator:
-//   Tipo(3: Completo, Simples, Mobile)
-//   Active page = accent pill, nav = icon-button Ghost MD (44×44 touch target)
-//   HTML: <nav aria-label="Paginação" class="matcha-paginator">
-//   Active page: aria-current="page"
-// =============================================================================
-
-@mixin matcha-paginator-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  .matcha-paginator {
-    // ── Active page — accent only (consistência, não over-engineering) ──
-    .page-button.active {
-      background-color: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
-    }
-
-    // ── Total info ──
-    .paginator-total-info {
-      .total-range {
-        color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-      }
-      .total-filtered {
-        color: var(--matcha-color-text-secondary, #{getForegroundAlpha($theme)});
-      }
-    }
-
-    // ── Page buttons (inactive) ──
-    .page-button:not(.active) {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-      &:hover {
-        background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
-      }
-    }
-
-    // ── Nav buttons ──
-    .nav-button {
-      color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-paginator {
-  // Figma matcha/paginator: pad 8/16, gap 8 (Mobile/Tipo=Simple)
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-  font-family: var(--matcha-font-family);
-  gap: var(--matcha-space-100, 8px);
-
-  // ── Total info ──
-  .paginator-total-info {
-    display: flex;
-    flex-direction: column;
-    gap: var(--matcha-space-050, 4px);
-
-    .total-range {
-      font-size: var(--matcha-text-body-md, 14px);
-      font-weight: var(--matcha-weight-medium, 500);
-      line-height: 1.4;
-    }
-
-    .total-filtered {
-      font-size: var(--matcha-text-body-sm, 12px);
-      line-height: 1.3;
-    }
-  }
-
-  // ── Controls wrapper ──
-  .paginator-controls {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-200, 16px);
-  }
-
-  // ── Page size selector ──
-  .page-size-selector {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-
-    label {
-      font-size: var(--matcha-text-body-sm, 12px);
-      white-space: nowrap;
-    }
-  }
-
-  // ── Page numbers row ──
-  .paginator-pages {
-    display: flex;
-    align-items: center;
-    gap: var(--matcha-space-050, 4px);
-  }
-
-  // ── Nav buttons (prev/next) — 40×40 matching icon-button Ghost MD ──
-  .nav-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--matcha-space-500, 40px);
-    height: var(--matcha-space-500, 40px);
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-radius: var(--matcha-radius-pill, 9999px);
-    position: relative;
-    overflow: hidden;
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-
-    // State layer
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: currentColor;
-      opacity: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-    &:hover:not(:disabled)::before  { opacity: var(--matcha-state-hover, 0.08); }
-    &:active:not(:disabled)::before { opacity: var(--matcha-state-active, 0.12); }
-
-    &:disabled {
-      opacity: var(--matcha-opacity-secondary, 0.54);
-      pointer-events: none; cursor: default;
-    }
-
-    &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #6200ee);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-  }
-
-  // ── Page buttons — 44×44 pill touch target (WCAG 2.5.8) ──
-  .page-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)); // 44
-    height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px));
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-radius: var(--matcha-radius-pill, 9999px);
-    font-size: var(--matcha-text-label-md, 14px);
-    font-weight: var(--matcha-weight-medium, 500);
-    position: relative;
-    overflow: hidden;
-
-    // State layer for non-active
-    &:not(.active)::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: currentColor;
-      opacity: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-    &:not(.active):not([disabled]):hover::before  { opacity: var(--matcha-state-hover, 0.08); }
-    &:not(.active):not([disabled]):active::before { opacity: var(--matcha-state-active, 0.12); }
-
-    &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #6200ee);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-  }
-
-  // ── Ellipsis ──
-  .ellipsis {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)); // 44
-    font-size: var(--matcha-text-label-sm, 12px);
-    user-select: none;
-  }
-}
-
-// ── Mobile layout (≤599px) — hides page numbers, shows "Página X de Y" ──
-@include media-breakpoint('xs') {
-  .matcha-paginator {
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-    gap: var(--matcha-space-100, 8px);
-
-    // Hide page numbers on mobile
-    .paginator-pages .page-button,
-    .paginator-pages .ellipsis {
-      display: none;
-    }
-
-    // Show "Página X de Y" label (hidden on desktop via .mobile-only)
-    .paginator-page-label {
-      display: block;
-    }
-
-    // Total info centered below
-    .paginator-total-info {
-      width: 100%;
-      text-align: center;
-      align-items: center;
-    }
-  }
-}
-
-// Hide mobile-only elements on desktop
-@include media-breakpoint('gt-xs') {
-  .matcha-paginator .paginator-page-label {
-    display: none;
-  }
-}
-
-// ── Reduced motion ──
-@media (prefers-reduced-motion: reduce) {
-  .matcha-paginator {
-    .nav-button::before,
-    .page-button::before {
-      transition: none;
-    }
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-paginator.scss — 1:1 com Figma DSV3 (matcha/pagination)
+// 4 variants Figma: Tipo=Mobile · Tipo=Standard · Tipo=Extended · Tipo=Progress
+//
+// CANON LAYOUT (DOM order = [Pages, PageSize, Total]; CSS `order` rearranja):
+//
+//   Standard (sem showTotal, sem pageSize):
+//       [Prev  1  2  3  ...  50  Next]              <- centered, pad 16/0, gap 0
+//
+//   Extended (showTotal e/ou pageSize):
+//       [Total Info]   ←gap→   [Itens/pág Select]  [Prev  1  2  3  ...  50  Next]
+//       pad 16/24, gap 16; Total grud na esquerda via `margin-right:auto`.
+//
+//   Mobile (xs media-query OU forceMobile):
+//       Row 1:  [Prev]              Página X / Y              [Next]
+//       Row 2:  [Itens/pág Select]  ←gap→  [Exibindo X-Y de N]
+//
+//   Progress (carrossel):
+//       [Prev] [segmented bar fill 1/1] [counter X / Y] [Next]
+//
+// Loading: bar accent 2px absolute no bottom, opacity 1 quando is-loading.
+// Buttons Prev/Next agora são <button matcha-icon-button variant="ghost">
+// (canon DSV3) — não estilizamos size/state aqui; só ajustamos hooks específicos.
+// =============================================================================
+
+@mixin matcha-paginator-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-paginator {
+    // ── Active page — accent only (consistência, não over-engineering) ──
+    .page-button.active {
+      background-color: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+    }
+
+    // ── Total info ──
+    .paginator-total-info {
+      .total-range {
+        color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+      }
+      .total-filtered {
+        color: var(--matcha-color-text-secondary, #{getForegroundAlpha($theme)});
+      }
+    }
+
+    // ── Page buttons (inactive) ──
+    .page-button:not(.active) {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+      &:hover {
+        background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+      }
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+// sr-only — região live dedicada pra anunciar mudança de página (WAI-ARIA APG).
+// Fora do .matcha-paginator pra também funcionar quando paginator estiver hidden
+// (logo após hide-on-single-page transition).
+.matcha-paginator__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.matcha-paginator {
+  // Default = Tipo=Standard (Figma): pad 16/0, justify center, gap 0.
+  // Gap 0 entre page slots é canônico Figma — cada slot já tem 44px hit area
+  // dentro do qual o text "1"/"2"/etc. fica centralizado, dando breathing room
+  // visual sem precisar de gap externo.
+  position: relative; // anchor pra .paginator-loading-bar absolute
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  padding: var(--matcha-space-200, 16px) 0;
+  font-family: var(--matcha-font-family);
+  gap: 0;
+  // Figma DSV3: todas as variants têm bg surface-card. Delimita o paginator
+  // como bloco coeso abaixo da tabela.
+  background: var(--matcha-color-surface-card);
+  box-sizing: border-box;
+  width: 100%;
+
+  // ── Loading state ─────────────────────────────────────────────────────────
+  // Visual feedback duplo: (1) opacity dim nos controles, (2) accent bar 2px
+  // absolute no bottom (canon Figma "Loading Indicator" rectangle 800x2).
+  &.is-loading {
+    cursor: wait;
+
+    .paginator-nav-button,
+    .page-button,
+    .paginator-progress__segment,
+    .paginator-jump__input,
+    .page-size-selector {
+      pointer-events: none;
+      opacity: var(--matcha-opacity-secondary, 0.54);
+    }
+  }
+
+  .paginator-loading-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--matcha-color-accent, #6200ee);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--matcha-duration-fast, 200ms) ease;
+    border-radius: 0 0 var(--matcha-radius-md, 4px) var(--matcha-radius-md, 4px);
+  }
+
+  &.is-loading .paginator-loading-bar {
+    opacity: 1;
+    // Pulse animation pra indicar atividade em curso (canon material UI).
+    animation: matcha-paginator-loading-pulse 1.4s ease-in-out infinite;
+  }
+
+  // ── Numeric Extended (auto-detect via :has) ──
+  // Quando consumer passa showTotal=true OU pageSizeOptions com itens, o
+  // paginator vira Tipo=Extended (Figma): pad 16/24 gap 16, Total LEFT, demais
+  // RIGHT — usa `margin-right: auto` no total pra empurrar restante pra direita.
+  &.matcha-paginator--numeric:has(.paginator-total-info),
+  &.matcha-paginator--numeric:has(.page-size-selector) {
+    padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+    gap: var(--matcha-space-200, 16px);
+    justify-content: flex-start;
+
+    // CSS order (DOM = pages, page-size, total):
+    //   Total = ordem 1 (LEFT, com margin-right auto pushando demais à direita)
+    //   PageSize = ordem 2
+    //   Pages = ordem 3 (RIGHT)
+    .paginator-total-info  { order: 1; margin-right: auto; }
+    .page-size-selector    { order: 2; }
+    .paginator-pages       { order: 3; }
+  }
+
+  // ── Total info ──
+  .paginator-total-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--matcha-space-050, 4px);
+
+    .total-range {
+      font-size: var(--matcha-text-body-md, 14px);
+      font-weight: var(--matcha-weight-medium, 500);
+      line-height: 1.4;
+    }
+
+    .total-filtered {
+      font-size: var(--matcha-text-body-sm, 12px);
+      line-height: 1.3;
+    }
+  }
+
+  // ── Page size selector ──
+  .page-size-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+
+    label {
+      font-size: var(--matcha-text-body-sm, 12px);
+      white-space: nowrap;
+    }
+  }
+
+  // ── Page numbers row ──
+  // Gap 0 = canon Figma. Cada slot tem 44px (touch target WCAG 2.5.8),
+  // breathing room vem do conteúdo (texto 6-17px) centralizado no slot.
+  .paginator-pages {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    flex-wrap: nowrap;
+    justify-content: center;
+  }
+
+  // Mobile indicator "Página X / Y" — escondido em desktop (só renderiza em mobile).
+  // Em mobile substitui a lista de page-buttons (que fica apertada/quebrada).
+  .paginator-pages__indicator {
+    display: none; // desktop default — escondido
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 0;
+    padding: 0 var(--matcha-space-150, 12px);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-semibold, 600);
+    line-height: var(--matcha-leading-body-md, 20px);
+    color: var(--matcha-color-text-primary);
+    text-align: center;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  // ── Nav buttons (matcha-icon-button) ────────────────────────────────────
+  // Buttons agora são <button matcha-icon-button variant="ghost">; tamanho
+  // (40 standard, 32 progress, 44 mobile) e states (hover/active/disabled/focus)
+  // vêm da SCSS canônica do matcha-icon-button. Só adicionamos `.paginator-nav-button`
+  // como marker pra contextos específicos (--edge chevron, progress override).
+
+  // First/Last edge buttons — Unicode « » glyphs (DS sem icon double-chevron ainda).
+  // Só typography pro glyph; dimensões/states ficam c/ matcha-icon-button.
+  .paginator-nav-button--edge .paginator-nav-button__chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-title-md, 18px);
+    line-height: 1;
+    font-weight: var(--matcha-weight-medium, 500);
+    color: currentColor;
+    pointer-events: none;
+  }
+
+  // ── Page buttons — Figma 1:1:
+  //   Inactive: 44×44 pill slot (touch target WCAG 2.5.8)
+  //   Active:   32×32 pill (menor pra destaque + visual "selecionado")
+  .page-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)); // 44
+    height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px));
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--matcha-radius-pill, 9999px);
+    font-size: var(--matcha-text-label-md, 14px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-body-md, 20px);
+    position: relative;
+    overflow: hidden;
+    transition:
+      background-color var(--matcha-duration-instant, 80ms) linear,
+      color var(--matcha-duration-instant, 80ms) linear,
+      min-width var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+      width var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+      height var(--matcha-duration-fast, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+
+    // Active = 32×32 per Figma; hit area mantém 44×44 via ::after (WCAG 2.5.5).
+    &.active {
+      min-width: var(--matcha-space-400, 32px);
+      width: var(--matcha-space-400, 32px);
+      height: var(--matcha-space-400, 32px);
+      cursor: default;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: calc(-1 * var(--matcha-space-075, 6px));
+      }
+    }
+
+    // State layer non-active
+    &:not(.active)::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+    &:not(.active):not([disabled]):hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+    &:not(.active):not([disabled]):active::before { opacity: var(--matcha-state-active, 0.12); }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #6200ee);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  // ── Page-jump input (numeric, totalPages > threshold) ───────────────────
+  .paginator-jump {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    margin-inline-start: var(--matcha-space-100, 8px);
+    font-size: var(--matcha-text-body-sm, 12px);
+    color: var(--matcha-color-text-label);
+    white-space: nowrap;
+  }
+
+  .paginator-jump__input {
+    width: 56px;
+    height: var(--matcha-space-500, 40px);
+    padding: 0 var(--matcha-space-100, 8px);
+    background: var(--matcha-color-surface-inner);
+    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+    border-radius: var(--matcha-radius-md, 4px);
+    color: var(--matcha-color-text-primary);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    text-align: center;
+    outline: none;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+    -moz-appearance: textfield;
+
+    &:focus-visible {
+      border-color: var(--matcha-color-accent);
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: 0;
+    }
+  }
+
+  // ── Ellipsis (Figma 32×44, body-md 14/20 Manrope Regular) ──
+  .ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)); // 44
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-md, 20px);
+    user-select: none;
+  }
+
+  // ── Tipo=Progress (Figma 560×48 segmented bar) ─────────────────────────
+  // Container: bg surface + radius 4 + height 48, padding 8 gap 12.
+  // Prev/Next em size=sm (32×32) via matcha-icon-button attribute size.
+  &.matcha-paginator--progress {
+    padding: var(--matcha-space-100, 8px);
+    gap: var(--matcha-space-150, 12px);
+    height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-100, 8px)); // 48
+    background: var(--matcha-color-surface, #1C1F26);
+    border-radius: var(--matcha-radius-md, 4px);
+    justify-content: center;
+
+    .paginator-pages {
+      flex: 1 1 auto;
+      gap: var(--matcha-space-150, 12px); // Figma Progress: gap 12 entre Prev | bar | counter | Next
+    }
+  }
+
+  .paginator-progress {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--matcha-space-050, 4px);
+    min-width: 80px;
+  }
+
+  // Segments — <button> clicável (jump-to-slide Stories/Instagram pattern).
+  // Visualmente alinha com matcha-progress-bar[type="segmented"][size="sm"] do Figma.
+  .paginator-progress__segment {
+    flex: 1 1 0;
+    min-width: 0;
+    height: 8px;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    position: relative;
+    background: var(--matcha-color-surface-strong, var(--matcha-color-surface-border, #282C34));
+    border-radius: var(--matcha-radius-pill, 9999px);
+    transition:
+      background-color var(--matcha-duration-medium, 200ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+      transform var(--matcha-duration-instant, 80ms) ease-out;
+
+    // Hit area expandida pra ~24h vertical (touch-friendly em mobile).
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -8px 0;
+    }
+
+    &.is-filled { background: var(--matcha-color-accent, #6200ee); }
+    &.is-current {
+      transform: scaleY(1.5);
+      background: var(--matcha-color-accent, #6200ee);
+    }
+
+    &:hover:not(.is-current):not(:disabled) {
+      background: var(--matcha-color-accent-alpha, rgba(168, 217, 78, 0.4));
+      transform: scaleY(1.25);
+    }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: 4px;
+      border-radius: var(--matcha-radius-pill, 9999px);
+    }
+
+    &:disabled { cursor: default; }
+  }
+
+  // Counter "X / Y" — discreto ao lado dos segments.
+  .paginator-progress__counter {
+    flex-shrink: 0;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-sm, 12px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-body-sm, 16px);
+    color: var(--matcha-color-text-secondary);
+    white-space: nowrap;
+    padding-inline-start: var(--matcha-space-050, 4px);
+    user-select: none;
+  }
+}
+
+// ── Loading bar animation ─────────────────────────────────────────────────
+// Pulse subtle pra indicar atividade em curso (não-distrativo).
+@keyframes matcha-paginator-loading-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+
+// ── Tipo=Mobile (refined 2026-05-19) ──────────────────────────────────
+// 2 rows canon refinado:
+//   Row 1 (44px touch target):  [Prev 44]     Página X de Y     [Next 44]
+//   Row 2 (36px info bar):       [Total formatado · X por pág ⌄ ]
+//
+// Mudanças vs versão anterior:
+//   • `paginator-jump` (input "Ir para N°") ESCONDIDO em mobile — UX duvidosa
+//     (teclado on-screen pra digitar nº de página, low value, high friction).
+//     Power-user feature; desktop mantém.
+//   • Indicator vira label completo "Página X de Y" — typography premium vs
+//     "X / Y" técnico/denso.
+//   • Total + page-size na MESMA linha (não 2 rows separadas) com separador
+//     visual. Economiza vertical e cria info-bar coesa.
+//   • Total com font-variant-numeric tabular-nums + semibold no primeiro
+//     número ("1–24") pra destaque.
+//
+// `.is-mobile-preview` aplica os mesmos rules em qualquer viewport — útil pra
+// demonstrar layout mobile em pages de doc sem redimensionar a janela.
+@mixin matcha-paginator-mobile {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  row-gap: var(--matcha-space-150, 12px);
+  column-gap: var(--matcha-space-100, 8px);
+
+  // Pages: row 1, full width, Prev | indicator | Next via space-between.
+  .paginator-pages {
+    order: 1;
+    flex: 0 0 100%;
+    width: 100%;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: var(--matcha-space-100, 8px);
+
+    // ESCONDE page numbers + ellipsis em mobile (substituídos pelo indicator).
+    .page-button,
+    .ellipsis {
+      display: none;
+    }
+
+    // MOSTRA o indicator centralizado com typography premium.
+    .paginator-pages__indicator {
+      display: flex;
+      flex: 1 1 auto;
+      font-size: var(--matcha-text-body-md, 14px);
+      font-weight: var(--matcha-weight-semibold, 600);
+      color: var(--matcha-color-text-primary);
+      letter-spacing: -0.1px;
+    }
+
+    // Nav buttons: 44×44 mobile (WCAG 2.5.5 touch target).
+    .paginator-nav-button {
+      width: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)) !important;
+      height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)) !important;
+      flex-shrink: 0;
+    }
+
+    // Page-jump ESCONDIDO em mobile — feature power-user (digitação de nº via
+    // teclado on-screen tem high friction, low value).
+    .paginator-jump {
+      display: none;
+    }
+  }
+
+  // Row 2 inteira: Total (esq) + page-size (dir) numa info-bar única.
+  // `paginator-total-info` ocupa `flex: 1 1 auto` empurrando page-size pra
+  // direita via `margin-left: auto`. Visual de bar coesa.
+  .page-size-selector {
+    order: 3; // depois do total
+    flex: 0 0 auto;
+    margin-right: 0;
+    gap: var(--matcha-space-075, 6px);
+
+    &__label {
+      font-size: var(--matcha-text-body-sm, 12px);
+      color: var(--matcha-color-text-secondary);
+    }
+  }
+
+  .paginator-total-info {
+    order: 2; // antes do page-size
+    flex: 1 1 auto;
+    margin-left: 0;
+    margin-right: 0;
+    font-variant-numeric: tabular-nums;
+
+    .total-range {
+      font-size: var(--matcha-text-body-md, 14px);
+      font-weight: var(--matcha-weight-regular, 400);
+      color: var(--matcha-color-text-primary);
+    }
+
+    .total-filtered {
+      font-size: var(--matcha-text-body-sm, 12px);
+      color: var(--matcha-color-text-secondary);
+    }
+  }
+
+  // ── Override Extended desktop rules (specificity match) ─────────────────
+  // Mobile: Pages (row 1) · Total (row 2 esq) · Page-size (row 2 dir).
+  &.matcha-paginator--numeric:has(.paginator-total-info),
+  &.matcha-paginator--numeric:has(.page-size-selector) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    gap: 0;
+    row-gap: var(--matcha-space-100, 8px);
+    column-gap: var(--matcha-space-100, 8px);
+    justify-content: center;
+
+    .paginator-pages       { order: 1; }
+    .paginator-total-info  { order: 2; flex: 1 1 auto; margin-left: 0; margin-right: 0; }
+    .page-size-selector    { order: 3; margin-left: auto; margin-right: 0; }
+  }
+
+  // Page-jump input mobile: bigger pra targets touch.
+  .paginator-jump__input {
+    height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)); // 44
+    width: var(--matcha-space-1000, 80px);
+    font-size: var(--matcha-text-body-md, 14px);
+  }
+
+  // First/Last edge buttons escondidos em mobile (page-jump cobre "ir pra extremo").
+  .paginator-nav-button--edge {
+    display: none;
+  }
+
+  // Progress mobile: nav 44×44, segments mantém height.
+  &.matcha-paginator--progress {
+    height: auto;
+    min-height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-200, 16px)); // 56
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    flex-wrap: nowrap;
+
+    .paginator-nav-button {
+      width: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)) !important;
+      height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)) !important;
+    }
+
+    // Indicator não se aplica ao progress mode (counter já cobre).
+    .paginator-pages__indicator {
+      display: none;
+    }
+  }
+}
+
+// ── Tipo=Tablet (600-1023px) — layout 2-row intencional ──────────────────
+//   Row 1: [Total info]                              [Page-size]
+//   Row 2: [        ←  Pages centralizado  →        ]
+// Esconde "Ir para N°" (touch-unfriendly). Pages SEMPRE row 2 (flex-basis 100%)
+// pra evitar wrap acidental e garantir centralização consistente.
+@mixin matcha-paginator-tablet {
+  flex-wrap: wrap;
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  column-gap: var(--matcha-space-200, 16px);
+  row-gap: var(--matcha-space-150, 12px);
+  align-items: center;
+
+  .paginator-jump {
+    display: none;
+  }
+
+  // Total info — esquerda, font compacto.
+  .paginator-total-info {
+    order: 1;
+    flex: 0 0 auto;
+    margin-right: auto; // empurra page-size pra direita
+    font-size: var(--matcha-text-body-sm, 12px);
+
+    .total-range {
+      font-size: var(--matcha-text-body-sm, 12px);
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  // Page-size — direita da row 1.
+  .page-size-selector {
+    order: 2;
+    flex: 0 0 auto;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  // Pages — SEMPRE row 2 (flex-basis 100%) centralizado.
+  .paginator-pages {
+    order: 3;
+    flex: 0 0 100%;
+    justify-content: center;
+  }
+}
+
+@include media-breakpoint('xs') {
+  .matcha-paginator { @include matcha-paginator-mobile; }
+}
+
+@include media-breakpoint('sm') {
+  .matcha-paginator { @include matcha-paginator-tablet; }
+}
+
+.matcha-paginator.is-mobile-preview {
+  @include matcha-paginator-mobile;
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+  .matcha-paginator {
+    .page-button,
+    .page-button::before,
+    .paginator-progress__segment,
+    .paginator-loading-bar {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    // Sem scale animado nos segments — só cor.
+    .paginator-progress__segment.is-current,
+    .paginator-progress__segment:hover {
+      transform: none;
+    }
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+  .matcha-paginator {
+    .page-button {
+      color: CanvasText !important;
+      border: 1px solid transparent !important;
+
+      &:hover:not(.active):not(:disabled) {
+        border-color: CanvasText !important;
+      }
+
+      &.active {
+        background: Highlight !important;
+        color: HighlightText !important;
+        border-color: Highlight !important;
+      }
+
+      &:focus-visible {
+        outline: 2px solid CanvasText !important;
+      }
+    }
+
+    .ellipsis,
+    .paginator-total-info {
+      color: CanvasText !important;
+    }
+
+    .paginator-loading-bar {
+      background: Highlight !important;
+    }
+  }
+}
+
+// ── Print ──
+// Pagination é UI interativa — some em impressão.
+@media print {
+  .matcha-paginator {
+    display: none !important;
+  }
+}