@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,125 @@
+import './Calendar.css';
+/**
+ * Evento do Calendar.
+ * @property {string} id - Identidade do evento (opcional)
+ * @property {string} date - Dia do evento: `YYYY-MM-DD` (ou um `Date`)
+ * @property {string} title - Texto do evento
+ * @property {string} color - Cor de DADO do evento: nome de um token (`--umds-primitive-blue-pure`) ou uma cor. Padrão: o primário. A cor vai no fundo suave e na barra do lado; o texto é sempre escuro (a cor nunca fica sozinha).
+ * @property {string} time - Horário, mostrado antes do título (ex.: "09:00")
+ */
+export interface CalendarEvent {
+    id?: string;
+    date: any;
+    title: string;
+    color?: string;
+    time?: string;
+    [key: string]: any;
+}
+/** Um dia da grade, já pronto para desenhar. */
+/** Um dia da grade, já pronto para desenhar. */
+export interface CalendarDayCell {
+    iso: string;
+    day: number;
+    outside: boolean;
+    today: boolean;
+    selected: boolean;
+    tabIndex: number;
+    label: string;
+    classes: string;
+    visible: CalendarEvent[];
+    hidden: number;
+    moreText: string;
+    moreAria: string;
+    [key: string]: any;
+}
+/**
+ * Calendar — agenda com eventos por dia, em visão de mês ou de semana.
+ *
+ * `events` é uma lista plana (`{ date, title, color? }`): o componente agrupa
+ * por dia. A cor é cor de DADO (um token, como o do `ColorPicker`), aplicada num
+ * fundo suave com uma barra do lado; o texto do evento é sempre escuro, então a
+ * cor nunca é a única informação.
+ *
+ * Mês: cada dia mostra até `maxVisible` eventos e um "+N" para o resto
+ * (`onMoreClick` recebe o dia e os eventos escondidos). O corte é por QUANTIDADE,
+ * não por altura. Semana: sete colunas, todos os eventos de cada dia.
+ *
+ * É uma grade acessível (`role="grid"`): um Tab entra no dia em foco (hoje, ou o
+ * primeiro), as setas movem de dia (mudando de mês ou de semana se for preciso),
+ * Home e End vão às pontas da semana, PageUp e PageDown trocam de mês (ou de
+ * semana), Enter e Espaço acionam `onDayClick`. Os eventos do dia em foco entram
+ * na ordem de Tab depois dele.
+ *
+ * A data mostrada (`date`) e a visão (`view`) são controláveis (`onDateChange`,
+ * `onViewChange`) ou internas (`defaultDate`, `defaultView`). O cabeçalho aceita
+ * o slot `headerStart` (um filtro de escopo, à esquerda) e `headerEnd` (a
+ * legenda, à direita). Nomes de mês e de dia saem do `Intl` no `locale` pedido;
+ * os demais textos são props.
+ * @property {CalendarEvent[]} events - Eventos (lista plana)
+ * @property {string} view - Visão: 'month' | 'week' (controlada)
+ * @property {string} defaultView - Visão inicial (não controlada; padrão 'month')
+ * @property {string} date - Data de referência `YYYY-MM-DD`: o mês ou a semana que ela contém é o que se vê (controlada)
+ * @property {string} defaultDate - Data inicial (não controlada; padrão hoje)
+ * @property {string} selectedDate - Dia marcado como selecionado (`YYYY-MM-DD`)
+ * @property {string} today - O "hoje" do calendário (`YYYY-MM-DD`; padrão a data do sistema). Útil em testes e em demonstração.
+ * @property {number} weekStartsOn - Primeiro dia da semana: 0 domingo (padrão) | 1 segunda
+ * @property {number} maxVisible - Eventos por dia na visão de mês antes do "+N" (padrão 3)
+ * @property {string} locale - Idioma dos nomes de mês e de dia (padrão 'pt-BR')
+ * @property {string} ariaLabel - Nome acessível da grade (padrão: o título, ex.: "Maio 2026")
+ * @property {string} previousLabel - Nome do botão de voltar (padrão "Anterior")
+ * @property {string} nextLabel - Nome do botão de avançar (padrão "Próximo")
+ * @property {string} todayLabel - Texto do botão de hoje (padrão "Hoje")
+ * @property {string} monthLabel - Texto da visão de mês (padrão "Mês")
+ * @property {string} weekLabel - Texto da visão de semana (padrão "Semana")
+ * @property {string} viewLabel - Nome do seletor de visão (padrão "Visão")
+ * @property {boolean} hideViewSwitcher - Esconde o seletor Mês/Semana
+ * @property {string} moreLabel - Texto do "+N"; `{count}` vira o número (padrão "+{count}")
+ * @property {string} moreAriaLabel - Nome do "+N"; `{count}` e `{date}` são trocados (padrão "{count} eventos a mais em {date}")
+ * @property {function} dayLabel - Nome acessível de cada dia: `(iso, quantidade) => texto` (padrão: "sexta-feira, 15 de maio de 2026, 2 eventos", no `locale`)
+ * @property {function} onDayClick - Clique (ou Enter) num dia: recebe `YYYY-MM-DD`
+ * @property {function} onEventClick - Clique num evento: recebe o evento
+ * @property {function} onMoreClick - Clique no "+N": recebe o dia e a lista dos eventos escondidos
+ * @property {function} onDateChange - Mudou a data de referência (navegação): recebe `YYYY-MM-DD`
+ * @property {function} onViewChange - Mudou a visão: recebe 'month' | 'week'
+ * @property {string} className - Classes CSS adicionais
+ * @slot headerStart - Cabeçalho, à esquerda: um filtro de escopo.
+ * @slot headerEnd - Cabeçalho, antes do seletor de visão: a legenda.
+ * @quandoUsar Mostrar prazos, vencimentos e compromissos distribuídos no tempo: agenda de documentos, de tarefas, de assinaturas.
+ * @quandoNaoUsar Para escolher UMA data num campo, use `DatePicker`. Para uma sequência de acontecimentos sem grade de dias, use `Timeline`. Para uma grade de horas (agenda com horário de início e fim), este componente não serve: não tem eixo de horas.
+ */
+/** Um dia da grade, já pronto para desenhar. */
+export interface CalendarProps {
+    events?: CalendarEvent[];
+    view?: "month" | "week";
+    defaultView?: "month" | "week";
+    date?: string;
+    defaultDate?: string;
+    selectedDate?: string;
+    today?: string;
+    weekStartsOn?: 0 | 1;
+    maxVisible?: number;
+    locale?: string;
+    ariaLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    todayLabel?: string;
+    monthLabel?: string;
+    weekLabel?: string;
+    viewLabel?: string;
+    hideViewSwitcher?: boolean;
+    moreLabel?: string;
+    moreAriaLabel?: string;
+    dayLabel?: (iso: string, count: number) => string;
+    className?: string;
+    /** Slot `headerStart`: à esquerda do cabeçalho. */
+    headerStart?: any;
+    /** Slot `headerEnd`: à direita, antes do seletor de visão. */
+    headerEnd?: any;
+    onDayClick?: (iso: string) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onMoreClick?: (iso: string, hidden: CalendarEvent[]) => void;
+    onDateChange?: (iso: string) => void;
+    onViewChange?: (view: "month" | "week") => void;
+}
+declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,320 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Calendar.css';
+import { useState, useRef, useEffect } from "react";
+import { faChevronLeft, faChevronRight, } from "@fortawesome/free-solid-svg-icons";
+import Button from "../Button/Button";
+import Icon from "../Icon/Icon";
+import SegmentedControl from "../SegmentedControl/SegmentedControl";
+import { addDays, addMonths, isSameMonth, monthMatrix, normalizeIso, parseIso, startOfWeek, toIso, weekDays, } from "../../utils/calendario";
+function Calendar(props) {
+    const rootRef = useRef(null);
+    const focoPendenteRef = useRef("");
+    const [internalDate, setInternalDate] = useState(() => "");
+    const [internalView, setInternalView] = useState(() => props.defaultView === "week" ? "week" : "month");
+    const [focusIso, setFocusIso] = useState(() => "");
+    function todayIso() {
+        return normalizeIso(props.today) || toIso(new Date());
+    }
+    function refIso() {
+        const informada = normalizeIso(props.date) ||
+            normalizeIso(internalDate) ||
+            normalizeIso(props.defaultDate);
+        return informada || todayIso();
+    }
+    function viewValue() {
+        const bruta = props.view !== undefined ? props.view : internalView;
+        return bruta === "week" ? "week" : "month";
+    }
+    function weekStart() {
+        return props.weekStartsOn === 1 ? 1 : 0;
+    }
+    function localeText() {
+        return props.locale || "pt-BR";
+    }
+    function limite() {
+        return props.maxVisible && props.maxVisible > 0 ? props.maxVisible : 3;
+    }
+    function rangeRows() {
+        return viewValue() === "week"
+            ? [weekDays(refIso(), weekStart())]
+            : monthMatrix(refIso(), weekStart());
+    }
+    function formatar(iso, opcoes) {
+        const texto = new Intl.DateTimeFormat(localeText(), opcoes).format(parseIso(iso));
+        const limpo = texto.replace(".", "");
+        return limpo.charAt(0).toUpperCase() + limpo.slice(1);
+    }
+    function titleText() {
+        if (viewValue() === "week") {
+            const dias = weekDays(refIso(), weekStart());
+            const formato = new Intl.DateTimeFormat(localeText(), {
+                day: "numeric",
+                month: "short",
+                year: "numeric",
+            });
+            const inicio = parseIso(dias[0]);
+            const fim = parseIso(dias[6]);
+            const anyFormato = formato;
+            return typeof anyFormato.formatRange === "function"
+                ? anyFormato.formatRange(inicio, fim)
+                : formato.format(inicio) + " – " + formato.format(fim);
+        }
+        return (formatar(refIso(), {
+            month: "long",
+        }) +
+            " " +
+            parseIso(refIso()).getFullYear());
+    }
+    function weekdayHeads() {
+        const base = rangeRows()[0] || [];
+        return base.map((iso) => ({
+            iso,
+            short: formatar(iso, {
+                weekday: "short",
+            }),
+            full: formatar(iso, {
+                weekday: "long",
+            }),
+        }));
+    }
+    function gridLabel() {
+        return props.ariaLabel || titleText();
+    }
+    function monthText() {
+        return props.monthLabel || "Mês";
+    }
+    function weekText() {
+        return props.weekLabel || "Semana";
+    }
+    function viewOptions() {
+        return [
+            {
+                value: "month",
+                label: monthText(),
+            },
+            {
+                value: "week",
+                label: weekText(),
+            },
+        ];
+    }
+    function rootClasses() {
+        return ["umds-calendar", "umds-calendar--" + viewValue(), props.className]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function tabIso() {
+        const todos = rangeRows().reduce((soma, linha) => soma.concat(linha), []);
+        const dentro = (iso) => todos.indexOf(iso) !== -1 &&
+            (viewValue() === "week" || isSameMonth(iso, refIso()));
+        if (focusIso && dentro(focusIso))
+            return focusIso;
+        if (dentro(todayIso()))
+            return todayIso();
+        return viewValue() === "week" ? todos[0] : refIso().slice(0, 8) + "01";
+    }
+    function eventMap() {
+        const mapa = {};
+        const lista = props.events || [];
+        for (let i = 0; i < lista.length; i++) {
+            const dia = normalizeIso(lista[i].date);
+            if (!dia)
+                continue;
+            if (!mapa[dia])
+                mapa[dia] = [];
+            mapa[dia].push(lista[i]);
+        }
+        for (const dia in mapa) {
+            mapa[dia].sort((a, b) => String(a.time || "").localeCompare(String(b.time || "")));
+        }
+        return mapa;
+    }
+    function nomeDoDia(iso, quantidade) {
+        if (props.dayLabel)
+            return props.dayLabel(iso, quantidade);
+        const data = new Intl.DateTimeFormat(localeText(), {
+            weekday: "long",
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+        }).format(parseIso(iso));
+        const eventos = quantidade === 0
+            ? "sem eventos"
+            : quantidade === 1
+                ? "1 evento"
+                : quantidade + " eventos";
+        return data + ", " + eventos;
+    }
+    function textoDoMais(quantidade) {
+        return (props.moreLabel || "+{count}").replace("{count}", String(quantidade));
+    }
+    function nomeDoMais(iso, quantidade) {
+        const modelo = props.moreAriaLabel || "{count} eventos a mais em {date}";
+        const data = new Intl.DateTimeFormat(localeText(), {
+            day: "numeric",
+            month: "long",
+        }).format(parseIso(iso));
+        return modelo
+            .replace("{count}", String(quantidade))
+            .replace("{date}", data);
+    }
+    function weeks() {
+        const hoje = todayIso();
+        const foco = tabIso();
+        const selecionado = normalizeIso(props.selectedDate);
+        const emSemana = viewValue() === "week";
+        return rangeRows().map((linha) => ({
+            key: linha[0],
+            days: linha.map((iso) => {
+                const doDia = eventMap()[iso] || [];
+                const fora = !emSemana && !isSameMonth(iso, refIso());
+                const visiveis = emSemana ? doDia : doDia.slice(0, limite());
+                const escondidos = doDia.length - visiveis.length;
+                return {
+                    iso,
+                    day: parseIso(iso).getDate(),
+                    outside: fora,
+                    today: iso === hoje,
+                    selected: iso === selecionado,
+                    tabIndex: iso === foco ? 0 : -1,
+                    label: nomeDoDia(iso, doDia.length),
+                    classes: [
+                        "umds-calendar__cell",
+                        fora ? "umds-calendar__cell--outside" : "",
+                        iso === hoje ? "umds-calendar__cell--today" : "",
+                        iso === selecionado ? "umds-calendar__cell--selected" : "",
+                    ]
+                        .filter(Boolean)
+                        .join(" "),
+                    visible: visiveis,
+                    hidden: escondidos,
+                    moreText: textoDoMais(escondidos),
+                    moreAria: nomeDoMais(iso, escondidos),
+                };
+            }),
+        }));
+    }
+    function corCss(cor) {
+        const base = cor || "--umds-semantic-color-primary-pure";
+        return base.indexOf("--") === 0 ? "var(" + base + ")" : base;
+    }
+    function eventStyle(evento) {
+        const cor = corCss(evento.color || "");
+        return {
+            borderLeftColor: cor,
+            backgroundColor: "color-mix(in srgb, " +
+                cor +
+                " 16%, var(--umds-semantic-color-background-white))",
+        };
+    }
+    function mudarData(iso) {
+        setInternalDate(iso);
+        if (props.onDateChange)
+            props.onDateChange(iso);
+    }
+    function mudarVisao(valor) {
+        const visao = valor === "week" ? "week" : "month";
+        if (visao === viewValue())
+            return;
+        setInternalView(visao);
+        if (props.onViewChange)
+            props.onViewChange(visao);
+    }
+    function handlePrevious() {
+        mudarData(viewValue() === "week" ? addDays(refIso(), -7) : addMonths(refIso(), -1));
+    }
+    function handleNext() {
+        mudarData(viewValue() === "week" ? addDays(refIso(), 7) : addMonths(refIso(), 1));
+    }
+    function handleToday() {
+        mudarData(todayIso());
+    }
+    function irParaDia(iso) {
+        const visivel = rangeRows().some((linha) => linha.indexOf(iso) !== -1);
+        const nesteMes = viewValue() === "week" || isSameMonth(iso, refIso());
+        if (!visivel || !nesteMes)
+            mudarData(iso);
+        if (iso === focusIso && visivel && nesteMes) {
+            focarDia(iso);
+            return;
+        }
+        setFocusIso(iso);
+        focoPendenteRef.current = iso;
+    }
+    function focarDia(iso) {
+        if (!rootRef.current)
+            return;
+        const celula = rootRef.current.querySelector('[data-date="' + iso + '"]');
+        if (celula)
+            celula.focus();
+    }
+    function handleCellKeyDown(event, iso) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        // Só o próprio dia navega: a tecla vinda de um evento dentro dele não.
+        if (event.target !== event.currentTarget)
+            return;
+        const tecla = event.key;
+        let alvo = "";
+        if (tecla === "ArrowLeft")
+            alvo = addDays(iso, -1);
+        else if (tecla === "ArrowRight")
+            alvo = addDays(iso, 1);
+        else if (tecla === "ArrowUp")
+            alvo = addDays(iso, -7);
+        else if (tecla === "ArrowDown")
+            alvo = addDays(iso, 7);
+        else if (tecla === "Home")
+            alvo = startOfWeek(iso, weekStart());
+        else if (tecla === "End")
+            alvo = addDays(startOfWeek(iso, weekStart()), 6);
+        else if (tecla === "PageUp")
+            alvo = viewValue() === "week" ? addDays(iso, -7) : addMonths(iso, -1);
+        else if (tecla === "PageDown")
+            alvo = viewValue() === "week" ? addDays(iso, 7) : addMonths(iso, 1);
+        else if (tecla === "Enter" || tecla === " ") {
+            event.preventDefault();
+            handleDayClick(iso);
+            return;
+        }
+        else
+            return;
+        event.preventDefault();
+        irParaDia(alvo);
+    }
+    function handleCellFocus(event, iso) {
+        // Só o foco no próprio dia conta: o foco num evento dentro dele não muda o dia.
+        if (event && event.target !== event.currentTarget)
+            return;
+        if (focusIso !== iso)
+            setFocusIso(iso);
+    }
+    function handleDayClick(iso) {
+        setFocusIso(iso);
+        if (props.onDayClick)
+            props.onDayClick(iso);
+    }
+    function handleEventClick(event, evento) {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+        if (props.onEventClick)
+            props.onEventClick(evento);
+    }
+    function handleMoreClick(event, iso) {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+        const todos = eventMap()[iso] || [];
+        if (props.onMoreClick)
+            props.onMoreClick(iso, todos.slice(limite()));
+    }
+    useEffect(() => {
+        if (focoPendenteRef.current) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = "";
+            focarDia(alvo);
+        }
+    });
+    return (_jsxs("div", { ref: rootRef, className: rootClasses(), children: [_jsxs("div", { className: "umds-calendar__toolbar", children: [_jsx("div", { className: "umds-calendar__toolbar-start", children: props.headerStart ? _jsx(_Fragment, { children: props.headerStart }) : null }), _jsxs("div", { className: "umds-calendar__nav", children: [_jsx(Button, { variant: "icon", size: "sm", ariaLabel: props.previousLabel || "Anterior", onClick: (event) => handlePrevious(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faChevronLeft }) }), _jsx("span", { "aria-live": "polite", className: "umds-calendar__title", children: titleText() }), _jsx(Button, { variant: "icon", size: "sm", ariaLabel: props.nextLabel || "Próximo", onClick: (event) => handleNext(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faChevronRight }) }), _jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => handleToday(), children: props.todayLabel || "Hoje" })] }), _jsxs("div", { className: "umds-calendar__toolbar-end", children: [props.headerEnd ? _jsx(_Fragment, { children: props.headerEnd }) : null, !props.hideViewSwitcher ? (_jsx("div", { role: "group", "aria-label": props.viewLabel || "Visão", children: _jsx(SegmentedControl, { size: "sm", options: viewOptions(), value: viewValue(), onChange: (valor) => mudarVisao(valor) }) })) : null] })] }), _jsxs("div", { role: "grid", className: "umds-calendar__grid", "aria-label": gridLabel(), children: [_jsx("div", { role: "row", className: "umds-calendar__weekdays", children: weekdayHeads()?.map((cabecalho) => (_jsx("div", { role: "columnheader", className: "umds-calendar__weekday", "aria-label": cabecalho.full, children: _jsx("span", { "aria-hidden": "true", children: cabecalho.short }) }, cabecalho.iso))) }), weeks()?.map((semana) => (_jsx("div", { role: "row", className: "umds-calendar__week", children: semana.days?.map((dia) => (_jsxs("div", { role: "gridcell", "data-date": dia.iso, tabIndex: dia.tabIndex, "aria-label": dia.label, "aria-selected": dia.selected ? "true" : undefined, "aria-current": dia.today ? "date" : undefined, onClick: (event) => handleDayClick(dia.iso), onKeyDown: (event) => handleCellKeyDown(event, dia.iso), onFocus: (event) => handleCellFocus(event, dia.iso), className: dia.classes, children: [_jsx("span", { "aria-hidden": "true", className: "umds-calendar__day-number", children: dia.day }), _jsxs("div", { className: "umds-calendar__events", children: [dia.visible?.map((evento, posicao) => (_jsxs("button", { type: "button", className: "umds-calendar__event", style: eventStyle(evento), tabIndex: dia.tabIndex, title: evento.title, onClick: (event) => handleEventClick(event, evento), children: [evento.time ? (_jsx("span", { className: "umds-calendar__event-time", children: evento.time })) : null, _jsx("span", { className: "umds-calendar__event-title", children: evento.title })] }, evento.id || dia.iso + "-" + posicao))), dia.hidden > 0 ? (_jsx("button", { type: "button", className: "umds-calendar__more", tabIndex: dia.tabIndex, "aria-label": dia.moreAria, onClick: (event) => handleMoreClick(event, dia.iso), children: dia.moreText })) : null] })] }, dia.iso))) }, semana.key)))] })] }));
+}
+export default Calendar;

package/dist/components/Chart/BarChart.d.ts

@@ -61,6 +61,12 @@ export interface BarChartProps {
     showLegend?: any;
     showGrid?: any;
     emptyText?: string;
+    /** Cabeçalho da coluna de categorias na tabela oculta lida pelo leitor de tela. Troque para traduzir. @default 'Categoria' */
+    categoryLabel?: string;
+    /** Nome acessível da lista de categorias focáveis; o `title`, se houver, vem depois de " — ". Troque para traduzir. @default 'Valores por categoria' */
+    valuesListLabel?: string;
+    /** Nome do tipo de gráfico: legenda da tabela oculta quando não há `title` e começo do resumo automático. O resumo automático é em português; em outro idioma, passe também `ariaLabel`. @default 'Gráfico de barras' */
+    typeLabel?: string;
     className?: string;
 }
 declare function BarChart(props: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BarChart.js

@@ -32,6 +32,8 @@ function BarChart(props) {
             unit: props.unit,
             showLegend: props.showLegend,
             showGrid: props.showGrid,
+            typeLabel: props.typeLabel,
+            valuesListLabel: props.valuesListLabel,
         }, largura, props.height || 240);
     }
     function classeDaSerie(serie) {
@@ -135,6 +137,6 @@ function BarChart(props) {
             }
         };
     }, []);
-    return (_jsxs("figure", { ref: figuraRef, className: classes(), children: [props.title ? (_jsx("figcaption", { className: "umds-chart__titulo", children: props.title })) : null, modelo().mostraLegenda ? (_jsx("ul", { role: "list", className: "umds-chart__legenda", children: modelo().legenda?.map((item) => (_jsxs("li", { className: "umds-chart__legenda-item", children: [_jsx("span", { "aria-hidden": "true", className: classeDaSerie(item.serie) }), _jsx("span", { children: item.nome })] }, item.chave))) })) : null, modelo().vazio ? (_jsx("div", { className: "umds-chart__vazio", style: estiloDaArea(), children: props.emptyText || "Sem dados para exibir." })) : null, !modelo().vazio ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-chart__area", style: estiloDaArea(), children: [_jsx("div", { role: "img", className: "umds-chart__desenho", "aria-label": modelo().resumo, children: _jsxs("svg", { preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", className: "umds-chart__svg", viewBox: modelo().viewBox, children: [modelo().mostraGrade ? (_jsx(_Fragment, { children: modelo().grade?.map((linha) => (_jsx("line", { className: "umds-chart__grade", x1: linha.x1, x2: linha.x2, y1: linha.y, y2: linha.y }, linha.chave))) })) : null, modelo().grade?.map((linha) => (_jsx("text", { className: "umds-chart__tick", x: linha.xTexto, y: linha.y, children: linha.texto }, linha.chave))), modelo().rotulosX?.map((rotulo) => (_jsx("text", { className: "umds-chart__rotulo-x", x: rotulo.x, y: rotulo.y, children: rotulo.texto }, rotulo.chave))), modelo().barras?.map((barra) => (_jsx("path", { d: barra.d, className: classesDaBarra(barra.serie, barra.indice) }, barra.chave))), _jsx("line", { className: "umds-chart__base", x1: modelo().esquerda, x2: modelo().fimX, y1: modelo().y0, y2: modelo().y0 })] }) }), _jsx("div", { role: "list", className: "umds-chart__alvos", "aria-label": modelo().rotuloDaLista, children: modelo().alvos?.map((alvo) => (_jsxs("div", { role: "listitem", className: "umds-chart__alvo", tabIndex: tabIndexDoAlvo(alvo.indice, modelo().alvos.length), style: estiloDoAlvo(alvo.esquerda, alvo.largura, modelo().topo, modelo().base), onMouseEnter: (event) => ativar(alvo.indice), onMouseLeave: (event) => desativar(), onFocus: (event) => aoFocar(alvo.indice), onBlur: (event) => aoDesfocar(), onKeyDown: (event) => aoTeclar(event, alvo.indice, modelo().alvos.length), children: [_jsx("span", { className: "umds-chart__oculto", children: alvo.descricao }), ehAtivo(alvo.indice) ? (_jsxs("div", { "aria-hidden": "true", className: classesDoTooltip(alvo.lado), children: [_jsx("span", { className: "umds-chart__tooltip-categoria", children: alvo.categoria }), alvo.linhas?.map((linha) => (_jsxs("span", { className: "umds-chart__tooltip-linha", children: [_jsx("span", { className: classeDaChaveDoTooltip(linha.serie) }), _jsx("span", { className: "umds-chart__tooltip-valor", children: linha.texto }), alvo.linhas.length > 1 ? (_jsx("span", { className: "umds-chart__tooltip-nome", children: linha.nome })) : null] }, linha.serie)))] })) : null] }, alvo.indice))) })] }), _jsxs("table", { className: "umds-chart__oculto", children: [_jsx("caption", { children: modelo().legendaDaTabela }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Categoria" }), modelo().cabecalhos?.map((item) => (_jsx("th", { scope: "col", children: item.nome }, item.chave)))] }) }), _jsx("tbody", { children: modelo().tabela?.map((linha) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: linha.categoria }), linha.valores?.map((valor) => (_jsx("td", { children: valor.texto }, valor.chave)))] }, linha.chave))) })] })] })) : null] }));
+    return (_jsxs("figure", { ref: figuraRef, className: classes(), children: [props.title ? (_jsx("figcaption", { className: "umds-chart__titulo", children: props.title })) : null, modelo().mostraLegenda ? (_jsx("ul", { role: "list", className: "umds-chart__legenda", children: modelo().legenda?.map((item) => (_jsxs("li", { className: "umds-chart__legenda-item", children: [_jsx("span", { "aria-hidden": "true", className: classeDaSerie(item.serie) }), _jsx("span", { children: item.nome })] }, item.chave))) })) : null, modelo().vazio ? (_jsx("div", { className: "umds-chart__vazio", style: estiloDaArea(), children: props.emptyText || "Sem dados para exibir." })) : null, !modelo().vazio ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-chart__area", style: estiloDaArea(), children: [_jsx("div", { role: "img", className: "umds-chart__desenho", "aria-label": modelo().resumo, children: _jsxs("svg", { preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", className: "umds-chart__svg", viewBox: modelo().viewBox, children: [modelo().mostraGrade ? (_jsx(_Fragment, { children: modelo().grade?.map((linha) => (_jsx("line", { className: "umds-chart__grade", x1: linha.x1, x2: linha.x2, y1: linha.y, y2: linha.y }, linha.chave))) })) : null, modelo().grade?.map((linha) => (_jsx("text", { className: "umds-chart__tick", x: linha.xTexto, y: linha.y, children: linha.texto }, linha.chave))), modelo().rotulosX?.map((rotulo) => (_jsx("text", { className: "umds-chart__rotulo-x", x: rotulo.x, y: rotulo.y, children: rotulo.texto }, rotulo.chave))), modelo().barras?.map((barra) => (_jsx("path", { d: barra.d, className: classesDaBarra(barra.serie, barra.indice) }, barra.chave))), _jsx("line", { className: "umds-chart__base", x1: modelo().esquerda, x2: modelo().fimX, y1: modelo().y0, y2: modelo().y0 })] }) }), _jsx("div", { role: "list", className: "umds-chart__alvos", "aria-label": modelo().rotuloDaLista, children: modelo().alvos?.map((alvo) => (_jsxs("div", { role: "listitem", className: "umds-chart__alvo", tabIndex: tabIndexDoAlvo(alvo.indice, modelo().alvos.length), style: estiloDoAlvo(alvo.esquerda, alvo.largura, modelo().topo, modelo().base), onMouseEnter: (event) => ativar(alvo.indice), onMouseLeave: (event) => desativar(), onFocus: (event) => aoFocar(alvo.indice), onBlur: (event) => aoDesfocar(), onKeyDown: (event) => aoTeclar(event, alvo.indice, modelo().alvos.length), children: [_jsx("span", { className: "umds-chart__oculto", children: alvo.descricao }), ehAtivo(alvo.indice) ? (_jsxs("div", { "aria-hidden": "true", className: classesDoTooltip(alvo.lado), children: [_jsx("span", { className: "umds-chart__tooltip-categoria", children: alvo.categoria }), alvo.linhas?.map((linha) => (_jsxs("span", { className: "umds-chart__tooltip-linha", children: [_jsx("span", { className: classeDaChaveDoTooltip(linha.serie) }), _jsx("span", { className: "umds-chart__tooltip-valor", children: linha.texto }), alvo.linhas.length > 1 ? (_jsx("span", { className: "umds-chart__tooltip-nome", children: linha.nome })) : null] }, linha.serie)))] })) : null] }, alvo.indice))) })] }), _jsxs("table", { className: "umds-chart__oculto", children: [_jsx("caption", { children: modelo().legendaDaTabela }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: props.categoryLabel || "Categoria" }), modelo().cabecalhos?.map((item) => (_jsx("th", { scope: "col", children: item.nome }, item.chave)))] }) }), _jsx("tbody", { children: modelo().tabela?.map((linha) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: linha.categoria }), linha.valores?.map((valor) => (_jsx("td", { children: valor.texto }, valor.chave)))] }, linha.chave))) })] })] })) : null] }));
 }
 export default BarChart;

package/dist/components/Chart/LineChart.d.ts

@@ -42,6 +42,12 @@ export interface LineChartProps {
     showGrid?: any;
     showPoints?: any;
     emptyText?: string;
+    /** Cabeçalho da coluna de categorias na tabela oculta lida pelo leitor de tela. Troque para traduzir. @default 'Categoria' */
+    categoryLabel?: string;
+    /** Nome acessível da lista de categorias focáveis; o `title`, se houver, vem depois de " — ". Troque para traduzir. @default 'Valores por categoria' */
+    valuesListLabel?: string;
+    /** Nome do tipo de gráfico: legenda da tabela oculta quando não há `title` e começo do resumo automático. O resumo automático é em português; em outro idioma, passe também `ariaLabel`. @default 'Gráfico de linhas' */
+    typeLabel?: string;
     className?: string;
 }
 import type { ChartDatum, ChartSeries } from "./BarChart";

package/dist/components/Chart/LineChart.js

@@ -32,6 +32,8 @@ function LineChart(props) {
             unit: props.unit,
             showLegend: props.showLegend,
             showGrid: props.showGrid,
+            typeLabel: props.typeLabel,
+            valuesListLabel: props.valuesListLabel,
         }, largura, props.height || 240);
     }
     function classeDaChaveDoTooltip(serie) {
@@ -134,6 +136,6 @@ function LineChart(props) {
             }
         };
     }, []);
-    return (_jsxs("figure", { ref: figuraRef, className: classes(), children: [props.title ? (_jsx("figcaption", { className: "umds-chart__titulo", children: props.title })) : null, modelo().mostraLegenda ? (_jsx("ul", { role: "list", className: "umds-chart__legenda", children: modelo().legenda?.map((item) => (_jsxs("li", { className: "umds-chart__legenda-item", children: [_jsx("span", { "aria-hidden": "true", className: classeDaChaveDoTooltip(item.serie) }), _jsx("span", { children: item.nome })] }, item.chave))) })) : null, modelo().vazio ? (_jsx("div", { className: "umds-chart__vazio", style: estiloDaArea(), children: props.emptyText || "Sem dados para exibir." })) : null, !modelo().vazio ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-chart__area", style: estiloDaArea(), children: [_jsx("div", { role: "img", className: "umds-chart__desenho", "aria-label": modelo().resumo, children: _jsxs("svg", { preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", className: "umds-chart__svg", viewBox: modelo().viewBox, children: [modelo().mostraGrade ? (_jsx(_Fragment, { children: modelo().grade?.map((linha) => (_jsx("line", { className: "umds-chart__grade", x1: linha.x1, x2: linha.x2, y1: linha.y, y2: linha.y }, linha.chave))) })) : null, modelo().grade?.map((linha) => (_jsx("text", { className: "umds-chart__tick", x: linha.xTexto, y: linha.y, children: linha.texto }, linha.chave))), modelo().rotulosX?.map((rotulo) => (_jsx("text", { className: "umds-chart__rotulo-x", x: rotulo.x, y: rotulo.y, children: rotulo.texto }, rotulo.chave))), _jsx("line", { className: "umds-chart__base", x1: modelo().esquerda, x2: modelo().fimX, y1: modelo().y0, y2: modelo().y0 }), modelo().alvos?.map((alvo) => ehAtivo(alvo.indice) ? (_jsx("line", { className: "umds-chart__cursor", x1: alvo.cx, x2: alvo.cx, y1: modelo().topo, y2: modelo().base }, alvo.indice)) : null), modelo().tracos?.map((traco) => (_jsx("path", { d: traco.d, className: classesDaLinha(traco.serie) }, traco.chave))), modelo().pontos?.map((ponto) => pontoVisivel(ponto.indice) ? (_jsx("circle", { cx: ponto.x, cy: ponto.y, r: 5, className: classesDoPonto(ponto.serie) }, ponto.chave)) : null)] }) }), _jsx("div", { role: "list", className: "umds-chart__alvos", "aria-label": modelo().rotuloDaLista, children: modelo().alvos?.map((alvo) => (_jsxs("div", { role: "listitem", className: "umds-chart__alvo", tabIndex: tabIndexDoAlvo(alvo.indice, modelo().alvos.length), style: estiloDoAlvo(alvo.esquerda, alvo.largura, modelo().topo, modelo().base), onMouseEnter: (event) => ativar(alvo.indice), onMouseLeave: (event) => desativar(), onFocus: (event) => aoFocar(alvo.indice), onBlur: (event) => aoDesfocar(), onKeyDown: (event) => aoTeclar(event, alvo.indice, modelo().alvos.length), children: [_jsx("span", { className: "umds-chart__oculto", children: alvo.descricao }), ehAtivo(alvo.indice) ? (_jsxs("div", { "aria-hidden": "true", className: classesDoTooltip(alvo.lado), children: [_jsx("span", { className: "umds-chart__tooltip-categoria", children: alvo.categoria }), alvo.linhas?.map((linha) => (_jsxs("span", { className: "umds-chart__tooltip-linha", children: [_jsx("span", { className: classeDaChaveDoTooltip(linha.serie) }), _jsx("span", { className: "umds-chart__tooltip-valor", children: linha.texto }), alvo.linhas.length > 1 ? (_jsx("span", { className: "umds-chart__tooltip-nome", children: linha.nome })) : null] }, linha.serie)))] })) : null] }, alvo.indice))) })] }), _jsxs("table", { className: "umds-chart__oculto", children: [_jsx("caption", { children: modelo().legendaDaTabela }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Categoria" }), modelo().cabecalhos?.map((item) => (_jsx("th", { scope: "col", children: item.nome }, item.chave)))] }) }), _jsx("tbody", { children: modelo().tabela?.map((linha) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: linha.categoria }), linha.valores?.map((valor) => (_jsx("td", { children: valor.texto }, valor.chave)))] }, linha.chave))) })] })] })) : null] }));
+    return (_jsxs("figure", { ref: figuraRef, className: classes(), children: [props.title ? (_jsx("figcaption", { className: "umds-chart__titulo", children: props.title })) : null, modelo().mostraLegenda ? (_jsx("ul", { role: "list", className: "umds-chart__legenda", children: modelo().legenda?.map((item) => (_jsxs("li", { className: "umds-chart__legenda-item", children: [_jsx("span", { "aria-hidden": "true", className: classeDaChaveDoTooltip(item.serie) }), _jsx("span", { children: item.nome })] }, item.chave))) })) : null, modelo().vazio ? (_jsx("div", { className: "umds-chart__vazio", style: estiloDaArea(), children: props.emptyText || "Sem dados para exibir." })) : null, !modelo().vazio ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-chart__area", style: estiloDaArea(), children: [_jsx("div", { role: "img", className: "umds-chart__desenho", "aria-label": modelo().resumo, children: _jsxs("svg", { preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", className: "umds-chart__svg", viewBox: modelo().viewBox, children: [modelo().mostraGrade ? (_jsx(_Fragment, { children: modelo().grade?.map((linha) => (_jsx("line", { className: "umds-chart__grade", x1: linha.x1, x2: linha.x2, y1: linha.y, y2: linha.y }, linha.chave))) })) : null, modelo().grade?.map((linha) => (_jsx("text", { className: "umds-chart__tick", x: linha.xTexto, y: linha.y, children: linha.texto }, linha.chave))), modelo().rotulosX?.map((rotulo) => (_jsx("text", { className: "umds-chart__rotulo-x", x: rotulo.x, y: rotulo.y, children: rotulo.texto }, rotulo.chave))), _jsx("line", { className: "umds-chart__base", x1: modelo().esquerda, x2: modelo().fimX, y1: modelo().y0, y2: modelo().y0 }), modelo().alvos?.map((alvo) => ehAtivo(alvo.indice) ? (_jsx("line", { className: "umds-chart__cursor", x1: alvo.cx, x2: alvo.cx, y1: modelo().topo, y2: modelo().base }, alvo.indice)) : null), modelo().tracos?.map((traco) => (_jsx("path", { d: traco.d, className: classesDaLinha(traco.serie) }, traco.chave))), modelo().pontos?.map((ponto) => pontoVisivel(ponto.indice) ? (_jsx("circle", { cx: ponto.x, cy: ponto.y, r: 5, className: classesDoPonto(ponto.serie) }, ponto.chave)) : null)] }) }), _jsx("div", { role: "list", className: "umds-chart__alvos", "aria-label": modelo().rotuloDaLista, children: modelo().alvos?.map((alvo) => (_jsxs("div", { role: "listitem", className: "umds-chart__alvo", tabIndex: tabIndexDoAlvo(alvo.indice, modelo().alvos.length), style: estiloDoAlvo(alvo.esquerda, alvo.largura, modelo().topo, modelo().base), onMouseEnter: (event) => ativar(alvo.indice), onMouseLeave: (event) => desativar(), onFocus: (event) => aoFocar(alvo.indice), onBlur: (event) => aoDesfocar(), onKeyDown: (event) => aoTeclar(event, alvo.indice, modelo().alvos.length), children: [_jsx("span", { className: "umds-chart__oculto", children: alvo.descricao }), ehAtivo(alvo.indice) ? (_jsxs("div", { "aria-hidden": "true", className: classesDoTooltip(alvo.lado), children: [_jsx("span", { className: "umds-chart__tooltip-categoria", children: alvo.categoria }), alvo.linhas?.map((linha) => (_jsxs("span", { className: "umds-chart__tooltip-linha", children: [_jsx("span", { className: classeDaChaveDoTooltip(linha.serie) }), _jsx("span", { className: "umds-chart__tooltip-valor", children: linha.texto }), alvo.linhas.length > 1 ? (_jsx("span", { className: "umds-chart__tooltip-nome", children: linha.nome })) : null] }, linha.serie)))] })) : null] }, alvo.indice))) })] }), _jsxs("table", { className: "umds-chart__oculto", children: [_jsx("caption", { children: modelo().legendaDaTabela }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: props.categoryLabel || "Categoria" }), modelo().cabecalhos?.map((item) => (_jsx("th", { scope: "col", children: item.nome }, item.chave)))] }) }), _jsx("tbody", { children: modelo().tabela?.map((linha) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: linha.categoria }), linha.valores?.map((valor) => (_jsx("td", { children: valor.texto }, valor.chave)))] }, linha.chave))) })] })] })) : null] }));
 }
 export default LineChart;

package/dist/components/Checkbox/Checkbox.css

@@ -43,6 +43,7 @@
   justify-content: center;
   flex-shrink: 0;
   border: 1.5px solid var(--umds-semantic-color-neutral-dark-up);
+  /* stylelint-disable-next-line 1ds/raio-canonico -- caixa de 14–20px: 8px viraria círculo; raio base sobrescrito pelos tamanhos abaixo (candidato a novo token) */
   border-radius: 3px; /* sem equivalente 1DS: candidato a novo token */
   background: var(--umds-semantic-color-background-white);
   color: var(--umds-semantic-color-background-white);
@@ -53,8 +54,10 @@
 }
 
 /* ── Tamanhos ── */
-.umds-checkbox--sm .umds-checkbox__control  { width: 14px; height: 14px; border-radius: 2px; }
+.umds-checkbox--sm .umds-checkbox__control  { width: 14px; height: 14px; border-radius: var(--umds-primitive-border-radius-xxs); }
+/* stylelint-disable-next-line 1ds/raio-canonico -- caixa de 16px/20px: 8px viraria círculo e 4px mudaria a forma; 3px é a spec do protótipo (candidato a novo token) */
 .umds-checkbox--md .umds-checkbox__control { width: 16px; height: 16px; border-radius: 3px; }
+/* stylelint-disable-next-line 1ds/raio-canonico -- mesma razão da linha acima: caixa de 20px com 3px da spec */
 .umds-checkbox--lg  .umds-checkbox__control { width: 20px; height: 20px; border-radius: 3px; }
 
 /* O tamanho do ícone (check/minus) é controlado via customSize no componente Icon:

package/dist/components/Chips/Chips.css

@@ -28,6 +28,14 @@
 }
 
 /* ── Tamanhos ── */
+/* xs: 20px de altura (16 + 4, dois degraus do DS somados; sem token próprio).
+   Fonte de 12px: a escala do DS não tem o 11px do CrisDoc. */
+.umds-chip--xs {
+  height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck));
+  padding: 0 var(--umds-primitive-spacing-nano); /* 8px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
 .umds-chip--sm {
   height: 24px; /* dimensão do protótipo sem token 1DS */
   padding: 0 8px; /* dimensão do protótipo sem token 1DS */
@@ -92,6 +100,7 @@
   height: 14px; /* dimensão do protótipo sem token 1DS */
   min-width: var(--umds-primitive-spacing-xxs); /* 24px — alvo de toque */
   min-height: var(--umds-primitive-spacing-xxs);
+  /* stylelint-disable-next-line 1ds/espaco-da-escala -- compensação exata: devolve os 10px do alvo de toque de 24px para a altura do chip não mudar */
   margin: -5px 0; /* devolve os 10px extras: a altura do chip nao muda */
   flex-shrink: 0;
   background: none;
@@ -123,6 +132,36 @@
 
 /* Ícone do X (Icon FA "xmark") — tamanho via customSize no .lite.tsx (8px sm / 10px md) */
 
+/* ── × em círculo (circularRemove) ──
+   O círculo é um ::before de 14px na cor do texto do chip com 15% de opacidade
+   (tinge cada variante sem cor própria); o glifo fica por cima. */
+.umds-chip--remove-circle .umds-chip__remove {
+  position: relative;
+  opacity: 1;
+}
+
+.umds-chip--remove-circle .umds-chip__remove::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px; /* círculo de 14px, como o CrisDoc */
+  height: 14px;
+  transform: translate(-50%, -50%);
+  border-radius: var(--umds-primitive-border-radius-circular);
+  background-color: currentColor;
+  opacity: 0.15;
+  transition: opacity var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-chip--remove-circle .umds-chip__remove:hover:not(:disabled)::before {
+  opacity: 0.3;
+}
+
+.umds-chip--remove-circle .umds-chip__remove > * {
+  position: relative; /* o glifo fica acima do círculo */
+}
+
 /* ── Filter chip (onClick/selected) ── */
 /* Botão transparente do label: herda tudo do chip — visual em repouso idêntico. */
 .umds-chip__action {

package/dist/components/Chips/Chips.d.ts

@@ -5,7 +5,8 @@ import './Chips.css';
  * @property {string} label - Texto exibido no chip (obrigatório)
  * @property {boolean} removable - Exibe o botão × para remover o chip
  * @property {boolean} disabled - Desabilita o chip (visual esmaecido e sem interação)
- * @property {string} size - Tamanho do chip: 'sm' | 'md'
+ * @property {string} size - Tamanho do chip: 'xs' (20px, para dentro de card e linha de lista) | 'sm' (24px) | 'md' (28px)
+ * @property {boolean} circularRemove - Põe o × do chip removível dentro de um círculo tingido da cor do chip (o marcador do card da inbox). Só vale com `removable`.
  * @property {string} variant - Variante visual: 'default' | 'primary' | 'positive' | 'negative' | 'info'
  * @property {boolean} selected - Estado selecionado (filter chip) — vira aria-pressed
  * @property {function} onClick - Torna o chip acionável (filter chip): o label vira um
@@ -19,7 +20,9 @@ export interface ChipsProps {
     label: string;
     removable?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
+    /** × dentro de um círculo tingido da cor do chip. Só vale com `removable`. @default false */
+    circularRemove?: boolean;
     variant?: "default" | "primary" | "positive" | "negative" | "info";
     /** Estado selecionado do filter chip (comunicado via aria-pressed) */
     selected?: boolean;
@@ -27,6 +30,8 @@ export interface ChipsProps {
     /** Presente = chip acionável (filter chip): label vira botão real, com Enter/Espaço nativos */
     onClick?: (event: any) => void;
     onRemove?: (event: any) => void;
+    /** Prefixo do nome acessível do botão de remover (recebe o label do chip depois de um espaço), como no MultiSelect. Troque para traduzir. @default 'Remover' */
+    removeAriaLabel?: string;
 }
 declare function Chips(props: ChipsProps): import("react/jsx-runtime").JSX.Element;
 export default Chips;