@inchurch/matcha-theme 22.5.1 → 22.5.3

package/components/matcha-paginator.scss

@@ -101,7 +101,7 @@
     .paginator-nav-button,
     .page-button,
     .paginator-progress__segment,
-    .paginator-jump__input,
+    .paginator-jump__field,
     .page-size-selector {
       pointer-events: none;
       opacity: var(--matcha-opacity-secondary, 0.54);
@@ -297,27 +297,19 @@
     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;
+  // Chrome (borda/bg/foco) agora vem do próprio matcha-field — só controlamos
+  // a largura compacta (o field é width:100% por padrão) e cosméticos do
+  // <input> nativo renderizado dentro dele (compat visual com o canon anterior).
+  // 64px = mesma largura do page-size selector ao lado (matcha-field size="sm").
+  .paginator-jump__field {
+    width: 64px;
 
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-    -moz-appearance: textfield;
+    input[type="number"] {
+      text-align: center;
+      -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;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
     }
   }
 
@@ -541,7 +533,7 @@
   }
 
   // Page-jump input mobile: bigger pra targets touch.
-  .paginator-jump__input {
+  .paginator-jump__field {
     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);

package/components/matcha-table.scss

@@ -290,25 +290,20 @@
     // ── Column width hints (aplicar em <th> — <td> herda pela coluna) ─────
     thead th,
     tbody td {
-      &.col-checkbox { width: var(--matcha-table-col-checkbox-width); text-align: center; }
+      // min-width igual ao width — sem isso, a regra base thead th/tbody td
+      // (min-width:120px) vence e a coluna nunca encolhe pro valor pretendido
+      // (mesmo bug achado e corrigido em .col-actions).
+      &.col-checkbox { width: var(--matcha-table-col-checkbox-width); min-width: var(--matcha-table-col-checkbox-width); text-align: center; }
       &.col-id      { width: var(--matcha-table-col-id-width); }
       &.col-narrow  { width: var(--matcha-table-col-narrow-width); }
       &.col-medium  { width: var(--matcha-table-col-medium-width); }
-      // Actions / icon-buttons — shrink-to-content (1% truque de table layout).
-      // Children inline horizontal right-aligned (canon Figma: edit/delete lado a
-      // lado, não stackados).
+      // Actions / icon-buttons — pinada em --matcha-table-col-actions-width (80px).
+      // Children inline-flex, centralizados (título "Ações" no header também
+      // centraliza — text-align: center vale pro conteúdo das duas linhas).
       //
       // Importante: `.matcha-button` tem `display: flex` (block-level) que faria
       // os icon-buttons empilharem verticalmente. Override via selector descendant
       // com specificity maior pra forçar inline-flex no contexto de actions cell.
-      //
-      // Padding-right ZERO no body — icon-button já tem click target padding
-      // interno; somar padding ao td empurraria os botões pra ESQUERDA do edge
-      // do header "Ações". Alinhamento perfeito: button box-right = cell-right.
-      // Actions / icon-buttons — shrink-to-content (1% truque de table layout).
-      // Children inline horizontal LEFT-aligned (header text "Ações" alinha
-      // naturalmente acima do primeiro ícone). Padding uniforme L/R com resto
-      // da table.
       &.col-actions {
         width: var(--matcha-table-col-actions-width);
         // min-width base da tbody td/thead th é 120px (--matcha-table-cell-min-width)
@@ -316,7 +311,7 @@
         // model. Sem este override, a coluna ficava presa em 120px (achado real).
         min-width: var(--matcha-table-col-actions-width);
         white-space: nowrap;
-        text-align: left;
+        text-align: center;
 
         > .matcha-button,
         > button[matcha-icon-button],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.5.1",
+  "version": "22.5.3",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {