@1doc/1ds-react 2.8.0 → 2.10.0

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

@@ -0,0 +1,126 @@
+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
+ * um filtro de escopo à esquerda e a legenda à direita: no React, as props `headerStart`
+ * e `headerEnd` (um nó); no Vue, os slots `#header-start` e `#header-end` (com hífen: o
+ * Vue lê o nome do slot como está, e `#headerStart` não chega). 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 header-start - Só no Vue (`#header-start`, com hífen). Cabeçalho, à esquerda: um filtro de escopo. No React, a prop `headerStart`.
+ * @slot header-end - Só no Vue (`#header-end`, com hífen). Cabeçalho, antes do seletor de visão: a legenda. No React, a prop `headerEnd`.
+ * @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;
+    /** Cabeçalho, à esquerda: um filtro de escopo. React: o nó nesta prop. Vue: o slot `#header-start` (com hífen). */
+    headerStart?: any;
+    /** Cabeçalho, à direita, antes do seletor de visão: a legenda. React: o nó nesta prop. Vue: o slot `#header-end` (com hífen). */
+    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/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 */
@@ -124,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;

package/dist/components/Chips/Chips.js

@@ -11,6 +11,7 @@ function Chips(props) {
             `umds-chip--${props.variant || "default"}`,
             props.disabled ? "umds-chip--disabled" : "",
             props.removable ? "umds-chip--removable" : "",
+            props.removable && props.circularRemove ? "umds-chip--remove-circle" : "",
             props.selected ? "umds-chip--selected" : "",
             props.onClick ? "umds-chip--clickable" : "",
             props.className,
@@ -19,7 +20,7 @@ function Chips(props) {
             .join(" ");
     }
     function iconSize() {
-        return props.size === "sm" ? "8px" : "10px";
+        return props.size === "sm" || props.size === "xs" ? "8px" : "10px";
     }
     function removeLabelText() {
         return (props.removeAriaLabel || "Remover") + " " + props.label;

package/dist/components/Coachmark/Coachmark.css

@@ -0,0 +1,128 @@
+/* ─────────────────────────────────────────────
+   COACHMARK
+   Tour guiado: véu com recorte no alvo e um cartão que o aponta.
+
+   O recorte é uma caixa transparente cuja SOMBRA enorme escurece o resto da
+   página (um buraco no véu sem máscara nem SVG). Quando o passo não tem alvo,
+   o véu é cheio e o cartão vai ao centro.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-coachmark {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--umds-semantic-layer-popover);
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+/* Captura o clique: a página atrás fica inerte durante o tour. */
+.umds-coachmark__veil {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.umds-coachmark--no-target .umds-coachmark__veil {
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token); mesmo valor do Modal */
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.umds-coachmark__cutout {
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  /* 100vmax: maior que qualquer tela, o recorte nunca deixa a borda do véu à mostra. */
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token); mesmo valor do Modal */
+  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
+  transition:
+    top var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    left var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    width var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    height var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard);
+}
+
+/* ── Cartão ── */
+.umds-coachmark__card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  /* 360px: 200px + 160px da escala; nunca passa da tela. */
+  width: calc(var(--umds-primitive-spacing-giant) + var(--umds-primitive-spacing-huge));
+  max-width: calc(100vw - var(--umds-primitive-spacing-xs));
+  padding: var(--umds-primitive-spacing-xxs); /* 24px */
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  border-radius: var(--umds-primitive-border-radius-md); /* 16px */
+  box-shadow: var(--umds-primitive-shadow-level-3);
+  outline: none;
+}
+
+.umds-coachmark__card--centered {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.umds-coachmark__card:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-coachmark__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  margin-top: var(--umds-primitive-spacing-nano);
+}
+
+.umds-coachmark__actions {
+  display: inline-flex;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  margin-left: auto;
+}
+
+/* Só para leitor de tela: "2 de 8: título", a cada passo. */
+.umds-coachmark__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── modal={false}: sem véu nem recorte, a página segue clicável ──
+   A raiz cobre a tela só para posicionar o cartão; quem recebe o ponteiro é o cartão. */
+.umds-coachmark--modeless {
+  pointer-events: none;
+}
+
+.umds-coachmark--modeless .umds-coachmark__card {
+  pointer-events: auto;
+}
+
+@media (forced-colors: active) {
+  .umds-coachmark__card {
+    border: var(--umds-primitive-border-width-thin) solid CanvasText;
+  }
+
+  .umds-coachmark__cutout {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}