@ciromaciel/dashboard-kit 1.9.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.9.1",
+    "version": "1.10.0",
     "license": "MIT",
     "type": "module",
     "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",

package/src/components/ColorSchemeToggle.jsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Tooltip, useMantineColorScheme } from '@mantine/core'
-import { useMounted } from '@mantine/hooks'
+import { useColorScheme, useMounted } from '@mantine/hooks'
 import { IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react'
 
 /**
@@ -11,6 +11,12 @@ import { IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react'
  * twice: the tooltip and the accessible name both read "Tema: Claro. Mudar
  * para Escuro." — what it is now, and what one click does.
  *
+ * The cycle follows the device (14/10/2026): from Automático the first click
+ * goes to the theme OPPOSITE the device's, so every click from Automático
+ * changes the screen. Before, on a light device, Automático → Claro changed
+ * nothing visible. The tooltip opens on focus and touch too, not only on
+ * hover — keyboard and touch users see the state as well.
+ *
  * The icon waits for the mount. Mantine reads the stored choice from
  * localStorage on the client only; a prerendered page would otherwise paint the
  * server's icon and swap it on hydration.
@@ -18,22 +24,25 @@ import { IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react'
  * The same component lives in the components-kit for the sites; the two must
  * move together.
  */
-const NEXT = { auto: 'light', light: 'dark', dark: 'auto' }
 const NAME = { auto: 'Automático', light: 'Claro', dark: 'Escuro' }
 const ICON = { auto: IconDeviceDesktop, light: IconSun, dark: IconMoon }
 
 export function ColorSchemeToggle({ size = 36, ...props }) {
     const { colorScheme, setColorScheme } = useMantineColorScheme()
     const isMounted = useMounted()
+    const system = useColorScheme('light')
     const current = isMounted ? colorScheme : 'auto'
+    const opposite = system === 'dark' ? 'light' : 'dark'
+    const next = { auto: opposite, [opposite]: system, [system]: 'auto' }[current] ?? 'auto'
     const Icon = ICON[current]
-    const label = `Tema: ${NAME[current]}. Mudar para ${NAME[NEXT[current]]}.`
+    const label = `Tema: ${NAME[current]}. Mudar para ${NAME[next]}.`
 
     return (
         <Tooltip
             label={label}
             position="top"
             withArrow={false}
+            events={{ hover: true, focus: true, touch: true }}
         >
             <ActionIcon
                 data-color-scheme-toggle
@@ -42,7 +51,7 @@ export function ColorSchemeToggle({ size = 36, ...props }) {
                 size={size}
                 radius={0}
                 aria-label={label}
-                onClick={() => setColorScheme(NEXT[current])}
+                onClick={() => setColorScheme(next)}
                 {...props}
             >
                 <Icon

package/src/components/DataTable.jsx

@@ -12,11 +12,12 @@ import { templateFor, ROW_PADDING, HEAD_PADDING } from './table-grid'
  *
  * Spec (§Table):
  *   container   Card p={0} withBorder · overflow hidden
- *   header      bg gray.1 · padding 12px 24px · borderBottom 1px gray.2
+ *   header      bg --rlg-head (3% of the ink: a step above any surface, in both
+ *               themes — gray.1 sank below a card in dark mode) · padding 12px 24px
  *   header cell fz 10 · fw 800 · gray.5 · uppercase · ls 1.5px
  *   row         padding 14px 24px · borderBottom 1px gray.2 (except the last)
  *   cell        fz 13 · gray.7 · lh 1.4 — the "data" role
- *   hover       background gray.1 · transition 120ms
+ *   hover       --rlg-hover (6% of the ink) · transition 120ms
  *   highlight   background gray.1 + 2px black hairline on the left (inset)
  *               — `quietSelection` keeps only the background, for when the
  *                 highlight is a state of the data and not the row you clicked
@@ -80,7 +81,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
 
             {!stacked && (
             <Box
-                bg="gray.1"
+                bg="var(--rlg-head)"
                 style={{
                     display: 'grid',
                     gridTemplateColumns: template,
@@ -125,7 +126,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
                     const clickable = typeof onRowClick === 'function' || hasDetail
                     const activate = () => (typeof onRowClick === 'function' ? onRowClick(row) : toggle(key))
                     const last = i === rows.length - 1
-                    const rest = tone === 'broken' ? 'var(--mantine-color-red-0)' : selected ? 'var(--mantine-color-gray-1)' : ''
+                    const rest = tone === 'broken' ? 'var(--mantine-color-red-0)' : selected ? 'var(--rlg-hover)' : ''
 
                     return (
                         <Fragment key={key}>
@@ -146,7 +147,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
                                           }
                                         : undefined
                                 }
-                                onMouseEnter={clickable ? e => (e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-1)') : undefined}
+                                onMouseEnter={clickable ? e => (e.currentTarget.style.backgroundColor = 'var(--rlg-hover)') : undefined}
                                 onMouseLeave={clickable ? e => (e.currentTarget.style.backgroundColor = rest) : undefined}
                                 tabIndex={clickable ? 0 : undefined}
                                 role={clickable ? 'button' : undefined}
@@ -193,7 +194,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
                             </Box>
                             {open && (
                                 <Box
-                                    bg="gray.1"
+                                    bg="var(--rlg-head)"
                                     style={{ borderBottom: last ? 'none' : 'var(--rlg-border)' }}
                                 >
                                     {detail}

package/src/components/HoldToConfirm.jsx

@@ -24,6 +24,10 @@ function useHold(onConfirm, holdMs) {
     const [progress, setProgress] = useState(0)
     const timer = useRef(null)
     const holding = useRef(false)
+    // Marks a real press (mouse, finger, key) so the click that follows it is
+    // not mistaken for an assistive-technology activation. A ref: the button
+    // re-renders every tick while held, and a plain object would reset.
+    const pressed = useRef(false)
 
     const stop = useCallback(() => {
         if (timer.current) clearInterval(timer.current)
@@ -53,22 +57,39 @@ function useHold(onConfirm, holdMs) {
     // If the component leaves the screen mid-hold, the interval dies with it.
     useEffect(() => stop, [stop])
 
-    return { progress, start, stop }
+    return { progress, start, stop, pressed }
 }
 
-/** Handlers shared by both variants: pointer, touch and keyboard. */
-function holdHandlers(start, stop, disabled) {
+/**
+ * Handlers shared by both variants: pointer, touch and keyboard — and the
+ * assistive-technology path.
+ *
+ * A screen reader (VoiceOver, TalkBack) or Switch Control does not hold a key:
+ * it sends one synthesized `click`, with no keydown or mousedown before it.
+ * Until 14/10/2026 that click did nothing, so a person using one could never
+ * delete. Now a click that arrives WITHOUT a hold in progress asks a second
+ * time, in the browser's own dialog — which every assistive technology reads —
+ * and confirms only on yes. Apple's rule for hard-to-recover actions under
+ * assistive access: confirm twice. A mouse, finger or key hold never reaches
+ * that path, because each of them marks the press before the click.
+ */
+function holdHandlers(start, stop, disabled, { pressed, onConfirm, confirmText }) {
     if (disabled) return {}
+    const press = fn => e => {
+        pressed.current = true
+        fn(e)
+    }
     return {
-        onMouseDown: start,
+        onMouseDown: press(start),
         onMouseUp: stop,
         onMouseLeave: stop,
-        onTouchStart: start,
+        onTouchStart: press(start),
         onTouchEnd: stop,
         onTouchCancel: stop,
         onKeyDown: e => {
             if (e.key === ' ' || e.key === 'Enter') {
                 e.preventDefault()
+                pressed.current = true
                 start()
             }
         },
@@ -76,6 +97,13 @@ function holdHandlers(start, stop, disabled) {
             if (e.key === ' ' || e.key === 'Enter') stop()
         },
         onBlur: stop,
+        onClick: () => {
+            if (pressed.current) {
+                pressed.current = false
+                return
+            }
+            if (typeof window !== 'undefined' && window.confirm(confirmText)) onConfirm()
+        },
     }
 }
 
@@ -84,7 +112,7 @@ function holdHandlers(start, stop, disabled) {
  * The ring grows over the icon itself.
  */
 export function HoldToConfirmIcon({ icon, label, onConfirm, disabled, color = 'red.6', holdMs = HOLD_MS }) {
-    const { progress, start, stop } = useHold(onConfirm, holdMs)
+    const { progress, start, stop, pressed } = useHold(onConfirm, holdMs)
     const active = progress > 0
 
     return (
@@ -109,7 +137,7 @@ export function HoldToConfirmIcon({ icon, label, onConfirm, disabled, color = 'r
                     color={active ? color : 'gray'}
                     aria-label={label}
                     disabled={disabled}
-                    {...holdHandlers(start, stop, disabled)}
+                    {...holdHandlers(start, stop, disabled, { pressed, onConfirm, confirmText: `${label}? Não dá para desfazer.` })}
                 >
                     {icon}
                 </ActionIcon>
@@ -123,7 +151,7 @@ export function HoldToConfirmIcon({ icon, label, onConfirm, disabled, color = 'r
  * to say what is going to happen and how much is left.
  */
 export function HoldToConfirmButton({ children, holdingLabel, onConfirm, disabled, loading, leftSection, holdMs = HOLD_MS, ...props }) {
-    const { progress, start, stop } = useHold(onConfirm, holdMs)
+    const { progress, start, stop, pressed } = useHold(onConfirm, holdMs)
     const active = progress > 0
     const remaining = Math.ceil(((100 - progress) / 100) * (holdMs / 1000))
 
@@ -134,7 +162,7 @@ export function HoldToConfirmButton({ children, holdingLabel, onConfirm, disable
             disabled={disabled}
             loading={loading}
             leftSection={leftSection}
-            {...holdHandlers(start, stop, disabled || loading)}
+            {...holdHandlers(start, stop, disabled || loading, { pressed, onConfirm, confirmText: `${typeof children === 'string' ? children : 'Confirmar'}? Não dá para desfazer.` })}
             {...props}
         >
             {active ? (

package/src/components/MenuItem.jsx

@@ -33,7 +33,7 @@ export function MenuItem({ icon: Icon, label, onClick }) {
                 transition: 'background 120ms ease',
             }}
             onMouseEnter={e => {
-                e.currentTarget.style.background = 'var(--mantine-color-gray-1)'
+                e.currentTarget.style.background = 'var(--rlg-hover)'
             }}
             onMouseLeave={e => {
                 e.currentTarget.style.background = 'transparent'

package/src/components/ResourceItem.jsx

@@ -50,7 +50,7 @@ export function ResourceItem({ icon: Icon, title, subtitle, tone = 'muted', mono
                 maxWidth: '100%',
             }}
             onMouseEnter={e => {
-                e.currentTarget.style.background = 'var(--mantine-color-gray-1)'
+                e.currentTarget.style.background = 'var(--rlg-hover)'
             }}
             onMouseLeave={e => {
                 e.currentTarget.style.background = 'transparent'

package/src/components/SectionCard.jsx

@@ -1,3 +1,4 @@
+import { cloneElement, isValidElement, useId } from 'react'
 import { Box, Card, Divider, Group, Text, Title } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 
@@ -61,8 +62,10 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
                             {eyebrow}
                         </Text>
                     )}
+                    {/* h2: it comes right under the page's h1 (PageHeader). It was h3,
+                        which skipped a level for screen readers. The size stays. */}
                     <Title
-                        order={3}
+                        order={2}
                         fz={18}
                         fw={800}
                         lh={1.2}
@@ -94,6 +97,18 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
     )
 }
 
+/**
+ * The control is named by the row's label. The label is a Text next to the
+ * control, not a <label>, so without this a screen reader announced the input
+ * with no name at all (23 settings screens). A control that already has a
+ * label or aria-label keeps it.
+ */
+function labelled(control, labelId) {
+    if (!labelId || !isValidElement(control)) return control
+    if (control.props['aria-label'] || control.props['aria-labelledby'] || control.props.label) return control
+    return cloneElement(control, { 'aria-labelledby': labelId })
+}
+
 /**
  * One row of the block: label on the left, control on the right.
  *
@@ -102,6 +117,7 @@ export function SectionCard({ eyebrow, title, lead, action, children }) {
  * hairline would double up with the Card's frame.
  */
 export function Field({ label, help, control, last = false, align = 'center' }) {
+    const labelId = useId()
     /*
      * Two columns become one on phones.
      *
@@ -125,6 +141,7 @@ export function Field({ label, help, control, last = false, align = 'center' })
         >
             <Box miw={0}>
                 <Text
+                    id={labelId}
                     fz={13}
                     fw={700}
                     c="gray.9"
@@ -145,7 +162,7 @@ export function Field({ label, help, control, last = false, align = 'center' })
                     </Text>
                 )}
             </Box>
-            <Box style={{ justifySelf: side ? 'end' : 'stretch' }}>{control}</Box>
+            <Box style={{ justifySelf: side ? 'end' : 'stretch' }}>{labelled(control, label && labelId)}</Box>
         </Box>
     )
 }
@@ -155,6 +172,7 @@ export function Field({ label, help, control, last = false, align = 'center' })
  * doesn't fit on the right: a textarea, a dropzone, a whole table.
  */
 export function FieldStacked({ label, help, control, last = false }) {
+    const labelId = useId()
     return (
         <Box
             px={{ base: 16, sm: 24 }}
@@ -163,6 +181,7 @@ export function FieldStacked({ label, help, control, last = false }) {
         >
             {label && (
                 <Text
+                    id={labelId}
                     fz={13}
                     fw={700}
                     c="gray.9"
@@ -184,7 +203,7 @@ export function FieldStacked({ label, help, control, last = false }) {
                     {help}
                 </Text>
             )}
-            {control}
+            {labelled(control, label && labelId)}
         </Box>
     )
 }

package/src/components/notify-theme.js

@@ -55,7 +55,7 @@ export const notificationTheme = {
         styles: theme => ({
             root: {
                 boxShadow: 'none',
-                border: `1px solid ${theme.colors.gray[2]}`,
+                border: '1px solid var(--mantine-color-gray-2)',
                 '--notification-radius': '0',
             },
             icon: {
@@ -79,11 +79,11 @@ export const notificationTheme = {
                 fontWeight: 800,
                 fontSize: '13px',
                 letterSpacing: '-0.02em',
-                color: theme.colors.gray[9],
+                color: 'var(--mantine-color-gray-9)',
             },
             description: {
                 fontSize: '13px',
-                color: theme.colors.gray[6],
+                color: 'var(--mantine-color-gray-6)',
             },
         }),
     },

package/src/theme.js

@@ -19,6 +19,10 @@ import { notificationTheme } from './components/notify-theme'
  * same as the components-kit's; the two files must move together.
  */
 export const panelTheme = createTheme({
+    // Mantine's own transitions (Modal, Menu, Popover, Notification) follow
+    // "Reduzir movimento" too, not only ours.
+    respectReducedMotion: true,
+
     fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
     fontFamilyMonospace: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
 
@@ -272,7 +276,7 @@ export const panelTheme = createTheme({
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         /**
@@ -290,35 +294,35 @@ export const panelTheme = createTheme({
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         Textarea: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         Select: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: (theme, props) => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         NumberInput: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: { border: `1px solid var(--mantine-color-gray-2)` },
+                input: { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         Autocomplete: {
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: { border: `1px solid var(--mantine-color-gray-2)` },
+                input: { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         /**
@@ -343,7 +347,7 @@ export const panelTheme = createTheme({
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
                 input: {
-                    border: `1px solid var(--mantine-color-gray-2)`,
+                    border: `1px solid var(--mantine-color-gray-3)`,
                     minHeight: rem(36),
                     display: 'flex',
                     alignItems: 'center',
@@ -356,7 +360,7 @@ export const panelTheme = createTheme({
             defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
             styles: theme => ({
                 label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
-                input: { border: `1px solid var(--mantine-color-gray-2)` },
+                input: { border: `1px solid var(--mantine-color-gray-3)` },
             }),
         },
         SegmentedControl: {
@@ -382,7 +386,7 @@ export const panelTheme = createTheme({
                     fontSize: rem(10),
                     fontWeight: 700,
                     color: "var(--mantine-color-gray-5)",
-                    backgroundColor: theme.white,
+                    backgroundColor: 'var(--mantine-color-white)',
                     border: `1px solid var(--mantine-color-gray-2)`,
                     borderBottomColor: "var(--mantine-color-gray-2)",
                     boxShadow: 'none',

package/src/tokens.css

@@ -90,23 +90,41 @@
  * runtime, after this sheet.
  */
 @media (prefers-contrast: more) {
+    /* Contraste aumentado: a rampa inteira desloca e continua em ORDEM — cada
+       degrau mais forte que o anterior —, e a borda passa de 3:1 sobre a base,
+       o cartão e o menu. Vermelho e verde ganham a sua variante. Até
+       14/10/2026 o corpo ficava mais forte que o dado e a borda seguia abaixo
+       de 3:1. */
     :root:root:root[data-mantine-color-scheme='dark'] {
-        /* No escuro o deslocamento é para o claro: o filete aparece, o label
-           e a legenda sobem um degrau. */
-        --mantine-color-gray-2: #3a444d;
-        --mantine-color-gray-3: #4b5563;
+        --mantine-color-gray-2: #6b7582;
+        --mantine-color-gray-3: #7b8591;
         --mantine-color-gray-4: #b6bec8;
-        --mantine-color-gray-5: #d3d8de;
-        --mantine-color-gray-6: #e5e7eb;
+        --mantine-color-gray-5: #c4cad2;
+        --mantine-color-gray-6: #d3d8de;
+        --mantine-color-gray-7: #e5e7eb;
+        --mantine-color-gray-8: #f3f4f6;
+        --mantine-color-gray-9: #ffffff;
+        --mantine-color-red-6: #ffa8a8;
+        --mantine-color-red-7: #ffc9c9;
+        --mantine-color-red-filled: #ffa8a8;
+        --mantine-color-green-6: #4ade80;
+        --mantine-color-green-7: #86efac;
     }
 
     :root:root[data-mantine-color-scheme='light'],
     :root:root:not([data-mantine-color-scheme]) {
-        --mantine-color-gray-2: #9ca3af;
-        --mantine-color-gray-3: #9ca3af;
+        --mantine-color-gray-2: #878e99;
+        --mantine-color-gray-3: #7b838e;
         --mantine-color-gray-4: #4b5563;
-        --mantine-color-gray-5: #374151;
+        --mantine-color-gray-5: #414a57;
         --mantine-color-gray-6: #374151;
+        --mantine-color-gray-7: #252d38;
+        --mantine-color-gray-8: #1a222b;
+        --mantine-color-gray-9: #0b0f12;
+        --mantine-color-red-6: #c92a2a;
+        --mantine-color-red-7: #a61e1e;
+        --mantine-color-green-6: #15803d;
+        --mantine-color-green-7: #166534;
     }
 }
 
@@ -166,7 +184,7 @@
     --mantine-color-gray-1: #12181d; /* palco alternado, hover */
     --mantine-color-gray-2: #222a31; /* filete */
     --mantine-color-gray-3: #2f3840; /* borda forte, desabilitado */
-    --mantine-color-gray-4: #7d8794; /* label caixa alta — 5,3:1 */
+    --mantine-color-gray-4: #8a94a0; /* label caixa alta — 6,3:1 na base, 4,7:1 no menu */
     --mantine-color-gray-5: #98a1ac; /* legenda — 7,4:1 */
     --mantine-color-gray-6: #b6bec8; /* corpo — 10,3:1 */
     --mantine-color-gray-7: #d3d8de; /* dado — 13,4:1 */
@@ -233,3 +251,58 @@
 :root[data-mantine-color-scheme='dark'] img[data-invert-dark]:not([data-keep-colors]) {
     filter: invert(1) hue-rotate(180deg);
 }
+
+/* ===========================================================================
+ * Revisão de 14/10/2026 contra as diretrizes da Apple (16-apple.md).
+ * =========================================================================== */
+
+/* O realce de linha e de item funciona em QUALQUER superfície. Era gray.1 —
+   no escuro, um degrau da base: dentro de um cartão ou de um menu, o item
+   destacado afundava abaixo da própria superfície. Uma tinta de 6% do preto
+   do sistema escurece no claro e clareia no escuro, sobre o que estiver
+   embaixo. */
+:root {
+    --rlg-hover: color-mix(in srgb, var(--mantine-color-gray-9) 6%, transparent);
+    --rlg-head: color-mix(in srgb, var(--mantine-color-gray-9) 3%, transparent);
+}
+
+/* Alvo de toque também em notebook com tela de toque (que se declara
+   "ponteiro fino") e em mais controles: item de navegação, caixa de seleção,
+   chave, abas, paginação, menu. */
+@media (any-pointer: coarse) {
+    .mantine-Button-root,
+    .mantine-ActionIcon-root,
+    .mantine-CloseButton-root,
+    .mantine-Burger-root,
+    .mantine-NavLink-root,
+    .mantine-Tabs-tab,
+    .mantine-Pagination-control,
+    .mantine-Menu-item,
+    .mantine-SegmentedControl-control {
+        min-height: 44px;
+    }
+    .mantine-ActionIcon-root,
+    .mantine-CloseButton-root,
+    .mantine-Burger-root,
+    .mantine-Pagination-control {
+        min-width: 44px;
+    }
+    /* O selo sobe para 11px no toque: 10px fica abaixo do mínimo da Apple
+       para texto em tela de celular. */
+    [data-tag] {
+        font-size: 11px !important;
+    }
+}
+
+/* Menos movimento, sem perder o esmaecimento. A Apple pede que deslocamento
+   vire esmaecimento, não que tudo pare: animações em laço param, a rolagem
+   deixa de ser suave, e o que é cor e opacidade continua. */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-iteration-count: 1 !important;
+        animation-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}