@1doc/1ds-react 2.12.1 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @1doc/1ds-react
 
+## 2.13.0
+
+### Minor Changes
+
+- ab0ee2b: feat(breadcrumb): `truncate`, a trilha numa linha só
+
+  O `Breadcrumb` ganha `truncate`. A trilha passa a ocupar uma linha só e, quando não cabe, a página atual (o último item) encolhe
+  primeiro, com reticências, até 80px (separador incluído); só então os níveis anteriores encolhem. O separador nunca encolhe e o rótulo inteiro fica no
+  `title` de cada item. Feito para barras de altura fixa, como o `AppSubheader`, quando o último nível é um texto longo: o CrisDoc
+  mostra ali o número e o assunto do processo aberto, e sem isto a trilha quebrava em três linhas no celular. Sem a prop, nada muda.
+
+  ```vue
+  <Breadcrumb
+    truncate
+    :items="[
+      { label: '1Doc', href: '/' },
+      { label: 'Proc. Administrativo 412/2026' },
+      { label: assunto },
+    ]"
+  />
+  ```
+
+## 2.12.2
+
+### Patch Changes
+
+- 42a97e7: Select (variantes de filtro): a lista fica como a do CrisDoc. Teto de 300px, com o nome longo cortado por reticências; a opção marcada sem fundo, em azul, com o ✓ de 12px à esquerda; e, aberta pelo mouse, sem o contorno do cursor de teclado nem a régua azul da busca, que voltam assim que a navegação é pelo teclado. Numa lista com cores, a opção sem cor (ex.: "Sem marcadores") ganha uma amostra tracejada, e a opção "sem filtro" (`emptyOptionLabel`) segue sem nenhuma. O Select de formulário não muda.
+- f584230: Tabs: o ícone da aba passa de 20px (`size="md"`) para 14px, a altura do texto da aba. Com 20px ele ficava maior que a palavra ao lado. O texto continua em 14px.
+
 ## 2.12.1
 
 ### Patch Changes

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -70,3 +70,53 @@
   font-weight: 600;
   cursor: default;
 }
+
+/* ── truncate: uma linha só, com reticências ──
+   A página atual encolhe primeiro: o `flex-shrink` alto faz o algoritmo do
+   flex tirar dela quase todo o espaço que falta, até a largura mínima; dali
+   em diante o que ainda falta se divide entre os níveis anteriores. O 100000
+   é uma razão de encolhimento, não uma medida, e precisa ser enorme: o flex
+   reparte o encolhimento na proporção (razão × largura), e com 100 os níveis
+   anteriores ainda levavam de 0,1 a 0,8px, o bastante para virar "1D…" e
+   "Emiss…" com espaço sobrando. O separador nunca encolhe.
+   Com rótulo final mais curto que o mínimo, o item ocupa o mínimo e a sobra
+   fica depois do texto, no fim da trilha, onde não aparece. */
+.umds-breadcrumb--truncate {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__list {
+  flex-wrap: nowrap;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item {
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item:last-child {
+  flex-shrink: 100000;
+  min-width: var(--umds-primitive-spacing-xxl); /* 80px com o separador: "Reforma…" ainda se lê */
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item:only-child {
+  min-width: 0;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__sep {
+  flex-shrink: 0;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__link,
+.umds-breadcrumb--truncate .umds-breadcrumb__current {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Em bloco, o alvo de 24px vem da altura da linha, e o texto fica centrado. */
+.umds-breadcrumb--truncate .umds-breadcrumb__link {
+  line-height: var(--umds-primitive-spacing-xxs); /* 24px */
+}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -14,6 +14,7 @@ export interface BreadcrumbItem {
  * Breadcrumb component — navegação estrutural (trilha de páginas).
  * @property {BreadcrumbItem[]} items - Lista de itens da trilha; o último é a página atual
  * @property {string} separator - Separador entre itens (padrão '/')
+ * @property {boolean} truncate - Trilha numa linha só, com reticências quando não cabe
  * @property {string} className - Classes CSS adicionais
  * @quandoUsar Mostrar ONDE o usuário está na hierarquia do sistema e permitir subir de nível. Use em páginas com profundidade 2 ou mais.
  * @quandoNaoUsar Para progresso dentro de um fluxo de etapas — use `Stepper`. Para navegar entre seções da mesma página, use `Tabs`.
@@ -23,6 +24,14 @@ export interface BreadcrumbProps {
     ariaLabel?: string;
     items: BreadcrumbItem[];
     separator?: string;
+    /**
+     * Mantém a trilha numa linha só. Quando não cabe, a página atual (último item)
+     * encolhe primeiro, com reticências, até uma largura mínima; só então os
+     * níveis anteriores encolhem. O rótulo inteiro fica no `title` de cada item.
+     * Use em barras de altura fixa (subheader) e quando o último nível é um texto
+     * longo, como o assunto de um processo. @default false
+     */
+    truncate?: boolean;
     className?: string;
 }
 declare function Breadcrumb(props: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -6,11 +6,20 @@ function Breadcrumb(props) {
         return props.separator || "/";
     }
     function classes() {
-        return ["umds-breadcrumb", props.className].filter(Boolean).join(" ");
+        return [
+            "umds-breadcrumb",
+            props.truncate ? "umds-breadcrumb--truncate" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function itemList() {
         return props.items || [];
     }
+    function titleOf(item) {
+        return props.truncate ? item.label : undefined;
+    }
     function isLast(index) {
         return index === (props.items || []).length - 1;
     }
@@ -24,6 +33,6 @@ function Breadcrumb(props) {
             }
         }
     }
-    return (_jsx("nav", { "aria-label": props.ariaLabel || "Navegação estrutural", className: classes(), children: _jsx("ol", { className: "umds-breadcrumb__list", children: itemList()?.map((item, index) => (_jsxs("li", { className: "umds-breadcrumb__item", children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "umds-breadcrumb__sep", children: sep() })) : null, !isLast(index) && !!item.href ? (_jsx("a", { className: "umds-breadcrumb__link", href: item.href, children: item.label })) : null, !isLast(index) && !item.href ? (_jsx("span", { role: "button", className: "umds-breadcrumb__link", tabIndex: 0, onClick: (event) => item.onClick && item.onClick(), onKeyDown: (event) => handleItemKey(event, item), children: item.label })) : null, isLast(index) ? (_jsx("span", { "aria-current": "page", className: "umds-breadcrumb__current", children: item.label })) : null] }, index))) }) }));
+    return (_jsx("nav", { "aria-label": props.ariaLabel || "Navegação estrutural", className: classes(), children: _jsx("ol", { className: "umds-breadcrumb__list", children: itemList()?.map((item, index) => (_jsxs("li", { className: "umds-breadcrumb__item", children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "umds-breadcrumb__sep", children: sep() })) : null, !isLast(index) && !!item.href ? (_jsx("a", { className: "umds-breadcrumb__link", href: item.href, title: titleOf(item), children: item.label })) : null, !isLast(index) && !item.href ? (_jsx("span", { role: "button", className: "umds-breadcrumb__link", tabIndex: 0, title: titleOf(item), onClick: (event) => item.onClick && item.onClick(), onKeyDown: (event) => handleItemKey(event, item), children: item.label })) : null, isLast(index) ? (_jsx("span", { "aria-current": "page", className: "umds-breadcrumb__current", title: titleOf(item), children: item.label })) : null] }, index))) }) }));
 }
 export default Breadcrumb;

package/dist/components/Select/Select.css

@@ -230,7 +230,62 @@
      (estilo inline). A lista nunca é mais estreita que o gatilho (100%). */
   width: max-content;
   min-width: max(100%, calc(var(--umds-primitive-spacing-xxl) * 3));
-  max-width: calc(100vw - var(--umds-primitive-spacing-xxxs) * 2);
+  /* Teto de 300px, a lista do CrisDoc: o nome longo corta com reticências em vez de esticar a lista.
+     Literal intencional (sem token de largura de menu). Gatilho mais largo que isso ainda vence, porque
+     o min-width (100%) ganha do max-width. */
+  max-width: min(300px, calc(100vw - var(--umds-primitive-spacing-xxxs) * 2));
+}
+
+/* Opção do filtro numa linha só: o que não cabe nos 300px vira reticências. */
+.umds-select--filter .umds-select__option-content .umds-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ── Filtro: a opção marcada como no CrisDoc ──
+   Sem fundo, texto azul em semibold e o ✓ de 12px à ESQUERDA (no DOM ele vem depois do texto; o
+   `order` só muda a posição visual, a leitura segue a mesma). O fundo azul-claro do Select de
+   formulário continua lá; no filtro o azul do texto já diz qual está valendo. */
+.umds-select--filter .umds-select__option--selected,
+.umds-select--filter .umds-select__option--selected.umds-select__option--active {
+  background-color: transparent;
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-select--filter .umds-select__option--selected:hover {
+  background-color: var(--umds-semantic-color-background-light);
+}
+
+.umds-select--filter .umds-select__option--selected .umds-text {
+  color: inherit;
+}
+
+.umds-select--filter .umds-select__option-check {
+  order: -1;
+}
+
+.umds-select--filter .umds-select__option-check .umds-icon {
+  width: var(--umds-primitive-font-size-xxxs);
+  height: var(--umds-primitive-font-size-xxxs);
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+/* ── Filtro aberto pelo mouse: sem cursor de teclado e sem a régua azul da busca ──
+   O Select abre com a opção marcada ativa (padrão combobox) e foca a busca, e as duas marcas de foco
+   apareciam mesmo para quem clicou. Elas voltam assim que a navegação é pelo teclado
+   (`umds-select--teclado`: abriu por tecla ou andou por seta), que é para quem servem. */
+.umds-select--filter:not(.umds-select--teclado) .umds-select__option--active {
+  outline: none;
+}
+
+.umds-select--filter:not(.umds-select--teclado) .umds-select__option--active:not(:hover):not(.umds-select__option--selected) {
+  background-color: transparent;
+}
+
+.umds-select--filter:not(.umds-select--teclado) .umds-select__search-container:focus-within {
+  border-bottom-color: var(--umds-semantic-color-neutral-light-medium);
+  box-shadow: none;
 }
 
 /* Perto da borda direita da janela: a lista se alinha ao fim do gatilho (`alignEnd`, medido ao abrir). */
@@ -322,6 +377,12 @@
   border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
 }
 
+/* Amostra da opção sem cor numa lista com cores: só o contorno, tracejado. */
+.umds-select__swatch--vazio {
+  background: transparent;
+  border-style: dashed;
+}
+
 /* ── Lista flutuante (dentro de diálogo) ──
    O estilo inline (fixed, translate, largura e altura medidas) vem do componente. */
 .umds-select--floating .umds-select__dropdown {

package/dist/components/Select/Select.js

@@ -49,6 +49,7 @@ function Select(props) {
     const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
     const [shouldFocusTrigger, setShouldFocusTrigger] = useState(() => false);
     const [activeIndex, setActiveIndex] = useState(() => -1);
+    const [teclado, setTeclado] = useState(() => false);
     const [uid, setUid] = useState(() => "");
     function opened() {
         if (props.open !== undefined)
@@ -60,6 +61,16 @@ function Select(props) {
             props.variant === "search" ||
             props.variant === "combo");
     }
+    function isAmostraVazia(option) {
+        if (!isFilter() || option.color || option.value === "")
+            return false;
+        const lista = props.options || [];
+        return lista.some((o) => !!o.color);
+    }
+    function toggleByPointer() {
+        setTeclado(false);
+        toggle();
+    }
     function setOpen(next) {
         if (next === opened())
             return;
@@ -232,6 +243,7 @@ function Select(props) {
             props.variant === "combo" ? "umds-select--filter-combo" : "",
             opened() && floatMode ? "umds-select--floating" : "",
             opened() && alignEnd ? "umds-select--list-end" : "",
+            opened() && teclado ? "umds-select--teclado" : "",
             props.triggerIcon ? "umds-select--has-trigger-icon" : "",
             opensUp && props.searchVariant !== "inline"
                 ? "umds-select--placement-top"
@@ -474,6 +486,7 @@ function Select(props) {
         if (next >= opts.length)
             next = 0;
         setActiveIndex(next);
+        setTeclado(true);
     }
     function handleTriggerKeyDown(event) {
         if (props.disabled || props.readOnly)
@@ -494,6 +507,7 @@ function Select(props) {
         }
         event.preventDefault();
         if (!opened()) {
+            setTeclado(true);
             toggle();
             return;
         }
@@ -693,7 +707,7 @@ function Select(props) {
             }
         };
     }, []);
-    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(opened() && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": opened(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [props.triggerIcon ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__trigger-icon", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: props.triggerIcon }) })) : null, triggerSwatchColor() ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
+    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(opened() && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggleByPointer(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": opened(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [props.triggerIcon ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__trigger-icon", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: props.triggerIcon }) })) : null, triggerSwatchColor() ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
                                             background: triggerSwatchColor(),
                                         } })) : null, itemNoGatilho() ? (_jsx("span", { className: "umds-select__trigger-item", children: conteudoDoItemNoGatilho() })) : null, displayLabelText() && !itemNoGatilho() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
                                         props.selectionDisplay === "tags" &&
@@ -707,7 +721,7 @@ function Select(props) {
                                             .filter(Boolean)
                                             .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), decorative: true }) })) : null, option.color ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
                                                     background: option.color,
-                                                } })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: typeof props.item === "function" ? props.item({ optionData: option, option }) : props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
+                                                } })) : null, isAmostraVazia(option) ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch umds-select__swatch--vazio" })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: typeof props.item === "function" ? props.item({ optionData: option, option }) : props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
                 props.selectionDisplay === "list" &&
                 selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__selected-list", children: selectedOptionsList()?.map((opt) => (_jsxs("div", { className: "umds-select__selected-list-item", children: [_jsx(Text, { variant: "body2", children: opt.label }), _jsx("button", { type: "button", className: "umds-select__list-remove", "aria-label": removeItemAriaLabelText(opt.label), onClick: (e) => removeValue(opt.value, e), children: _jsx(Icon, { size: "sm", icon: faTrash }) })] }, opt.value))) })) : null] }));
 }

package/dist/components/Tabs/Tab.js

@@ -110,6 +110,6 @@ function Tab(props) {
         }
     }
     const tabsContext = useContext(TabsContext);
-    return (_jsxs("span", { role: "presentation", className: itemClasses(), children: [_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label }), temContador() ? (_jsx("span", { className: "umds-tabs__count", children: props.count })) : null] }), props.closable ? (_jsx("button", { type: "button", className: "umds-tabs__close", "aria-label": closeAriaText(), disabled: props.disabled, tabIndex: -1, onClick: (event) => handleClose(event), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }));
+    return (_jsxs("span", { role: "presentation", className: itemClasses(), children: [_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { customSize: "14px", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label }), temContador() ? (_jsx("span", { className: "umds-tabs__count", children: props.count })) : null] }), props.closable ? (_jsx("button", { type: "button", className: "umds-tabs__close", "aria-label": closeAriaText(), disabled: props.disabled, tabIndex: -1, onClick: (event) => handleClose(event), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }));
 }
 export default Tab;

package/dist/components/Tabs/Tabs.css

@@ -120,6 +120,9 @@
    Icon
    (o componente Icon não aceita className — o seletor mira a classe raiz
    .umds-icon dentro da tab; a cor já é herdada via variant="inherit")
+   O ícone tem 14px, a altura do texto da aba (customSize no Tab.lite.tsx).
+   Com o size="md" de 20px ele ficava maior que a palavra ao lado (decisão do
+   Cris, 13/10).
    ============================ */
 .umds-tabs__tab .umds-icon {
     flex-shrink: 0;

package/dist/teste/BreadcrumbTruncado.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/BreadcrumbTruncado.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssBreadcrumb = (await lerArquivo("../core/src/components/Breadcrumb/Breadcrumb.css")).replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+const ITENS = [
+    { label: "1Doc", href: "#" },
+    { label: "Proc. Administrativo 412/2026", onClick: () => { } },
+    { label: "Reforma da cobertura do Ginásio Poliesportivo Municipal" },
+];
+describe("Breadcrumb · truncate", () => {
+    it("truncate escreve a classe na raiz; sem a prop, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: ITENS, truncate: true }), _jsx(Breadcrumb, { items: ITENS })] }));
+        expect(container.children[0]).toHaveClass("umds-breadcrumb--truncate");
+        expect(container.children[1]).not.toHaveClass("umds-breadcrumb--truncate");
+    });
+    it("com truncate, o rótulo inteiro vai no title do link, do item clicável e da página atual; sem, nenhum title", () => {
+        const { container } = render(_jsx(Breadcrumb, { items: ITENS, truncate: true }));
+        expect(container.querySelector("a.umds-breadcrumb__link")).toHaveAttribute("title", "1Doc");
+        expect(container.querySelector("[role=button].umds-breadcrumb__link")).toHaveAttribute("title", "Proc. Administrativo 412/2026");
+        expect(container.querySelector(".umds-breadcrumb__current")).toHaveAttribute("title", "Reforma da cobertura do Ginásio Poliesportivo Municipal");
+        const sem = render(_jsx(Breadcrumb, { items: ITENS }));
+        expect(sem.container.querySelectorAll("[title]")).toHaveLength(0);
+    });
+    it("CSS: uma linha; a página atual encolhe primeiro até 80px; o texto ganha reticências; o padrão segue quebrando linha", () => {
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__list")).toMatch(/flex-wrap:\s*nowrap/);
+        const ultimo = bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__item:last-child");
+        expect(ultimo).toMatch(/flex-shrink:\s*100000;/);
+        expect(ultimo).toMatch(/min-width:\s*var\(--umds-primitive-spacing-xxl\)/);
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__sep")).toMatch(/flex-shrink:\s*0/);
+        expect(cssBreadcrumb).toMatch(/\.umds-breadcrumb--truncate \.umds-breadcrumb__current \{[^}]*text-overflow:\s*ellipsis/);
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb__list")).toMatch(/flex-wrap:\s*wrap/);
+    });
+});

package/dist/teste/SelectFiltroCorETamanho.test.js

@@ -37,14 +37,15 @@ describe("Select filtro · tamanho e fundo", () => {
     });
 });
 describe("Select · cor por opção", () => {
-    it("a lista mostra uma amostra por opção com color; sem color, não", () => {
+    it("a lista mostra uma amostra por opção com color; sem color, a amostra tracejada (filtro)", () => {
         const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter" }));
         fireEvent.click(screen.getByRole("combobox"));
         const opcoes = [...container.querySelectorAll('[role="option"]')];
         expect(opcoes[0].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
         expect(opcoes[0].querySelector(".umds-select__swatch").style.background).toContain("--umds-semantic-color-feedback-negative-pure");
         expect(opcoes[1].querySelector(".umds-select__swatch")).not.toBeNull();
-        expect(opcoes[2].querySelector(".umds-select__swatch")).toBeNull();
+        expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveClass("umds-select__swatch--vazio");
+        expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
     });
     it("o gatilho ganha a cor da opção escolhida (seleção única)", () => {
         const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", value: "revisao" }));
@@ -75,3 +76,30 @@ describe("Select · cor por opção", () => {
         expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
     });
 });
+describe("Select filtro · lista como a do CrisDoc", () => {
+    it("no filtro com cores, a opção sem cor ganha a amostra tracejada e o 'sem filtro' não ganha nenhuma", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", emptyOptionLabel: "Todos" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const vazias = container.querySelectorAll('[role="option"] .umds-select__swatch--vazio');
+        expect(vazias).toHaveLength(1);
+        expect(vazias[0].closest('[role="option"]')).toHaveTextContent("Sem marcador");
+        expect(screen.getByRole("option", { name: "Todos" }).querySelector(".umds-select__swatch")).toBeNull();
+    });
+    it("no Select de formulário a opção sem cor segue sem amostra", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select__swatch--vazio")).toBeNull();
+    });
+    it("aberto pelo mouse não marca navegação por teclado; tecla e seta marcam", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores" }));
+        const raiz = () => container.firstElementChild;
+        const gatilho = screen.getByRole("combobox");
+        fireEvent.click(gatilho);
+        expect(raiz()).not.toHaveClass("umds-select--teclado");
+        fireEvent.keyDown(gatilho, { key: "ArrowDown" });
+        expect(raiz()).toHaveClass("umds-select--teclado");
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        fireEvent.keyDown(gatilho, { key: "Enter" });
+        expect(raiz()).toHaveClass("umds-select--teclado");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.12.1",
-    "@1doc/1ds-tokens": "0.7.0"
+    "@1doc/1ds-tokens": "0.7.0",
+    "@1doc/1ds-core": "2.13.0"
   },
   "publishConfig": {
     "access": "public"

package/src/teste/BreadcrumbTruncado.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssBreadcrumb = (await lerArquivo("../core/src/components/Breadcrumb/Breadcrumb.css")).replace(/\r\n/g, "\n");
+const bloco = (texto: string, seletor: string) => {
+  const inicio = texto.indexOf(seletor + " {");
+  expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+  return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+
+const ITENS = [
+  { label: "1Doc", href: "#" },
+  { label: "Proc. Administrativo 412/2026", onClick: () => {} },
+  { label: "Reforma da cobertura do Ginásio Poliesportivo Municipal" },
+];
+
+describe("Breadcrumb · truncate", () => {
+  it("truncate escreve a classe na raiz; sem a prop, não", () => {
+    const { container } = render(
+      <>
+        <Breadcrumb items={ITENS} truncate />
+        <Breadcrumb items={ITENS} />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-breadcrumb--truncate");
+    expect(container.children[1]).not.toHaveClass("umds-breadcrumb--truncate");
+  });
+
+  it("com truncate, o rótulo inteiro vai no title do link, do item clicável e da página atual; sem, nenhum title", () => {
+    const { container } = render(<Breadcrumb items={ITENS} truncate />);
+    expect(container.querySelector("a.umds-breadcrumb__link")).toHaveAttribute("title", "1Doc");
+    expect(container.querySelector("[role=button].umds-breadcrumb__link")).toHaveAttribute("title", "Proc. Administrativo 412/2026");
+    expect(container.querySelector(".umds-breadcrumb__current")).toHaveAttribute(
+      "title",
+      "Reforma da cobertura do Ginásio Poliesportivo Municipal",
+    );
+    const sem = render(<Breadcrumb items={ITENS} />);
+    expect(sem.container.querySelectorAll("[title]")).toHaveLength(0);
+  });
+
+  it("CSS: uma linha; a página atual encolhe primeiro até 80px; o texto ganha reticências; o padrão segue quebrando linha", () => {
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__list")).toMatch(/flex-wrap:\s*nowrap/);
+    const ultimo = bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__item:last-child");
+    expect(ultimo).toMatch(/flex-shrink:\s*100000;/);
+    expect(ultimo).toMatch(/min-width:\s*var\(--umds-primitive-spacing-xxl\)/);
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__sep")).toMatch(/flex-shrink:\s*0/);
+    expect(cssBreadcrumb).toMatch(/\.umds-breadcrumb--truncate \.umds-breadcrumb__current \{[^}]*text-overflow:\s*ellipsis/);
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb__list")).toMatch(/flex-wrap:\s*wrap/);
+  });
+});

package/src/teste/SelectFiltroCorETamanho.test.tsx

@@ -43,14 +43,15 @@ describe("Select filtro · tamanho e fundo", () => {
 });
 
 describe("Select · cor por opção", () => {
-  it("a lista mostra uma amostra por opção com color; sem color, não", () => {
+  it("a lista mostra uma amostra por opção com color; sem color, a amostra tracejada (filtro)", () => {
     const { container } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" />);
     fireEvent.click(screen.getByRole("combobox"));
     const opcoes = [...container.querySelectorAll('[role="option"]')];
     expect(opcoes[0].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
     expect((opcoes[0].querySelector(".umds-select__swatch") as HTMLElement).style.background).toContain("--umds-semantic-color-feedback-negative-pure");
     expect(opcoes[1].querySelector(".umds-select__swatch")).not.toBeNull();
-    expect(opcoes[2].querySelector(".umds-select__swatch")).toBeNull();
+    expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveClass("umds-select__swatch--vazio");
+    expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
   });
 
   it("o gatilho ganha a cor da opção escolhida (seleção única)", () => {
@@ -88,3 +89,35 @@ describe("Select · cor por opção", () => {
     expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
   });
 });
+
+describe("Select filtro · lista como a do CrisDoc", () => {
+  it("no filtro com cores, a opção sem cor ganha a amostra tracejada e o 'sem filtro' não ganha nenhuma", () => {
+    const { container } = render(
+      <Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" emptyOptionLabel="Todos" />,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    const vazias = container.querySelectorAll('[role="option"] .umds-select__swatch--vazio');
+    expect(vazias).toHaveLength(1);
+    expect(vazias[0].closest('[role="option"]')).toHaveTextContent("Sem marcador");
+    expect(screen.getByRole("option", { name: "Todos" }).querySelector(".umds-select__swatch")).toBeNull();
+  });
+
+  it("no Select de formulário a opção sem cor segue sem amostra", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select__swatch--vazio")).toBeNull();
+  });
+
+  it("aberto pelo mouse não marca navegação por teclado; tecla e seta marcam", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    const gatilho = screen.getByRole("combobox");
+    fireEvent.click(gatilho);
+    expect(raiz()).not.toHaveClass("umds-select--teclado");
+    fireEvent.keyDown(gatilho, { key: "ArrowDown" });
+    expect(raiz()).toHaveClass("umds-select--teclado");
+    fireEvent.keyDown(gatilho, { key: "Escape" });
+    fireEvent.keyDown(gatilho, { key: "Enter" });
+    expect(raiz()).toHaveClass("umds-select--teclado");
+  });
+});