@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/SegmentedControl/SegmentedControl.css

@@ -184,3 +184,27 @@
 [data-density="touch"] .umds-segmented__item {
   min-height: var(--umds-semantic-field-height);
 }
+
+/* ── Contador em pílula (count) ──
+   Mesmos 18px da pílula do Tab (16 + 2, dois degraus do DS somados; sem token
+   próprio): cinza no segmento solto, branco sobre o azul do escolhido. */
+.umds-segmented__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+  min-width: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+  padding: 0 var(--umds-primitive-spacing-quarck); /* 4px */
+  border-radius: var(--umds-primitive-border-radius-pill);
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  line-height: 1;
+}
+
+.umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count {
+  background-color: var(--umds-semantic-color-neutral-light-pure);
+  color: var(--umds-semantic-color-primary-pure);
+}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -6,6 +6,7 @@ import './SegmentedControl.css';
  * @property {any} icon - Ícone Font Awesome antes do texto. Com `label` vazio, o segmento vira só o ícone — e aí `ariaLabel` é obrigatório.
  * @property {string} ariaLabel - Nome acessível do segmento quando não há texto visível.
  * @property {boolean} disabled - Desabilita só este segmento.
+ * @property {number|string} count - Contador em pílula depois do texto (ex.: "Todas 31"), como o da `Tab`: cinza no segmento solto, branco sobre o azul do escolhido. É lido junto do nome do segmento. 0 aparece; vazio e `undefined` não.
  */
 export interface SegmentedControlOption {
     label?: string;
@@ -13,6 +14,7 @@ export interface SegmentedControlOption {
     icon?: any;
     ariaLabel?: string;
     disabled?: boolean;
+    count?: number | string;
     [key: string]: any;
 }
 /**

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -33,6 +33,9 @@ function SegmentedControl(props) {
     function labelledByText() {
         return props.label ? labelId() : undefined;
     }
+    function groupAriaLabel() {
+        return props.label && !baseId() ? props.label : undefined;
+    }
     function describedByText() {
         return props.errorMessage ? errorId() : undefined;
     }
@@ -60,14 +63,19 @@ function SegmentedControl(props) {
     function estaEscolhido(option) {
         return option.value === currentValue();
     }
+    function temContador(option) {
+        return (option.count !== undefined && option.count !== null && option.count !== "");
+    }
     function estaDesabilitado(option) {
         return !!props.disabled || !!option.disabled;
     }
     function rotuloDoSegmento(option) {
         // Com `label` visivel, o `ariaLabel` e IGNORADO de proposito: nome
         // acessivel diferente do texto visivel quebra o WCAG 2.5.3.
+        // Sem id (antes do onMount) o label-for nao liga a nada: o nome e o
+        // proprio texto visivel, o que tambem respeita o 2.5.3.
         if (option.label)
-            return undefined;
+            return baseId() ? undefined : option.label;
         // Ultimo recurso. `value` e nome ruim, mas radio anonimo e pior — e o
         // TypeScript nao pega, porque `label` e `ariaLabel` sao os dois opcionais.
         return option.ariaLabel || option.value;
@@ -83,6 +91,6 @@ function SegmentedControl(props) {
         if (!props.id)
             setUid(gerarId("umds-segmented"));
     }, []);
-    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsxs("span", { className: "umds-segmented__group-label", id: labelId(), children: [props.label, props.required ? (_jsx("span", { className: "umds-segmented__required", children: " *" })) : null] })) : null, _jsx("div", { role: "radiogroup", className: "umds-segmented__track", "aria-labelledby": labelledByText(), "aria-describedby": describedByText(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), children: optionList()?.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", className: "umds-segmented__input", id: inputId(index), name: groupName(), value: option.value, checked: estaEscolhido(option), disabled: estaDesabilitado(option), "aria-label": rotuloDoSegmento(option), onChange: (event) => handleChange(option) }), _jsx("label", { className: "umds-segmented__item", htmlFor: inputId(index), children: _jsxs("span", { className: "umds-segmented__conteudo", children: [option.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: option.icon })) : null, option.label ? (_jsx("span", { className: "umds-segmented__texto", children: option.label })) : null] }) })] }, option.value))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", className: "umds-segmented__error-message", id: errorId(), children: props.errorMessage })) : null] }));
+    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsxs("span", { className: "umds-segmented__group-label", id: labelId(), children: [props.label, props.required ? (_jsx("span", { className: "umds-segmented__required", children: " *" })) : null] })) : null, _jsx("div", { role: "radiogroup", className: "umds-segmented__track", "aria-labelledby": labelledByText(), "aria-label": groupAriaLabel(), "aria-describedby": describedByText(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), children: optionList()?.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", className: "umds-segmented__input", id: inputId(index), name: groupName(), value: option.value, checked: estaEscolhido(option), disabled: estaDesabilitado(option), "aria-label": rotuloDoSegmento(option), onChange: (event) => handleChange(option) }), _jsx("label", { className: "umds-segmented__item", htmlFor: inputId(index), children: _jsxs("span", { className: "umds-segmented__conteudo", children: [option.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: option.icon })) : null, option.label ? (_jsx("span", { className: "umds-segmented__texto", children: option.label })) : null, temContador(option) ? (_jsx("span", { className: "umds-segmented__count", children: option.count })) : null] }) })] }, option.value))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", className: "umds-segmented__error-message", id: errorId(), children: props.errorMessage })) : null] }));
 }
 export default SegmentedControl;

package/dist/components/Select/Select.css

@@ -157,6 +157,162 @@
   overflow: hidden;
 }
 
+/* ── Lista que abre para cima (placement top, ou auto sem espaço embaixo) ── */
+.umds-select--placement-top .umds-select__dropdown {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+/* ── Rodapé da lista (slot footer): ações fixas abaixo das opções ── */
+.umds-select__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs);
+  border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
+  background-color: var(--umds-semantic-color-background-elevated);
+}
+
+/* ── Variante filter: botão de filtro de barra de ferramentas ──
+   Contornado em azul, largura do conteúdo, lista mais larga que o botão. */
+.umds-select--filter {
+  width: auto;
+}
+
+.umds-select--filter.umds-select--full-width {
+  width: 100%;
+}
+
+.umds-select--filter .umds-select__container {
+  width: auto;
+}
+
+.umds-select--filter.umds-select--full-width .umds-select__container {
+  width: 100%;
+}
+
+/* Fundo branco: o azul-claro do gatilho só vem depois de escolhido um valor (`--has-value`,
+   abaixo), que é quando o filtro está recortando a lista. O tamanho padrão é o sm (32px). */
+.umds-select--filter .umds-select__trigger {
+  width: auto;
+  gap: var(--umds-primitive-spacing-nano);
+  border-color: var(--umds-semantic-color-primary-pure);
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter.umds-select--has-value .umds-select__trigger {
+  background-color: var(--umds-semantic-color-primary-light);
+}
+
+.umds-select--filter.umds-select--full-width .umds-select__trigger {
+  width: 100%;
+}
+
+.umds-select--filter .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-select--filter .umds-select__trigger .umds-text,
+.umds-select--filter .umds-select__actions {
+  color: var(--umds-semantic-color-primary-pure);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+/* Fonte de 12px no filtro pequeno (o tamanho do CrisDoc); no md segue 14px. */
+.umds-select--filter.umds-select--sm .umds-select__trigger .umds-text {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+.umds-select--filter .umds-select__dropdown {
+  /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. */
+  width: max-content;
+  min-width: max(100%, calc(var(--umds-primitive-spacing-xxl) * 3));
+  max-width: calc(100vw - var(--umds-primitive-spacing-xxxs) * 2);
+}
+
+/* ── Variante search: o filtro dentro de uma barra de busca ──
+   Altura de campo e contorno neutro, para ficar ao lado do campo de busca. */
+.umds-select--filter-search .umds-select__trigger {
+  border-color: var(--umds-semantic-field-border-default);
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter-search.umds-select--has-value .umds-select__trigger {
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter-search .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-select--filter-search .umds-select__trigger .umds-text,
+.umds-select--filter-search .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-select--filter-search .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+/* ── Variante combo: o filtro colado a outro controle ──
+   Sem contorno nem raio próprios: quem desenha a borda é o contêiner do combo. */
+.umds-select--filter-combo .umds-select__trigger {
+  border-color: transparent;
+  border-radius: var(--umds-primitive-border-radius-none);
+  background-color: transparent;
+}
+
+.umds-select--filter-combo.umds-select--has-value .umds-select__trigger {
+  background-color: transparent;
+}
+
+.umds-select--filter-combo .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: transparent;
+  background-color: var(--umds-semantic-color-background-light);
+}
+
+.umds-select--filter-combo .umds-select__trigger .umds-text,
+.umds-select--filter-combo .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+/* O foco do combo é o anel do próprio gatilho, por dentro (o contêiner pode cortar o de fora). */
+.umds-select--filter-combo .umds-select__trigger:focus-visible,
+.umds-select--filter-combo.umds-select--open .umds-select__trigger {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+/* ── Ícone e amostra de cor no gatilho (triggerIcon, triggerSwatch) ── */
+.umds-select__trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+.umds-select--filter .umds-select__trigger-icon {
+  color: inherit;
+}
+
+.umds-select__swatch {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-mini);
+  height: var(--umds-primitive-spacing-mini);
+  border-radius: var(--umds-primitive-border-radius-xs);
+  /* Anel de 1px: amostra clara não some no fundo branco, nem escura no escuro. */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+/* ── Lista flutuante (dentro de diálogo) ──
+   O estilo inline (fixed, translate, largura e altura medidas) vem do componente. */
+.umds-select--floating .umds-select__dropdown {
+  box-sizing: border-box;
+}
+
 /* ── Busca no dropdown ── */
 .umds-select__search-container {
   display: flex;
@@ -382,6 +538,14 @@
   border-color: var(--umds-semantic-field-border-default);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-select--readonly .umds-select__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* O campo de busca precisa de indicador de foco — o painel foca ele ao abrir.
    Um outline no <input> desenhava um retângulo azul solto no meio do painel,
    porque o input não tem borda própria para o anel acompanhar. O indicador vai

package/dist/components/Select/Select.d.ts

@@ -3,10 +3,13 @@ import './Select.css';
  * Opção exibida na lista do Select.
  * @property {string} label - Texto visível da opção.
  * @property {any} value - Valor associado à opção.
+ * @property {string} color - Cor da opção, um token (`var(--umds-semantic-color-...)` ou `var(--umds-primitive-...)`): uma amostra de 12px antes do texto na lista e, com a opção escolhida (seleção única), no gatilho. Decorativa: o texto diz a opção. Sem a prop, nada muda.
  */
 export interface SelectOption {
     label: string;
     value: string | number;
+    /** Cor da opção (token): amostra antes do texto, e no gatilho quando escolhida. */
+    color?: string;
     [key: string]: any;
 }
 /**
@@ -40,6 +43,16 @@ export interface SelectOption {
  * @property {string} ariaLabel - Nome acessível quando não há label visível.
  * @property {string} id - ID base dos elementos internos. Gerado automaticamente se omitido.
  * @property {function} onChange - Callback com o(s) valor(es) selecionado(s).
+ * @property {string} placement - Onde a lista abre: 'bottom' (padrão) | 'top' | 'auto'. O `auto` mede o espaço da janela E do ancestral que rola ou corta (um corpo de modal, um painel com overflow): abre para cima quando falta espaço embaixo e há mais em cima, e limita a altura da lista ao espaço que sobra.
+ *
+ * Dentro de um diálogo (`role="dialog"` ou `aria-modal`), a lista abre por cima dele: ela passa a `position: fixed`, ancorada no gatilho pelo `@floating-ui/dom`, e não é cortada pelo `overflow` do corpo do modal.
+ * @property {string} variant - 'default' | 'filter' | 'search' | 'combo'. O `filter` é o botão de filtro de barra de ferramentas: 32px (`size="sm"` é o padrão das variantes de filtro) e fonte de 12px, fundo branco com contorno azul (azul-claro só depois de escolhido um valor), largura do conteúdo, lista mais larga que o botão, busca focada ao abrir. `search` é o mesmo filtro dentro de uma barra de busca (altura de campo, contorno neutro). `combo` é o filtro colado a outro controle (sem contorno nem raio próprios: quem desenha a borda é o contêiner). Combine com `searchable`, `emptyOptionLabel` e o slot `footer`.
+ * @property {boolean} open - Abre/fecha a lista de fora (modo controlado). Sem ela, o Select controla o próprio estado. Use com `onOpenChange`: o filtro com ação no rodapé fecha a lista antes de abrir um modal.
+ * @property {function} onOpenChange - Chamado quando a lista pede para abrir ou fechar (clique, teclado, clique fora, Esc, escolha de opção). No modo controlado, é quem decide o novo `open`.
+ * @property {IconProp} triggerIcon - Ícone à esquerda do texto do gatilho (objeto Font Awesome importado). Decorativo.
+ * @property {string} triggerSwatch - Amostra de cor à esquerda do texto do gatilho: um token (`var(--umds-semantic-color-...)`) ou `var(--umds-primitive-...)`. Decorativa; o texto diz a opção.
+ * @property {string} emptyOptionLabel - Opção "sem filtro" no topo da lista (seleção única): marcada quando nada está escolhido; ao escolher, `onChange` recebe `""` e o campo volta a mostrar o `placeholder` (o nome do filtro).
+ * @property {any} footer - Rodapé fixo da lista, com ações ("Gerenciar marcadores"). Passe o elemento correspondente (React node ou Vue slot `footer`).
  * @quandoUsar Escolher UM valor de uma lista fechada. O valor selecionado fica visível no campo.
  * @quandoNaoUsar Para escolher VÁRIOS valores — use `MultiSelect`. Para um menu de AÇÕES (editar, excluir, duplicar) em vez de valores, use `Dropdown`. Para 2 a 4 opções mutuamente exclusivas sempre visíveis, use `Radio`.
  */
@@ -77,6 +90,26 @@ export interface SelectProps {
     errorMessage?: string;
     fullWidth?: boolean;
     size?: "sm" | "md" | "lg";
+    /** Onde a lista abre. @default 'bottom' */
+    placement?: "bottom" | "top" | "auto";
+    /** Variante visual. `filter`, `search` e `combo` são o filtro de barra. @default 'default' */
+    variant?: "default" | "filter" | "search" | "combo";
+    /**
+     * Abre/fecha a lista de fora (modo controlado). `any` de propósito: no Vue uma
+     * prop `boolean` sem valor chega como `false`, e `props.open !== undefined`
+     * ficaria sempre verdadeiro (o Select se acharia controlado e nunca abriria).
+     */
+    open?: any;
+    /** Pede para abrir ou fechar a lista. No modo controlado, o pai decide o novo `open`. */
+    onOpenChange?: (open: boolean) => void;
+    /** Ícone à esquerda do texto do gatilho. */
+    triggerIcon?: IconProp;
+    /** Amostra de cor à esquerda do texto do gatilho (token de cor). */
+    triggerSwatch?: string;
+    /** Opção "sem filtro" no topo da lista (seleção única). Escolhê-la chama `onChange("")`. */
+    emptyOptionLabel?: string;
+    /** Rodapé fixo da lista (ações). React node ou slot `footer` no Vue. */
+    footer?: any;
     pagination?: boolean;
     hasMore?: boolean;
     onLoadMore?: () => void;
@@ -93,5 +126,6 @@ export interface SelectProps {
     ariaLabel?: string;
     className?: string;
 }
+import { IconProp } from "../Icon/Icon";
 declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
 export default Select;