@vector-business-services/cristal-ds-web 0.13.1 → 0.14.0

package/dist/index.d.cts

@@ -430,6 +430,8 @@ interface MenuPrincipalItem {
     icon: ReactNode;
     /** Texto da tag no canto (Show Tag no Figma, onde é "Experimente"). */
     tag?: string;
+    /** Ícone da tag. Padrão: DribbbleLogo, o do Figma. */
+    tagIcon?: ReactNode;
     /** Ação do item; o menu popup fecha depois dela. */
     command?: (event: MenuItemCommandEvent) => void;
     /** Link do item; sem ele o clique não navega. */

package/dist/index.d.ts

@@ -430,6 +430,8 @@ interface MenuPrincipalItem {
     icon: ReactNode;
     /** Texto da tag no canto (Show Tag no Figma, onde é "Experimente"). */
     tag?: string;
+    /** Ícone da tag. Padrão: DribbbleLogo, o do Figma. */
+    tagIcon?: ReactNode;
     /** Ação do item; o menu popup fecha depois dela. */
     command?: (event: MenuItemCommandEvent) => void;
     /** Link do item; sem ele o clique não navega. */

package/dist/index.js

@@ -154,14 +154,18 @@ var AutoComplete = forwardRef(function AutoComplete2({
           },
           // O Prime mostra um spinner próprio enquanto busca; o Figma não define esse estado.
           loadingIcon: { className: "cr-autocomplete__loader" },
-          panel: { className: "cr-autocomplete__panel" },
+          panel: { className: "cr-lista cr-autocomplete__panel" },
           // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
           transition: aoPosicionar(() => {
             const campo = document.getElementById(id);
             seguirLado(painelDoCampo(campo, ".cr-autocomplete__panel"), campo);
           }),
-          list: { className: "cr-autocomplete__list" },
-          item: { className: "cr-autocomplete__item" }
+          // A área que rola (o Prime aceita listWrapper no pt, mas o d.ts não declara).
+          ...{ listWrapper: { className: "cr-lista__rolagem" } },
+          list: { className: "cr-lista__itens" },
+          item: ({ context }) => ({
+            className: `cr-lista__item cr-autocomplete__item${context.selected ? " cr-lista__item--selecionado" : ""}`
+          })
         },
         ...props
       }
@@ -537,7 +541,7 @@ function Chart({
         s.label
       ] }, s.label)) })
     ] }),
-    /* @__PURE__ */ jsxs("table", { className: "cr-chart__table", children: [
+    /* @__PURE__ */ jsxs("table", { className: "cr-so-leitor cr-chart__table", children: [
       title && /* @__PURE__ */ jsx("caption", { children: title }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("td", {}),
@@ -620,7 +624,7 @@ var Checkbox = forwardRef(function Checkbox2({
     /* @__PURE__ */ jsx(
       "label",
       {
-        className: `cr-checkbox__label${showLabel ? "" : " cr-checkbox__label--hidden"}`,
+        className: `cr-checkbox__label${showLabel ? "" : " cr-checkbox__label--hidden cr-so-leitor"}`,
         htmlFor: inputId,
         children: label
       }
@@ -851,7 +855,7 @@ function Drawer({
             panelRef.current = element;
             if (behavior === "full") setRolagem(element);
           },
-          className: "cr-drawer__panel",
+          className: "cr-rolagem-fina cr-drawer__panel",
           tabIndex: behavior === "full" && rolavel ? 0 : void 0,
           children: [
             /* @__PURE__ */ jsxs("div", { className: "cr-drawer__header", children: [
@@ -874,7 +878,7 @@ function Drawer({
               "div",
               {
                 ref: behavior === "fixed" ? setRolagem : void 0,
-                className: "cr-drawer__body",
+                className: "cr-rolagem-fina cr-drawer__body",
                 tabIndex: behavior === "fixed" && rolavel ? 0 : void 0,
                 children
               }
@@ -1000,7 +1004,7 @@ var Menu = forwardRef(function Menu2({
     className: [item.selected && "cr-menu__item--selected", item.className].filter(Boolean).join(" "),
     data: { selected: item.selected }
   }));
-  const classes = ["cr-menu", `cr-menu--${density}`, popup && "cr-menu--popup", className].filter(Boolean).join(" ");
+  const classes = ["cr-lista cr-menu", `cr-menu--${density}`, popup && "cr-menu--popup", className].filter(Boolean).join(" ");
   const pt = {
     // O nome acessível vai na lista (role=menu); o Prime lê `ariaLabel`, mas não o declara no tipo.
     menu: {
@@ -1023,7 +1027,7 @@ var Menu = forwardRef(function Menu2({
     transition: aoPosicionar(
       () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
     ),
-    action: { className: "cr-menu__action" },
+    action: { className: "cr-lista__item cr-menu__action" },
     label: { className: "cr-menu__label" }
   };
   const menu = /* @__PURE__ */ jsx(
@@ -1325,7 +1329,15 @@ var MenuPrincipal = forwardRef(
               item.description && /* @__PURE__ */ jsx("span", { className: "cr-menu-principal__description", children: item.description })
             ] }),
             " ",
-            item.tag && /* @__PURE__ */ jsx(Tag, { className: "cr-menu-principal__tag", variant: "warning", icon: /* @__PURE__ */ jsx(DribbbleLogo, {}), children: item.tag })
+            item.tag && /* @__PURE__ */ jsx(
+              Tag,
+              {
+                className: "cr-menu-principal__tag",
+                variant: "warning",
+                icon: item.tagIcon ?? /* @__PURE__ */ jsx(DribbbleLogo, {}),
+                children: item.tag
+              }
+            )
           ]
         }
       )
@@ -1343,7 +1355,10 @@ var MenuPrincipal = forwardRef(
     const pt = {
       menu: { className: "cr-menu-principal__list", "aria-label": ariaLabel },
       submenuHeader: { className: "cr-menu-principal__group" },
-      separator: { className: "cr-menu-principal__separator" },
+      // O divisor tracejado é o Divider do Cristal (dashed).
+      separator: {
+        className: "cr-divider cr-divider--horizontal cr-divider--dashed cr-menu-principal__separator"
+      },
       menuitem: { className: "cr-menu-principal__item" },
       // Lado do popup, medido logo depois de o Prime posicionar.
       // Numa microtarefa: no onEnter o Prime ainda está religando a ref (como no Menu).
@@ -1483,7 +1498,7 @@ function Modal({
           "div",
           {
             ref: setBody,
-            className: "cr-modal__body",
+            className: "cr-rolagem-fina cr-modal__body",
             tabIndex: rolavel ? 0 : void 0,
             children
           }
@@ -1580,9 +1595,9 @@ var MultiSelect = forwardRef(function MultiSelect2({
     );
   };
   const checkbox = {
-    root: { className: "cr-multiselect__checkbox" },
-    box: { className: "cr-multiselect__checkbox-box" },
-    input: { className: "cr-multiselect__checkbox-input" }
+    root: { className: "cr-checkbox__control cr-multiselect__checkbox" },
+    box: { className: "cr-checkbox__box cr-multiselect__checkbox-box" },
+    input: { className: "cr-checkbox__input cr-multiselect__checkbox-input" }
   };
   const pt = {
     // Com a lista aberta o foco vai para a busca (no body), fora da caixa: o estado Focused do
@@ -1593,7 +1608,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
         className: `cr-field__control cr-multiselect__control${open ? " cr-multiselect__control--open" : ""}`
       };
     },
-    hiddenInputWrapper: { className: "cr-multiselect__hidden" },
+    hiddenInputWrapper: { className: "cr-so-leitor cr-multiselect__hidden" },
     input: {
       "aria-describedby": supportText ? hintId : void 0,
       "aria-invalid": error ? true : void 0,
@@ -1602,7 +1617,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
     labelContainer: { className: "cr-multiselect__value" },
     label: { className: "cr-multiselect__chips" },
     trigger: { className: "cr-field__icon cr-multiselect__trigger" },
-    panel: { className: `cr-multiselect__panel cr-multiselect__panel--${density}` },
+    panel: { className: `cr-lista cr-multiselect__panel cr-multiselect__panel--${density}` },
     header: { className: "cr-multiselect__header" },
     headerCheckboxContainer: { className: "cr-multiselect__select-all" },
     // O Prime repete role=checkbox na <div> em volta do <input>: o leitor de tela veria dois.
@@ -1617,13 +1632,13 @@ var MultiSelect = forwardRef(function MultiSelect2({
       root: { className: "cr-multiselect__search-input", "aria-label": filterPlaceholder }
     },
     closeButton: { className: "cr-multiselect__close" },
-    wrapper: { className: "cr-multiselect__wrapper" },
-    list: { className: "cr-multiselect__list" },
+    wrapper: { className: "cr-lista__rolagem" },
+    list: { className: "cr-lista__itens" },
     item: (options2) => {
       const context = options2?.context;
       const focused = context !== void 0 && context.focusedIndex === context.index;
       return {
-        className: `cr-multiselect__item${focused ? " cr-multiselect__item--focused" : ""}`
+        className: `cr-lista__item cr-multiselect__item${focused ? " cr-multiselect__item--focused" : ""}`
       };
     },
     checkboxContainer: { className: "cr-multiselect__item-checkbox" },
@@ -1831,11 +1846,11 @@ var Select = forwardRef(function Select2({
     },
     // O <select> escondido do Prime só existe para formulários: fora da árvore de acessibilidade.
     select: { "aria-hidden": true },
-    hiddenSelectedMessage: { className: "cr-select__hidden" },
+    hiddenSelectedMessage: { className: "cr-so-leitor cr-select__hidden" },
     // O Prime usa a mesma chave no texto do campo e no combobox escondido.
     input: { className: "cr-select__value" },
     trigger: { className: "cr-field__icon cr-select__trigger", "aria-hidden": true },
-    panel: { className: "cr-select__panel" },
+    panel: { className: "cr-lista cr-select__panel" },
     // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
     transition: aoPosicionar(
       () => seguirLado(
@@ -1843,17 +1858,17 @@ var Select = forwardRef(function Select2({
         document.getElementById(inputId)?.closest(".cr-select__control")
       )
     ),
-    wrapper: { className: "cr-select__wrapper" },
-    list: { className: "cr-select__list", id: listId },
+    wrapper: { className: "cr-lista__rolagem cr-select__wrapper" },
+    list: { className: "cr-lista__itens cr-select__list", id: listId },
     // Selecionado e em foco (teclado) pelo contexto do pt, a API pública do Prime (não data-p-*).
     item: ({ context }) => ({
       className: [
-        "cr-select__item",
-        context.selected && "cr-select__item--selected",
-        context.focused && "cr-select__item--focused"
+        "cr-lista__item cr-select__item",
+        context.selected && "cr-lista__item--selecionado",
+        context.focused && "cr-lista__item--focado"
       ].filter(Boolean).join(" ")
     }),
-    emptyMessage: { className: "cr-select__item cr-select__empty" }
+    emptyMessage: { className: "cr-lista__item cr-select__item cr-select__empty" }
   };
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
@@ -2051,7 +2066,7 @@ var Radio = forwardRef(function Radio2({
     /* @__PURE__ */ jsx(
       "label",
       {
-        className: `cr-radio__label${showLabel ? "" : " cr-radio__label--hidden"}`,
+        className: `cr-radio__label${showLabel ? "" : " cr-radio__label--hidden cr-so-leitor"}`,
         htmlFor: inputId,
         children: label
       }
@@ -2195,7 +2210,7 @@ var Switch = forwardRef(function Switch2({
     /* @__PURE__ */ jsx(
       "label",
       {
-        className: `cr-switch__label${showLabel ? "" : " cr-switch__label--hidden"}`,
+        className: `cr-switch__label${showLabel ? "" : " cr-switch__label--hidden cr-so-leitor"}`,
         htmlFor: inputId,
         children: label
       }