rl-core-front 0.19.6 → 0.19.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.19.6",
+  "version": "0.19.7",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/column-visibility-modal.tsx

@@ -81,7 +81,7 @@ export function ColumnVisibilityModal({
           {t("table.columnsHint")}
         </p>
 
-        <div className="flex max-h-[55vh] flex-col divide-y divide-border overflow-y-auto">
+        <div className="flex max-h-[55vh] flex-col divide-y divide-border overflow-y-auto overscroll-contain">
           <div className="flex items-center justify-between py-3">
             <span className="text-sm font-semibold">{t("table.columns")}</span>
             <Switch checked={areAllVisible} onCheckedChange={toggleAll} />

package/src/components/ui/combobox.tsx

@@ -422,7 +422,7 @@ export function Combobox({
          * campo sem cobri-lo.
          */
         className={cn(
-          "max-h-[min(18rem,var(--radix-dropdown-menu-content-available-height))] w-(--radix-dropdown-menu-trigger-width) overflow-y-auto p-1",
+          "max-h-[min(18rem,var(--radix-dropdown-menu-content-available-height))] w-(--radix-dropdown-menu-trigger-width) overflow-y-auto overscroll-contain p-1",
           !multiple && "data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height)",
         )}
         align="start"

package/src/components/ui/dialog.tsx

@@ -515,7 +515,7 @@ const DialogForm = React.forwardRef<
           vertical cortava a borda de baixo do último campo — que é o que
           aparece em todo modal com um campo colado no rodapé.
           `-m-1` devolve o recuo para o conteúdo seguir alinhado. */}
-      <div className="-m-1 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-1 [scrollbar-width:thin]">
+      <div className="-m-1 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain p-1">
         {hasFooter ? items.slice(0, footerAt) : items}
       </div>
       {hasFooter && items.slice(footerAt)}

package/src/components/ui/field.tsx

@@ -6,13 +6,31 @@ interface FieldProps {
   label?: string;
   error?: string;
   htmlFor?: string;
+  /**
+   * Marca o rótulo com o "*" de obrigatório.
+   *
+   * Fica no rótulo, e não no controle, porque é o único lugar comum a todos
+   * eles: `Input`, `Combobox`, `MoneyInput` e `DatePicker` desenham a caixa de
+   * um jeito cada um, e a marca precisa aparecer no mesmo ponto nos quatro.
+   */
+  required?: boolean;
   children: React.ReactNode;
 }
 
-export function Field({ label, error, htmlFor, children }: FieldProps): JSX.Element {
+export function Field({
+  label,
+  error,
+  htmlFor,
+  required,
+  children,
+}: FieldProps): JSX.Element {
   return (
     <div className="space-y-1.5">
-      {label && <Label htmlFor={htmlFor}>{label}</Label>}
+      {label && (
+        <Label htmlFor={htmlFor} required={required}>
+          {label}
+        </Label>
+      )}
       {children}
       {error && <p className="text-xs font-medium text-destructive">{error}</p>}
     </div>

package/src/components/ui/filter-field.tsx

@@ -140,7 +140,7 @@ export function FilterFieldControl({
       <fieldset className="space-y-2">
         <legend className="text-sm font-medium">{label}</legend>
         {field.options?.length ? (
-          <div className="max-h-44 space-y-2 overflow-y-auto rounded-md border border-border p-3">
+          <div className="max-h-44 space-y-2 overflow-y-auto overscroll-contain rounded-md border border-border p-3">
             {field.options.map((option) => (
               <label
                 key={option.value}

package/src/components/ui/label.tsx

@@ -5,10 +5,23 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  /**
+   * Campo obrigatório: acrescenta o "*" vermelho depois do texto.
+   *
+   * A marca é só visual (`aria-hidden`) — quem usa leitor de tela ouve a
+   * obrigatoriedade do próprio controle, então o campo também precisa do
+   * `required`/`aria-required`. Um asterisco lido em voz alta no meio do
+   * rótulo não diz nada; o atributo no controle diz.
+   */
+  required?: boolean;
+}
+
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
+  LabelProps
+>(({ className, required, children, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
     className={cn(
@@ -16,7 +29,14 @@ const Label = React.forwardRef<
       className,
     )}
     {...props}
-  />
+  >
+    {children}
+    {required && (
+      <span aria-hidden className="ml-0.5 text-destructive">
+        *
+      </span>
+    )}
+  </LabelPrimitive.Root>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 

package/src/components/ui/popover.tsx

@@ -45,7 +45,7 @@ const PopoverContent = React.forwardRef<
         // com a última linha rente ao fim da tela.
         collisionPadding={8}
         className={cn(
-          "z-50 max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "z-50 max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           className,
         )}
         {...props}

package/src/components/ui/sheet.tsx

@@ -66,7 +66,7 @@ const SheetBody = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
-  <div className={cn("flex-1 overflow-y-auto", className)} {...props} />
+  <div className={cn("flex-1 overflow-y-auto overscroll-contain", className)} {...props} />
 );
 SheetBody.displayName = "SheetBody";
 

package/src/features/login/components/login-form.tsx

@@ -46,7 +46,7 @@ export function LoginForm({
       onSubmit={handleSubmit((d) => onSubmit(d.email, d.password))}
       className="flex flex-col gap-4"
     >
-      <Field label={t("auth.email")} error={errors.email?.message}>
+      <Field label={t("auth.email")} error={errors.email?.message} required>
         <Input
           type="email"
           autoComplete="email"
@@ -55,7 +55,7 @@ export function LoginForm({
           {...register("email")}
         />
       </Field>
-      <Field label={t("auth.password")} error={errors.password?.message}>
+      <Field label={t("auth.password")} error={errors.password?.message} required>
         <PasswordField
           autoComplete="current-password"
           autoFocus={!!defaultEmail}

package/src/features/login/components/two-factor-setup.tsx

@@ -64,7 +64,7 @@ export function TwoFactorSetup({
         onSubmit={handleSubmit((d) => onConfirm(d.code))}
         className="flex flex-col gap-4"
       >
-        <Field label={t("auth.codeApp")} error={errors.code?.message}>
+        <Field label={t("auth.codeApp")} error={errors.code?.message} required>
           <Input
             autoFocus
             inputMode="numeric"

package/src/features/login/components/two-factor-verify.tsx

@@ -35,7 +35,7 @@ export function TwoFactorVerify({ loading, onVerify, onRequestEmail }: Props): J
         onSubmit={handleSubmit((d) => onVerify(d.code))}
         className="flex flex-col gap-4"
       >
-        <Field label={t("auth.codeAny")} error={errors.code?.message}>
+        <Field label={t("auth.codeAny")} error={errors.code?.message} required>
           <Input autoFocus {...register("code")} />
         </Field>
         <Button type="submit" size="lg" disabled={loading}>

package/src/features/profile/force-password-change.tsx

@@ -79,6 +79,7 @@ export function ForcePasswordChange({
           <Field
             label={t("profile.currentPassword")}
             error={errors.currentPassword?.message}
+            required
           >
             <PasswordField
               error={!!errors.currentPassword}
@@ -88,6 +89,7 @@ export function ForcePasswordChange({
           <Field
             label={t("profile.newPassword")}
             error={errors.newPassword?.message}
+            required
           >
             <PasswordField
               error={!!errors.newPassword}
@@ -98,6 +100,7 @@ export function ForcePasswordChange({
           <Field
             label={t("profile.confirmPassword")}
             error={errors.confirm?.message}
+            required
           >
             <PasswordField
               error={!!errors.confirm}

package/src/features/profile/profile-screen.tsx

@@ -249,13 +249,13 @@ export function ProfileScreen(): JSX.Element {
             </div>
 
             <h2 className="text-lg font-semibold">{t("profile.data")}</h2>
-            <Field label={t("users.name")} error={formErrors.name}>
+            <Field label={t("users.name")} error={formErrors.name} required>
               <Input
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
               />
             </Field>
-            <Field label={t("users.lastName")} error={formErrors.lastName}>
+            <Field label={t("users.lastName")} error={formErrors.lastName} required>
               <Input
                 value={form.lastName}
                 onChange={(e) => setForm({ ...form, lastName: e.target.value })}
@@ -354,6 +354,7 @@ export function ProfileScreen(): JSX.Element {
                 <Field
                   label={t("profile.currentPassword")}
                   error={errors.currentPassword?.message}
+                  required
                 >
                   <PasswordField
                     error={!!errors.currentPassword}
@@ -363,6 +364,7 @@ export function ProfileScreen(): JSX.Element {
                 <Field
                   label={t("profile.newPassword")}
                   error={errors.newPassword?.message}
+                  required
                 >
                   <PasswordField
                     error={!!errors.newPassword}
@@ -373,6 +375,7 @@ export function ProfileScreen(): JSX.Element {
                 <Field
                   label={t("profile.confirmPassword")}
                   error={errors.confirm?.message}
+                  required
                 >
                   <PasswordField
                     error={!!errors.confirm}

package/src/features/rbac/panels/catalog-panel.tsx

@@ -219,7 +219,7 @@ export function CatalogPanel({
             </DialogTitle>
           </DialogHeader>
           <DialogForm onSubmit={() => void save()}>
-            <Field label="Name">
+            <Field label="Name" required>
               <Input
                 placeholder={namePlaceholder}
                 value={form.name}

package/src/features/rbac/panels/groups-panel.tsx

@@ -250,7 +250,7 @@ export function GroupsPanel(): JSX.Element {
             </DialogTitle>
           </DialogHeader>
           <DialogForm onSubmit={() => void save()}>
-            <Field label={t("users.name")}>
+            <Field label={t("users.name")} required>
               <Input
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}

package/src/features/rbac/panels/permissions-panel.tsx

@@ -180,7 +180,7 @@ export function PermissionsPanel(): JSX.Element {
             </DialogTitle>
           </DialogHeader>
           <DialogForm onSubmit={() => void save()}>
-            <Field label="Code (resource:action:scope)">
+            <Field label="Code (resource:action:scope)" required>
               <Input
                 placeholder="users:read:any"
                 value={form.code}

package/src/features/rbac/panels/roles-panel.tsx

@@ -201,7 +201,7 @@ export function RolesPanel(): JSX.Element {
           </DialogHeader>
           <DialogForm onSubmit={handleSubmit((values) => void save(values))}>
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <Field label={t("rbac.roleName")} error={errors.name?.message}>
+              <Field label={t("rbac.roleName")} error={errors.name?.message} required>
                 <Input {...register("name")} />
               </Field>
               <Field

package/src/features/recovery/forgot-password-screen.tsx

@@ -48,7 +48,7 @@ export function ForgotPasswordScreen(): JSX.Element {
             <p className="text-sm text-muted-foreground">
               {t("recovery.forgotHint")}
             </p>
-            <Field label={t("auth.email")} error={errors.email?.message}>
+            <Field label={t("auth.email")} error={errors.email?.message} required>
               <Input type="email" autoFocus {...register("email")} />
             </Field>
             <Button type="submit" size="lg" disabled={loading}>

package/src/features/recovery/reset-password-screen.tsx

@@ -159,6 +159,7 @@ export function ResetPasswordScreen(): JSX.Element {
                 <Field
                   label={t("recovery.newPassword")}
                   error={errors.newPassword?.message}
+                  required
                 >
                   <PasswordField
                     error={!!errors.newPassword}
@@ -169,6 +170,7 @@ export function ResetPasswordScreen(): JSX.Element {
                 <Field
                   label={t("recovery.confirmPassword")}
                   error={errors.confirm?.message}
+                  required
                 >
                   <PasswordField
                     error={!!errors.confirm}

package/src/features/users/components/user-form-dialog.tsx

@@ -135,7 +135,7 @@ export function UserFormDialog({
 
         <DialogForm onSubmit={submit}>
           <div className="flex max-h-[70vh] flex-col gap-4 overflow-y-auto px-1">
-            <Field label={t("users.name")} error={errors.name?.message}>
+            <Field label={t("users.name")} error={errors.name?.message} required>
               <Input {...register("name")} />
             </Field>
             <Field label={t("users.lastName")} error={errors.lastName?.message}>
@@ -154,7 +154,7 @@ export function UserFormDialog({
                 </Field>
               )}
             />
-            <Field label={t("users.email")} error={errors.email?.message}>
+            <Field label={t("users.email")} error={errors.email?.message} required>
               <Input type="email" {...register("email")} />
             </Field>
             {!isEdit && (
@@ -169,6 +169,7 @@ export function UserFormDialog({
                   <Field
                     label={t("users.team")}
                     error={errors.groupId?.message}
+                    required
                   >
                     <SimpleSelect
                       value={field.value ?? ""}

package/src/styles/core.css

@@ -180,6 +180,54 @@
     letter-spacing: -0.02em;
   }
 
+  /*
+   * Barra de rolagem — uma só, em todo lugar.
+   *
+   * A nativa é grossa (15px no macOS/Windows), tem trilho pintado e ignora o
+   * raio do que está rolando: dentro de um menu de 18rem, ela ocupa um décimo
+   * da largura e corta o canto arredondado. Aqui ela vira uma pílula fina sem
+   * trilho, na cor do texto secundário — presente enquanto se rola, discreta
+   * quando parada.
+   *
+   * As duas declarações não se somam: `scrollbar-width`/`scrollbar-color` são
+   * o padrão (Firefox, Chrome 121+, Safari 18.4+) e, onde valem, o browser
+   * ignora os pseudo-elementos `::-webkit-scrollbar` abaixo — que ficam para
+   * o WebKit mais antigo. Manter as duas é o que faz a barra ser igual nos
+   * dois lados.
+   *
+   * A cor sai de `--muted-foreground`, então ela acompanha o tema sozinha: no
+   * escuro clareia, no claro escurece, sem uma segunda regra em `.dark`.
+   */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  /*
+   * A borda transparente com `background-clip: content-box` é o que desenha a
+   * folga dos dois lados da pílula: sem ela a barra encosta na borda do menu.
+   */
+  ::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.35);
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.55);
+  }
+  /* O quadradinho onde as duas barras se encontram, que fica cinza por padrão. */
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   /*
    * Preenchimento automático (gerenciador de senhas). O `background-color` do
    * campo preenchido é intocável por CSS de autor — o Chrome o declara com