@1doc/1ds-react 2.14.0 → 2.15.0

package/dist/components/Avatar/Avatar.js

@@ -1,23 +1,47 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './Avatar.css';
+import { useState, useEffect } from "react";
 function Avatar(props) {
+    const [imagemFalhou, setImagemFalhou] = useState(() => false);
+    function mostraFoto() {
+        return !!props.src && !imagemFalhou;
+    }
+    function iniciais() {
+        const partes = (props.name || "").trim().split(/\s+/).filter(Boolean);
+        if (partes.length === 0)
+            return "";
+        const primeira = partes[0].charAt(0);
+        const ultima = partes.length > 1 ? partes[partes.length - 1].charAt(0) : "";
+        return (primeira + ultima).toUpperCase();
+    }
+    function aoFalhar(event) {
+        setImagemFalhou(true);
+        if (props.onError)
+            props.onError(event);
+    }
     function classes() {
         return [
             "umds-avatar",
             `umds-avatar--${props.size || "md"}`,
-            `umds-avatar--${props.type || (props.src ? "photo" : "letter")}`,
+            `umds-avatar--${props.type || (props.src && !imagemFalhou ? "photo" : "letter")}`,
             props.className,
         ]
             .filter(Boolean)
             .join(" ");
     }
     function computedRole() {
-        return props.ariaLabel || props.src ? "img" : undefined;
+        return props.ariaLabel || props.src || props.name ? "img" : undefined;
     }
     function computedAriaLabel() {
-        return props.ariaLabel || (props.src && props.alt ? props.alt : undefined);
+        return (props.ariaLabel ||
+            (props.src && props.alt ? props.alt : undefined) ||
+            props.name ||
+            undefined);
     }
-    return (_jsxs("div", { title: props.title, role: computedRole(), "aria-label": computedAriaLabel(), className: classes(), children: [props.src ? (_jsx("img", { className: "umds-avatar__image", src: props.src, alt: props.alt || "", onError: (event) => props.onError && props.onError() })) : null, !props.src ? _jsx(_Fragment, { children: props.children }) : null] }));
+    useEffect(() => {
+        setImagemFalhou(false);
+    }, [props.src]);
+    return (_jsxs("div", { title: props.title, role: computedRole(), "aria-label": computedAriaLabel(), className: classes(), children: [mostraFoto() ? (_jsx("img", { className: "umds-avatar__image", src: props.src, alt: props.alt || "", onError: (event) => aoFalhar(event) })) : null, !mostraFoto() ? (_jsx(_Fragment, { children: props.name ? _jsx(_Fragment, { children: iniciais() }) : _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default Avatar;

package/dist/components/BottomNavigation/BottomNavigation.css

@@ -104,7 +104,7 @@
   box-sizing: border-box;
   padding-bottom: var(--umds-primitive-spacing-quarck); /* 4px */
   border-top: none;
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-top-sm);
   /* o disco ultrapassa o topo da barra: sem isto ele seria recortado */
   overflow: visible;
 }
@@ -131,7 +131,7 @@
      espaço, para o rótulo não descer junto e a linha de rótulos ficar reta. */
   margin-top: -12px;
   margin-bottom: -4px;
-  box-shadow: var(--umds-semantic-shadow-sm);
+  box-shadow: var(--umds-semantic-shadow-bottom-sm);
   flex-shrink: 0;
 }
 

package/dist/components/BottomSheet/BottomSheet.css

@@ -45,7 +45,7 @@
   background-color: var(--umds-semantic-color-background-elevated);
   border-top-left-radius: var(--umds-primitive-border-radius-sm);
   border-top-right-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-lg);
+  box-shadow: var(--umds-semantic-shadow-top-sm);
   outline: none;
   animation: umds-bottomsheet-entrada var(--umds-semantic-motion-duration-base)
     var(--umds-semantic-motion-easing-standard);
@@ -153,7 +153,7 @@
   margin: 0 calc(-1 * var(--umds-primitive-spacing-xxxs))
     calc(-1 * var(--umds-primitive-spacing-xxxs));
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-top-sm);
   flex-shrink: 0;
 }
 

package/dist/components/Box/Box.css

@@ -96,9 +96,9 @@
 .umds-box--radius-circular { border-radius: var(--umds-primitive-border-radius-circular); }
 
 /* ── Elevação ── */
-.umds-box--shadow-level1 { box-shadow: var(--umds-primitive-shadow-level-1); }
-.umds-box--shadow-level2 { box-shadow: var(--umds-primitive-shadow-level-2); }
-.umds-box--shadow-level3 { box-shadow: var(--umds-primitive-shadow-level-3); }
+.umds-box--shadow-level1 { box-shadow: var(--umds-semantic-shadow-bottom-md); }
+.umds-box--shadow-level2 { box-shadow: var(--umds-semantic-shadow-bottom-lg); }
+.umds-box--shadow-level3 { box-shadow: var(--umds-semantic-shadow-bottom-xl); }
 
 /* ── Layout flex (direction, gap, align, justify, wrap) ──
    Liga quando qualquer uma das props é passada; mesmos nomes e valores do Stack. */

package/dist/components/Card/Card.css

@@ -15,10 +15,10 @@
 
 /* ── Sombras (tokens semânticos oficiais — TOKEN-MAP §3b) ── */
 .umds-card--shadow-none { box-shadow: none; }
-.umds-card--shadow-xs   { box-shadow: var(--umds-semantic-shadow-xs); }
-.umds-card--shadow-sm   { box-shadow: var(--umds-semantic-shadow-sm); }
-.umds-card--shadow-md   { box-shadow: var(--umds-semantic-shadow-md); }
-.umds-card--shadow-lg   { box-shadow: var(--umds-semantic-shadow-lg); }
+.umds-card--shadow-xs   { box-shadow: var(--umds-semantic-shadow-bottom-xs); }
+.umds-card--shadow-sm   { box-shadow: var(--umds-semantic-shadow-bottom-sm); }
+.umds-card--shadow-md   { box-shadow: var(--umds-semantic-shadow-bottom-md); }
+.umds-card--shadow-lg   { box-shadow: var(--umds-semantic-shadow-bottom-lg); }
 
 /* ── Padding ── */
 .umds-card--padding-none { padding: 0; }
@@ -37,7 +37,7 @@
 
 .umds-card--hoverable:hover {
   border-color: var(--umds-semantic-color-primary-medium); /* #6393DB */
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
   transform: translateY(-1px);
 }
 

package/dist/components/Chart/Chart.css

@@ -215,7 +215,7 @@
   border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
   background-color: var(--umds-semantic-color-neutral-light-pure);
-  box-shadow: var(--umds-primitive-shadow-level-2);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
   line-height: var(--umds-primitive-font-line-height-lg);
   white-space: nowrap;

package/dist/components/Coachmark/Coachmark.css

@@ -64,7 +64,7 @@
   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);
+  box-shadow: var(--umds-semantic-shadow-bottom-xl);
   outline: none;
 }
 

package/dist/components/Combobox/Combobox.css

@@ -231,7 +231,7 @@
   background-color: var(--umds-semantic-color-background-elevated);
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   z-index: var(--umds-semantic-layer-popover);
   max-height: 300px; /* literal, igual ao Select — candidato a novo token */
   display: flex;

package/dist/components/ConfirmDialog/ConfirmDialog.css

@@ -39,7 +39,7 @@
 .umds-confirm-dialog {
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px universal (rodada ago/2026) — era md */
-  box-shadow: var(--umds-semantic-shadow-lg); /* protótipo --shadow-lg */
+  box-shadow: var(--umds-semantic-shadow-center-xl); /* modal: mesma sombra do Modal */
   width: 100%;
   max-width: 440px;
   overflow: hidden;

package/dist/components/DatePicker/DatePicker.css

@@ -178,7 +178,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   padding: var(--umds-primitive-spacing-xxxs); /* 16px */
   gap: var(--umds-primitive-spacing-xxxs); /* 16px */
   box-sizing: border-box;

package/dist/components/Drawer/Drawer.css

@@ -71,7 +71,7 @@
   box-sizing: border-box;
   padding: var(--umds-primitive-spacing-xxxs);
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-lg);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
   outline: none;
 }
 
@@ -189,7 +189,7 @@
   margin: 0 calc(-1 * var(--umds-primitive-spacing-xxxs))
     calc(-1 * var(--umds-primitive-spacing-xxxs));
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   flex-shrink: 0;
 }
 

package/dist/components/Dropdown/Dropdown.css

@@ -35,7 +35,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
   border-radius: var(--umds-primitive-border-radius-sm); /* era 12px (protótipo --radius-lg) — snap 14/07: painel overlay → md */
-  box-shadow: var(--umds-semantic-shadow-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
   font-family: var(--umds-semantic-font-family-base);
   min-width: 160px; /* dimensão do protótipo sem token 1DS */
   transition: opacity var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);

package/dist/components/Dropdown/Dropdown.d.ts

@@ -10,8 +10,16 @@ import './Dropdown.css';
  * @property {string} href - Item que navega: vira `<a>` de verdade (Ctrl+clique e "abrir em nova aba" funcionam). O `onSelect` continua sendo chamado.
  * @property {string} target - Destino do link (`_blank` ganha `rel="noopener noreferrer"`).
  * @property {string} rel - Relação do link; sobrescreve o padrão do `target`.
+ * @property {function} onSelect - Ação deste item: chamada ao escolhê-lo, antes do `onSelect` do Dropdown. Dispensa o switch por `key` e o cast para um tipo próprio.
+ *
+ * O item aceita campos próprios (`command`, `id`, `payload`...), que voltam
+ * intactos no `onSelect`: não é preciso converter para outro tipo.
  */
 export interface DropdownItem {
+    /** Ação deste item, chamada ao escolhê-lo (antes do `onSelect` do Dropdown). */
+    onSelect?: (item: DropdownItem) => void;
+    /** Campos próprios do produto (`command`, `payload`...) voltam intactos no `onSelect`. */
+    [campo: string]: any;
     key: string;
     label: string;
     icon?: IconProp;

package/dist/components/Dropdown/Dropdown.js

@@ -211,6 +211,8 @@ function Dropdown(props) {
     function handleSelect(item) {
         if (item.disabled)
             return;
+        if (item.onSelect)
+            item.onSelect(item);
         if (props.onSelect) {
             props.onSelect(item);
         }

package/dist/components/EmptyState/EmptyState.css

@@ -130,3 +130,15 @@
   outline: 2px solid var(--umds-semantic-color-primary-pure);
   outline-offset: 2px;
 }
+
+/* ── fill: ocupa e centraliza no espaço disponível ──
+   Para o vazio de uma coluna que rola: cresce no pai flex (flex: 1) e, num pai
+   com altura definida, ocupa a altura toda (min-height). O conteúdo continua
+   centralizado pela regra base. */
+.umds-empty-state--fill {
+  flex: 1 1 auto;
+  align-self: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -11,6 +11,7 @@ import './EmptyState.css';
  * @property {function} onAction - Callback acionado ao clicar no botão de ação
  * @property {string} size - Tamanho do bloco: 'sm' | 'md' | 'lg'
  * @property {string} className - Classes CSS adicionais
+ * @property {boolean} fill - Ocupa e centraliza no espaço disponível: cresce no pai flex e, num pai com altura definida, fica no meio dele (o vazio de uma coluna que rola)
  * @quandoUsar Quando NÃO HÁ dados para mostrar: lista vazia, busca sem resultado, área ainda não configurada. Traz ícone, mensagem e ação opcional.
  * @quandoNaoUsar Enquanto os dados ainda estão CARREGANDO — use `Skeleton` ou `Spinner`. Estado vazio é resposta definitiva, não espera.
  */
@@ -22,6 +23,8 @@ export interface EmptyStateProps {
     actionLabel?: string;
     onAction?: () => void;
     size?: "sm" | "md" | "lg";
+    /** Ocupa e centraliza no espaço disponível (coluna que rola, painel). @default false */
+    fill?: boolean;
     className?: string;
 }
 import { IconProp } from "../Icon/Icon";

package/dist/components/EmptyState/EmptyState.js

@@ -7,6 +7,7 @@ function EmptyState(props) {
         return [
             "umds-empty-state",
             `umds-empty-state--${props.size || "md"}`,
+            props.fill ? "umds-empty-state--fill" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/Kanban/Kanban.css

@@ -65,7 +65,7 @@
 
 .umds-kanban__handle:hover .umds-kanban-card {
   border-color: var(--umds-semantic-color-primary-medium);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-kanban__handle:focus {
@@ -80,7 +80,7 @@
 /* Pego pelo teclado: o cartão "levanta". */
 .umds-kanban__item--pego .umds-kanban-card {
   border-color: var(--umds-semantic-color-primary-pure);
-  box-shadow: var(--umds-semantic-shadow-lg);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
 }
 
 /* Origem do arrasto com o ponteiro: fica o lugar, esmaecido. */

package/dist/components/Kanban/KanbanCard.css

@@ -18,7 +18,7 @@
   border: 1px solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-xs);
+  box-shadow: var(--umds-semantic-shadow-bottom-xs);
   font-family: var(--umds-semantic-font-family-base);
   color: var(--umds-semantic-color-neutral-dark-pure);
   text-align: left;
@@ -33,7 +33,7 @@
 
 .umds-kanban-card--interativo:hover {
   border-color: var(--umds-semantic-color-primary-medium);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-kanban-card--interativo:focus-visible {

package/dist/components/List/List.css

@@ -34,6 +34,15 @@ ol.umds-list {
   justify-content: center;
 }
 
+/* emptyFill: a lista vazia ocupa o espaço do pai (coluna que rola, painel) e o
+   EmptyState (fill) fica no meio dele. */
+.umds-list--empty-fill {
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: 100%;
+  min-height: 100%;
+}
+
 /* ── <li> que envolve a linha ── */
 .umds-list__item {
   display: block;
@@ -180,4 +189,31 @@ ol.umds-list {
   flex-shrink: 0;
   align-items: center;
   gap: var(--umds-primitive-spacing-quarck); /* 4px */
-}
+}
+/* ── variant="primary": o item em destaque (Central de Ações) ──
+   Fundo azul-claro e hover um tom acima, como o cartão da referência. Não é
+   seleção (sem aria-current). O fundo é o mesmo azul-claro da seleção; o que\n   muda é o hover, que escurece em vez de clarear. */
+.umds-list-item--primary {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list-item--primary.umds-list-item--interactive:hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-medium) 35%,
+    var(--umds-semantic-color-primary-light)
+  );
+}
+
+/* Com ações, a superfície passa para o li (como a seleção). */
+.umds-list__item:has(> .umds-list-item--primary):has(> .umds-list-item__actions) {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list__item:has(> .umds-list-item--primary.umds-list-item--interactive):has(> .umds-list-item__actions):hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-medium) 35%,
+    var(--umds-semantic-color-primary-light)
+  );
+}

package/dist/components/List/List.d.ts

@@ -32,6 +32,7 @@ export type ListTag = "ul" | "ol";
  * @property {string} emptyDescription - Texto de apoio do estado vazio
  * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto do Font Awesome)
  * @property {string} emptySize - Tamanho do estado vazio: 'sm' (padrão, compacto) | 'md' | 'lg'
+ * @property {boolean} emptyFill - O estado vazio ocupa e centraliza no espaço disponível (coluna que rola, painel de altura fixa)
  * @property {string} emptyActionLabel - Rótulo do botão do estado vazio (junto de onEmptyAction)
  * @property {function} onEmptyAction - Callback do botão do estado vazio
  * @property {any} empty - Slot `empty`: conteúdo próprio no lugar do EmptyState
@@ -61,6 +62,8 @@ export interface ListProps {
     emptyIcon?: IconProp;
     /** Tamanho do estado vazio. @default 'sm' */
     emptySize?: "sm" | "md" | "lg";
+    /** O estado vazio ocupa e centraliza no espaço disponível. @default false */
+    emptyFill?: boolean;
     /** Rótulo do botão do estado vazio (exibido junto de `onEmptyAction`). */
     emptyActionLabel?: string;
     /** Chamado no botão do estado vazio. */

package/dist/components/List/List.js

@@ -21,7 +21,11 @@ function List(props) {
             .join(" ");
     }
     function emptyClasses() {
-        return ["umds-list umds-list--empty", props.className]
+        return [
+            "umds-list umds-list--empty",
+            props.emptyFill ? "umds-list--empty-fill" : "",
+            props.className,
+        ]
             .filter(Boolean)
             .join(" ");
     }
@@ -48,6 +52,6 @@ function List(props) {
         }
         return out;
     }
-    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", id: props.id, ...htmlAttrs(), className: emptyClasses(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), ...emptyActionProps() })) }) })) : null, showItems() && elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, showItems() && elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", id: props.id, ...htmlAttrs(), className: emptyClasses(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), fill: props.emptyFill, ...emptyActionProps() })) }) })) : null, showItems() && elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, showItems() && elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default List;

package/dist/components/List/ListItem.d.ts

@@ -41,6 +41,9 @@ export type ListItemTag = "button" | "a" | "div";
  * @property {string} target - Destino do link: '_blank' ganha rel="noopener noreferrer"
  * @property {string} rel - Relação do link (sobrescreve o padrão do target)
  * @property {boolean} selected - Item atual: fundo de seleção e aria-current
+ * @property {string} variant - Superfície da linha: 'default' (transparente) | 'primary' (fundo azul-claro com hover próprio, o item em destaque da Central de Ações). Não é seleção: não marca aria-current
+ * @property {string} liClassName - Classes CSS do `li` (a linha visual). Use para animação de entrada escalonada; não vale com `standalone`
+ * @property {object} liStyle - Estilo inline do `li` (ex.: `{ '--ordem': 3 }` ou `transitionDelay`). Não vale com `standalone`
  * @property {boolean} disabled - Bloqueia clique e foco
  * @property {string} tooltip - Dica nativa do navegador: vira o atributo HTML `title` do elemento interativo
  * @property {boolean} standalone - Renderiza sem o `li`, só o elemento interativo (uso fora de `List`)
@@ -71,6 +74,12 @@ export interface ListItemProps {
     target?: string;
     /** Relação do link. Sobrescreve o padrão do `target`. */
     rel?: string;
+    /** Superfície: `primary` é o item em destaque, azul-claro com hover próprio. Não é seleção. @default 'default' */
+    variant?: "default" | "primary";
+    /** Classes CSS do `li` (a linha visual), para animação de entrada. Sem efeito com `standalone`. */
+    liClassName?: string;
+    /** Estilo inline do `li` (variável CSS, transitionDelay). Sem efeito com `standalone`. */
+    liStyle?: any;
     /** Item atual: fundo de seleção e `aria-current`. @default false */
     selected?: boolean;
     /** Bloqueia clique e foco. @default false */

package/dist/components/List/ListItem.js

@@ -10,11 +10,15 @@ function ListItem(props) {
     function isInteractive() {
         return elementTag() !== "div" || !!props.onClick;
     }
+    function liClasses() {
+        return ["umds-list__item", props.liClassName].filter(Boolean).join(" ");
+    }
     function classes() {
         return [
             "umds-list-item",
             isInteractive() ? "umds-list-item--interactive" : "",
             props.selected ? "umds-list-item--selected" : "",
+            props.variant === "primary" ? "umds-list-item--primary" : "",
             props.disabled ? "umds-list-item--disabled" : "",
             props.className,
         ]
@@ -77,6 +81,6 @@ function ListItem(props) {
         }
         return out;
     }
-    return (_jsx(_Fragment, { children: !props.standalone ? (_jsx(_Fragment, { children: _jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, props.actions ? (_jsx("div", { className: "umds-list-item__actions", children: _jsx(_Fragment, { children: props.actions }) })) : null] }) })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] }) })) }));
+    return (_jsx(_Fragment, { children: !props.standalone ? (_jsx(_Fragment, { children: _jsxs("li", { style: props.liStyle, className: liClasses(), children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, props.actions ? (_jsx("div", { className: "umds-list-item__actions", children: _jsx(_Fragment, { children: props.actions }) })) : null] }) })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] }) })) }));
 }
 export default ListItem;

package/dist/components/Modal/Modal.css

@@ -41,7 +41,7 @@
   z-index: 2;
   background-color: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px universal (rodada ago/2026) — a exceção "superfície grande → md" caiu */
-  box-shadow: var(--umds-semantic-shadow-lg); /* era primitive-shadow-level-3 (0.16) — decisão 16/07 */
+  box-shadow: var(--umds-semantic-shadow-center-xl);
   padding: var(--umds-primitive-spacing-xxs);
   width: clamp(320px, 90%, 498px);
   max-width: 498px;
@@ -337,9 +337,8 @@
   padding: var(--umds-primitive-spacing-xxxs) var(--umds-primitive-spacing-xxs); /* 16px 24px (produto: 14px 22px) */
   border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
   background: var(--umds-semantic-color-neutral-light-pure);
-  /* Levanta o rodapé do conteúdo que passa por baixo dele ao rolar.
-     Sombra não tem token no 1DS — candidato a novo token. */
-  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
+  /* Levanta o rodapé do conteúdo que passa por baixo dele ao rolar. */
+  box-shadow: var(--umds-semantic-shadow-top-md);
   flex-shrink: 0;
   box-sizing: border-box;
 }

package/dist/components/MultiSelect/MultiSelect.css

@@ -195,7 +195,7 @@
   background-color: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
   z-index: var(--umds-semantic-layer-popover); /* 1400 - acima de modal */
   max-height: 320px;
   display: flex;

package/dist/components/OrgChart/OrgChart.css

@@ -54,7 +54,7 @@
   color: var(--umds-semantic-color-primary-dark);
   border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-sm);
+  box-shadow: var(--umds-semantic-shadow-bottom-sm);
   cursor: pointer;
   transition:
     box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
@@ -69,7 +69,7 @@
 }
 
 .umds-org-chart__node:hover {
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-org-chart__node--selected {

package/dist/components/PhoneInput/PhoneInput.css

@@ -54,7 +54,7 @@
   /* 1px como os demais campos: 1,5px era do protótipo e engrossava só aqui. */
   border: 1px solid var(--umds-semantic-field-border-default);
   border-radius: var(--umds-primitive-border-radius-sm, 8px); /* era 12px (protótipo --radius-lg) — snap 14/07: controle de campo → sm, alinha com Input/Select */
-  box-shadow: var(--umds-semantic-shadow-sm); /* era 0 1px 2px 0.04, 0 1px 3px 0.02 (protótipo --shadow-sm) — mapeado 14/07 */
+  box-shadow: var(--umds-semantic-shadow-bottom-sm); /* era 0 1px 2px 0.04, 0 1px 3px 0.02 (protótipo --shadow-sm) — mapeado 14/07 */
   transition:
     border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
     box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
@@ -234,7 +234,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-medium); /* #EBEBEB */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px (protótipo --radius-md) */
-  box-shadow: var(--umds-semantic-shadow-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
   overflow: hidden;
   animation: umds-phone-dropdown-in var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard) both;
 }

package/dist/components/Popover/Popover.css

@@ -37,7 +37,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no claro, mais clara no escuro */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   font-family: var(--umds-semantic-font-family-base);
   transition: opacity var(--umds-semantic-motion-duration-fast)
     var(--umds-semantic-motion-easing-standard);

package/dist/components/SegmentedControl/SegmentedControl.css

@@ -234,7 +234,7 @@
   background-color: var(--umds-semantic-color-background-white);
   color: var(--umds-semantic-color-neutral-dark-pure);
   font-weight: var(--umds-primitive-font-weight-bold);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-segmented--surface .umds-segmented__input:disabled + .umds-segmented__item:hover {

package/dist/components/Select/Select.css

@@ -149,7 +149,7 @@
   background-color: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
   z-index: var(--umds-semantic-layer-popover); /* 1400 - acima de modal */
   max-height: 300px;
   display: flex;