@inchurch/matcha-theme 20.0.3

package/components/matcha-paginator.scss

@@ -0,0 +1,235 @@
+@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;
+    }
+  }
+}

package/components/matcha-panel.scss

@@ -0,0 +1,167 @@
+@use "sass:map";
+
+// Estrutura Overlay Local
+.matcha-panel-overlay {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10001;
+    pointer-events: none !important; // Permite clicar "através" do overlay (interação com inputs, scroll da página)
+    display: block;
+}
+
+.matcha-panel-pane {
+    position: absolute;
+    display: block;
+    max-height: 100%;
+    pointer-events: auto; // Reativa cliques para o painel em si
+    box-sizing: border-box;
+}
+
+.matcha-panel {
+    // Figma matcha/panel: radius 16 (xl), pad 8/0
+    border-radius: var(--matcha-radius-xl, 16px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    max-height: 280px;
+    width: 100%;
+    padding: var(--matcha-space-100, 8px) 0;
+
+    // Animações (fade + scale leve, curva Material standard)
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+    transition: opacity var(--matcha-duration-fast, 200ms) cubic-bezier(0.4, 0, 0.2, 1),
+                transform var(--matcha-duration-fast, 200ms) cubic-bezier(0.4, 0, 0.2, 1);
+
+    // Position relative (agora contido no pane)
+    position: relative;
+    z-index: auto;
+
+    // Estados de abertura
+    &.matcha-panel-open {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+
+    // Posicionamento vertical
+    &.matcha-panel-top {
+        transform-origin: bottom center;
+    }
+
+    &.matcha-panel-bottom {
+        transform-origin: top center;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .matcha-panel {
+        transition: none;
+    }
+}
+
+// Conteúdo do painel
+.matcha-panel-content {
+    overflow-y: auto;
+    flex: 1;
+}
+
+// Quando o painel envolve um componente que já carrega surface + shadow + radius próprios
+// (ex: matcha-calendar, matcha-time-panel), o panel deve ser transparente e servir
+// apenas de container de posicionamento — evita "duplicar" visual do cartão.
+// IMPORTANTE: !important porque o mixin matcha-panel-theme pode ser aplicado com
+// wrapper de tema (ex: body.theme-dark .matcha-panel), elevando especificidade pra
+// 0-2-0, empatando com :has() e vencendo por ordem no cascade.
+.matcha-panel:has(.matcha-calendar),
+.matcha-panel:has(matcha-time-panel),
+.matcha-panel:has(.matcha-time-panel) {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+}
+
+// ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
+// O panel com calendar vira um painel full-width grudado no rodapé da tela,
+// com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
+@media (max-width: 600px) {
+    .matcha-panel-overlay:has(.matcha-calendar) {
+        pointer-events: auto !important;                   // precisa capturar o backdrop
+        background: rgba(0, 0, 0, 0.4);                    // backdrop
+        backdrop-filter: blur(2px);
+        animation: matcha-panel-backdrop-fade 180ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .matcha-panel-pane:has(.matcha-calendar) {
+        position: fixed !important;
+        inset: auto 0 0 0 !important;
+        top: auto !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        min-width: 0 !important;
+        transform: none !important;
+        max-height: 90vh;
+        animation: matcha-panel-sheet-up 220ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    // Cartão do calendar ocupa a largura toda, com radius só em cima
+    .matcha-panel:has(.matcha-calendar) .matcha-calendar {
+        width: 100%;
+        min-width: 0;
+        border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
+        padding: var(--matcha-space-250, 20px);
+    }
+
+    // Dual-month cai pra empilhado em mobile
+    .matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual {
+        min-width: 0;
+    }
+    .matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual .matcha-calendar-months {
+        flex-direction: column;
+    }
+}
+
+@keyframes matcha-panel-sheet-up {
+    from { transform: translateY(100%); }
+    to   { transform: translateY(0); }
+}
+
+@keyframes matcha-panel-backdrop-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@mixin matcha-panel-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    .matcha-panel {
+        background: var(--matcha-color-surface, #{getSurface($theme)});
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+
+        // Shadow level 2 (menus, floating)
+        box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
+
+        @if $is-dark {
+            border: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.1);
+        }
+
+        &:focus-within {
+            box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+        }
+    }
+
+    // Responsividade (mantida aqui ou movida para global dependendo da necessidade de tokens)
+    @media (max-width: 768px) {
+        .matcha-panel {
+            max-height: 200px;
+            min-width: 120px;
+            border-radius: var(--matcha-radius-md, 4px);
+        }
+    }
+}

package/components/matcha-profile-card.scss

@@ -0,0 +1,50 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-profile-card.scss — Compact profile card (avatar + name + role)
+// Aligned with Figma matcha/profile-card:
+//   Layout: avatar (40px) + text (name + role) — horizontal, pill radius
+//   Used in: headers, sidebars, user menus
+// Angular: matcha-profile-card
+// =============================================================================
+
+@mixin matcha-profile-card-theme($theme) {
+  .matcha-profile-card {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-profile-card__name {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-profile-card__role {
+    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-profile-card {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-300, 24px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+}
+
+.matcha-profile-card__name {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-body-md, 20px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.matcha-profile-card__role {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-caption, 11px);
+  line-height: var(--matcha-leading-caption, 14px);
+  white-space: nowrap;
+}

package/components/matcha-progress-bar.scss

@@ -0,0 +1,209 @@
+// =============================================================================
+// matcha-progress-bar.scss — Progress bar (determinate, indeterminate, informative)
+// Aligned with Figma matcha/progress-bar: Type(3) × Size(4) = 7 variants
+// =============================================================================
+
+@mixin generate-matcha-progress-bar-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="xs"],
+            &[size#{$infix}="tiny"] {
+                .progress { height: px-to-rem(8px); }
+            }
+
+            &[size#{$infix}="sm"],
+            &[size#{$infix}="small"] {
+                .progress { height: px-to-rem(16px); }
+            }
+
+            &[size#{$infix}="md"],
+            &[size#{$infix}="medium"] {
+                .progress { height: px-to-rem(32px); }
+            }
+        }
+    }
+
+    &:not([size]) {
+        .progress { height: px-to-rem(4px); }
+    }
+}
+
+@mixin matcha-progress-bar-theme($theme) {
+    matcha-progress-bar:not([color]) {
+        .determinate,
+        .indeterminate {
+            background-color: var(--matcha-color-accent, #{getAccent($theme)});
+        }
+    }
+
+    matcha-progress-bar {
+        .matcha-progress-bar {
+            overflow: hidden;
+            border-radius: var(--matcha-radius-lg, 8px);
+        }
+
+        .progress {
+            position: relative;
+            display: block;
+            width: 100%;
+            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            border-radius: var(--matcha-radius-sm, 2px);
+            background-clip: padding-box;
+            overflow: hidden;
+
+            .progress-text {
+                position: absolute;
+                inset: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: var(--matcha-text-sm, 12px);
+                font-weight: var(--matcha-weight-semibold, 600);
+                pointer-events: none;
+                white-space: nowrap;
+            }
+
+            .progress-text-bg {
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+                z-index: 1;
+            }
+
+            .progress-text-fg {
+                color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+                z-index: 3;
+                transition: clip-path 300ms linear;
+            }
+
+            .determinate {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                transition: width 300ms linear;
+                z-index: 2;
+            }
+
+            .indeterminate {
+                &:before {
+                    content: '';
+                    position: absolute;
+                    background-color: inherit;
+                    top: 0; left: 0; bottom: 0;
+                    will-change: left, right;
+                    animation: matcha-progress-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+                }
+
+                &:after {
+                    content: '';
+                    position: absolute;
+                    background-color: inherit;
+                    top: 0; left: 0; bottom: 0;
+                    will-change: left, right;
+                    animation: matcha-progress-indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+                    animation-delay: 1.15s;
+                }
+            }
+        }
+
+        .progress-info-card {
+            border-radius: var(--matcha-radius-lg, 8px);
+            width: 100%;
+            display: block;
+        }
+
+        @include generate-matcha-progress-bar-size-classes($helper-breakpoints);
+    }
+
+    @keyframes matcha-progress-indeterminate {
+        0% { left: -35%; right: 100%; }
+        60% { left: 100%; right: -90%; }
+        100% { left: 100%; right: -90%; }
+    }
+
+    @keyframes matcha-progress-indeterminate-short {
+        0% { left: -200%; right: 100%; }
+        60% { left: 107%; right: -8%; }
+        100% { left: 107%; right: -8%; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        matcha-progress-bar .progress {
+            .determinate { transition: none; }
+            .indeterminate:before,
+            .indeterminate:after { animation: none; }
+            .progress-text-fg { transition: none; }
+        }
+    }
+}
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+matcha-progress-bar {
+    display: flex;
+    width: 100%;
+    border-radius: var(--matcha-radius-lg, 8px);
+
+    .matcha-progress-bar {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: 100%;
+    }
+}
+
+.progress {
+    overflow: hidden;
+}
+
+// =============================================================================
+// Segmented Progress Bar — Step progress indicator (Type=Segmented)
+// Aligned with Figma matcha/progress-bar: Type=Segmented, Size=SM|MD
+// =============================================================================
+
+matcha-progress-bar[type="segmented"] {
+    .matcha-progress-bar {
+        flex-direction: row;
+        gap: var(--matcha-space-050, 4px);
+    }
+
+    .progress-segment {
+        flex: 1;
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
+
+    // ── Sizes ──
+    &[size="sm"] .progress-segment,
+    &[size="small"] .progress-segment {
+        height: var(--matcha-space-200, 16px);
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
+
+    &[size="md"] .progress-segment,
+    &[size="medium"] .progress-segment {
+        height: var(--matcha-space-400, 32px);
+        border-radius: var(--matcha-radius-md, 4px);
+    }
+
+    &:not([size]) .progress-segment {
+        height: var(--matcha-space-100, 8px);
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
+
+    // Hide standard progress bar elements
+    .progress { display: none; }
+    .progress-info-card { display: none; }
+}
+
+@mixin matcha-progress-bar-segmented-theme($theme) {
+    matcha-progress-bar[type="segmented"] {
+        .progress-segment {
+            background: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+
+            &.segment-filled {
+                background: var(--matcha-color-accent, #{getAccent($theme)});
+            }
+        }
+    }
+}