@ciromaciel/dashboard-kit 1.9.1 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.9.1",
+    "version": "1.11.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/DeleteModal.jsx

@@ -313,36 +313,44 @@ export function DeleteModal({
              * is also the modal's only rule: above it everything that is read
              * and typed, below it the act.
              *
-             * Destructive on the LEFT — §Formulários: "Submit à direita;
-             * destrutivo à esquerda". The submit position is reserved for what
-             * moves forward, and this does the opposite.
+             * Until 14/10/2026 the destructive button sat on the LEFT, filled,
+             * by the forms rule "destrutivo à esquerda". That rule is for a
+             * form whose main act is saving; here deleting IS the act, and the
+             * alert rule applies instead.
              */}
             <Box
                 px={{ base: 24, md: 32 }}
                 py={20}
                 style={{ borderTop: 'var(--rlg-border)' }}
             >
+                {/* Cancel on the leading side, the destructive act on the
+                    trailing one, outlined — Apple's alert rule, decided with
+                    the Ciro on 14/10/2026. The destructive button keeps its
+                    colour (it says what kind of act this is) but not the fill
+                    of a primary action: deleting is never the step the screen
+                    pushes toward. */}
                 <Group
-                    justify="space-between"
+                    justify="flex-end"
                     gap={8}
                 >
+                    <Button
+                        variant="subtle"
+                        color="gray.7"
+                        onClick={onClose}
+                        disabled={loading}
+                    >
+                        Cancelar
+                    </Button>
                     <Button
                         className="rlg-danger"
                         color="red.7"
+                        variant="outline"
                         onClick={confirm}
                         disabled={!canDelete}
                         loading={loading}
                     >
                         {confirmLabel}
                     </Button>
-                    <Button
-                        variant="subtle"
-                        color="gray.7"
-                        onClick={onClose}
-                        disabled={loading}
-                    >
-                        Cancelar
-                    </Button>
                 </Group>
             </Box>
         </Modal>

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/components/undoable.jsx

@@ -0,0 +1,131 @@
+import { Button, Group, Text } from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+
+import { notify } from './notify'
+
+/** How long the undo stays on offer. Long enough to read one line and reach the button. */
+export const UNDO_MS = 6000
+
+let sequence = 0
+const pending = []
+
+/**
+ * Delete now, offer Desfazer, send the request only when the offer ends.
+ *
+ * Apple's rule (decided with the Ciro on 14/10/2026): for an action people
+ * perform often, undo beats confirmation. A dialog or a hold is friction paid on
+ * every delete to protect the rare mistake; undo charges nothing and still
+ * catches the mistake — after it happens, when the person can see it.
+ *
+ * Nothing is sent to the server while the offer stands. The item leaves the
+ * screen (`onHide`), the request (`onCommit`) waits `ms`, and Desfazer only puts
+ * the item back (`onRestore`). If the request fails, the item comes back too and
+ * the error stays on screen.
+ *
+ * ⌘Z / Ctrl+Z undoes the latest pending delete, outside text fields — the
+ * shortcut every Apple app gives undo.
+ *
+ * Closing the toast keeps the delete and sends it at once. Leaving the page
+ * sends every pending delete (`pagehide`).
+ *
+ * NOT for credentials or connections: revoking a key or a webhook has to take
+ * effect at once, and those keep the hold. See `10-modal-de-exclusao.md`.
+ *
+ * @param {object}   options
+ * @param {string}   options.message    What left, in a few words: "Campo excluído".
+ * @param {Function} options.onCommit   Sends the delete. May return a promise.
+ * @param {Function} [options.onHide]   Takes the item off the screen.
+ * @param {Function} [options.onRestore] Puts it back.
+ * @param {number}   [options.ms]
+ * @returns {{ undo: Function, commit: Function }}
+ */
+export function undoable({ message, onCommit, onHide, onRestore, ms = UNDO_MS }) {
+    const id = `rlg-undo-${++sequence}`
+    let isSettled = false
+
+    const settle = () => {
+        isSettled = true
+        clearTimeout(timer)
+        const index = pending.indexOf(entry)
+        if (index >= 0) pending.splice(index, 1)
+        notifications.hide(id)
+    }
+
+    const commit = async () => {
+        if (isSettled) return
+        settle()
+        try {
+            await onCommit()
+        } catch (error) {
+            onRestore?.()
+            notify.error('Não excluiu', error?.message || 'Tente de novo.')
+        }
+    }
+
+    const undo = () => {
+        if (isSettled) return
+        settle()
+        onRestore?.()
+    }
+
+    const entry = { undo, commit }
+    onHide?.()
+    pending.push(entry)
+    listen()
+    const timer = setTimeout(commit, ms)
+
+    notifications.show({
+        id,
+        color: 'gray',
+        autoClose: false,
+        onClose: commit,
+        message: (
+            <Group
+                justify="space-between"
+                wrap="nowrap"
+                gap={12}
+            >
+                <Text
+                    fz={13}
+                    c="inherit"
+                >
+                    {message}
+                </Text>
+                <Button
+                    size="compact-sm"
+                    variant="subtle"
+                    color="gray.9"
+                    onClick={undo}
+                >
+                    Desfazer
+                </Button>
+            </Group>
+        ),
+    })
+
+    return entry
+}
+
+let isListening = false
+
+function listen() {
+    if (isListening || typeof window === 'undefined') return
+    isListening = true
+
+    window.addEventListener('keydown', event => {
+        if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.key.toLowerCase() !== 'z') return
+        if (pending.length === 0 || isEditable(event.target)) return
+        event.preventDefault()
+        pending.at(-1).undo()
+    })
+
+    window.addEventListener('pagehide', () => {
+        for (const entry of [...pending]) entry.commit()
+    })
+}
+
+/** A text field keeps its own ⌘Z: it undoes typing, not a delete. */
+function isEditable(target) {
+    if (!target || typeof target.closest !== 'function') return false
+    return Boolean(target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]'))
+}

package/src/index.js

@@ -64,6 +64,7 @@ export { DangerZone } from './components/DangerZone'
 export { ZenLabel } from './components/ZenLabel'
 export { Tag } from './components/Tag'
 export { notify } from './components/notify'
+export { undoable, UNDO_MS } from './components/undoable'
 export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'
 export { panelTheme } from './theme'
 export { Wordmark } from './components/Wordmark'

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;
+    }
+}