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

package/dist/index.js

@@ -1,6 +1,6 @@
-import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useCallback, useEffect, useContext, cloneElement, useLayoutEffect, useMemo } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useLayoutEffect, useMemo, useCallback, useEffect, useContext, cloneElement } from 'react';
 import { Accordion as Accordion$1, AccordionTab as AccordionTab$1 } from 'primereact/accordion';
-import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, ArrowLeft, ArrowsInSimple, ArrowsOutSimple, CaretUp, X, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft, Question } from '@phosphor-icons/react';
+import { WarningCircle, Info, Question, Check, ArrowLeft, X, CircleNotch, CaretDown, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft } from '@phosphor-icons/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
 import { Badge as Badge$1 } from 'primereact/badge';
@@ -16,7 +16,6 @@ import { InputText } from 'primereact/inputtext';
 import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
 import { Menu as Menu$1 } from 'primereact/menu';
 import { Menubar as Menubar$1 } from 'primereact/menubar';
-import { Avatar } from 'primereact/avatar';
 import { Tag as Tag$1 } from 'primereact/tag';
 import { Message as Message$1 } from 'primereact/message';
 import { Dialog } from 'primereact/dialog';
@@ -37,7 +36,7 @@ function AccordionTab(_props) {
   return null;
 }
 var seta = (icon) => /* @__PURE__ */ jsx("span", { className: "cr-accordion__toggle", "aria-hidden": "true", children: icon });
-var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex, onTabChange, children, id, className }, ref) {
+var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex, onTabChange, children, id, className, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
   const [interno, setInterno] = useState(multiple ? [0] : 0);
@@ -48,6 +47,7 @@ var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex,
   return /* @__PURE__ */ jsx(
     Accordion$1,
     {
+      ...props,
       ...{ unstyled: true },
       ref: primeRef,
       id,
@@ -87,6 +87,9 @@ var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex,
   );
 });
 
+// src/components/aria.ts
+var juntarIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
+
 // src/components/popup.ts
 function seguirLado(painel, alvo) {
   if (!(painel instanceof HTMLElement) || !alvo) return;
@@ -148,20 +151,24 @@ var AutoComplete = forwardRef(function AutoComplete2({
           input: {
             root: {
               className: "cr-field__control cr-autocomplete__input",
-              "aria-describedby": supportText ? hintId : void 0,
+              "aria-describedby": juntarIds(supportText && hintId, props["aria-describedby"]),
               "aria-invalid": error ? true : void 0
             }
           },
           // 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
       }
@@ -321,9 +328,17 @@ var lerTema = (el) => {
     }
   };
 };
-var comAlfa = (hex, alfa) => {
-  const n = parseInt(hex.replace("#", ""), 16);
-  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alfa})`;
+var comAlfa = (cor, alfa) => {
+  const ctx = document.createElement("canvas").getContext("2d");
+  if (!ctx) return cor;
+  ctx.fillStyle = cor;
+  const normal = String(ctx.fillStyle);
+  if (normal.startsWith("#")) {
+    const n = parseInt(normal.slice(1, 7), 16);
+    return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alfa})`;
+  }
+  const [r = 0, g = 0, b = 0] = normal.match(/[\d.]+/g)?.map(Number) ?? [];
+  return `rgba(${r}, ${g}, ${b}, ${alfa})`;
 };
 var cruz = (cor) => ({
   id: "crCruz",
@@ -341,27 +356,61 @@ var cruz = (cor) => ({
     ctx.restore();
   }
 });
+var tracar = (ctx, pontos) => {
+  pontos.forEach((ponto, i) => {
+    const antes = pontos[i - 1];
+    if (!antes) return ctx.moveTo(ponto.x, ponto.y);
+    const meio = (antes.x + ponto.x) / 2;
+    ctx.bezierCurveTo(meio, antes.y, meio, ponto.y, ponto.x, ponto.y);
+  });
+};
+var trechos = (pontos) => pontos.reduce(
+  (lista, ponto) => {
+    if (ponto.skip) lista.push([]);
+    else lista[lista.length - 1].push(ponto);
+    return lista;
+  },
+  [[]]
+).filter((trecho) => trecho.length > 0);
 var curvaDoFigma = {
   id: "crCurva",
   beforeDatasetsDraw(chart) {
-    chart.data.datasets.forEach((_, indice) => {
-      const meta = chart.getDatasetMeta(indice);
-      const pontos = meta.data;
-      pontos.forEach((ponto, i) => {
-        const antes = pontos[i - 1];
-        const depois = pontos[i + 1];
-        ponto.cp1x = antes ? (antes.x + ponto.x) / 2 : ponto.x;
-        ponto.cp2x = depois ? (ponto.x + depois.x) / 2 : ponto.x;
-        ponto.cp1y = ponto.y;
-        ponto.cp2y = ponto.y;
+    const { ctx, chartArea } = chart;
+    const series = chart.data.datasets.map((dataset, indice) => ({ dataset, meta: chart.getDatasetMeta(indice), indice })).filter(({ indice }) => chart.isDatasetVisible(indice)).reverse();
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(chartArea.left, chartArea.top, chartArea.width, chartArea.height);
+    ctx.clip();
+    series.forEach(({ dataset, meta }) => {
+      const cor = String(dataset.borderColor);
+      const base = Math.min(meta.yScale?.getPixelForValue(0) ?? chartArea.bottom, chartArea.bottom);
+      const degrade = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
+      degrade.addColorStop(0, comAlfa(cor, 0.1));
+      degrade.addColorStop(1, comAlfa(cor, 0.02));
+      trechos(meta.data).forEach((trecho) => {
+        ctx.beginPath();
+        tracar(ctx, trecho);
+        ctx.lineTo(trecho[trecho.length - 1].x, base);
+        ctx.lineTo(trecho[0].x, base);
+        ctx.closePath();
+        ctx.fillStyle = degrade;
+        ctx.fill();
       });
-      if (meta.dataset)
-        meta.dataset._pointsUpdated = true;
     });
+    series.forEach(({ dataset, meta }) => {
+      ctx.strokeStyle = String(dataset.borderColor);
+      ctx.lineWidth = 2;
+      trechos(meta.data).forEach((trecho) => {
+        ctx.beginPath();
+        tracar(ctx, trecho);
+        ctx.stroke();
+      });
+    });
+    ctx.restore();
   }
 };
 var formatar = (eixo, valor) => eixo?.format ? eixo.format(valor) : String(valor);
-function Chart({
+var Chart = forwardRef(function Chart2({
   type = "line",
   stacked = false,
   labels,
@@ -374,9 +423,11 @@ function Chart({
   actions,
   height = 266,
   id,
-  className
-}) {
+  className,
+  ...props
+}, ref) {
   const raiz = useRef(null);
+  useImperativeHandle(ref, () => raiz.current);
   const ajuda = useRef(null);
   const [tema, setTema] = useState();
   useLayoutEffect(() => {
@@ -409,22 +460,13 @@ function Chart({
           data: s.data,
           yAxisID: s.axis === "right" ? "y2" : "y",
           borderColor: cor,
-          borderWidth: 2,
-          tension: 0.4,
+          // A linha e a área são desenhadas pelo plugin curvaDoFigma.
+          showLine: false,
           pointRadius: 0,
           pointHoverRadius: 4,
           pointHoverBorderWidth: 2,
           pointHoverBorderColor: tema.superficie,
-          pointHoverBackgroundColor: cor,
-          fill: "origin",
-          backgroundColor: (ctx) => {
-            const area = ctx.chart.chartArea;
-            if (!area) return comAlfa(cor, 0.1);
-            const degrade = ctx.chart.ctx.createLinearGradient(0, area.top, 0, area.bottom);
-            degrade.addColorStop(0, comAlfa(cor, 0.1));
-            degrade.addColorStop(1, comAlfa(cor, 0.02));
-            return degrade;
-          }
+          pointHoverBackgroundColor: cor
         };
       })
     };
@@ -492,7 +534,7 @@ function Chart({
   }, [tema, yAxis, y2Axis, temDireita, series, type, stacked]);
   const card = Boolean(title || actions);
   const classes = ["cr-chart", card && "cr-chart--card", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ref: raiz, id, className: classes, children: [
+  return /* @__PURE__ */ jsxs("div", { ...props, ref: raiz, id, className: classes, children: [
     card && /* @__PURE__ */ jsxs("div", { className: "cr-chart__header", children: [
       /* @__PURE__ */ jsxs("div", { className: "cr-chart__title-row", children: [
         title && /* @__PURE__ */ jsx("span", { className: "cr-chart__title", children: title }),
@@ -535,25 +577,25 @@ function Chart({
           }
         ),
         s.label
-      ] }, s.label)) })
+      ] }, `${i}-${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", {}),
-        series.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: s.label }, s.label))
+        series.map((s, i) => /* @__PURE__ */ jsx("th", { scope: "col", children: s.label }, `${i}-${s.label}`))
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: labels.map((rotulo, linha) => /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "row", children: rotulo }),
-        series.map((s) => {
+        series.map((s, i) => {
           const valor = s.data[linha];
           const eixo = s.axis === "right" ? y2Axis : yAxis;
-          return /* @__PURE__ */ jsx("td", { children: valor == null ? "" : formatar(eixo, valor) }, s.label);
+          return /* @__PURE__ */ jsx("td", { children: valor == null ? "" : formatar(eixo, valor) }, `${i}-${s.label}`);
         })
-      ] }, rotulo)) })
+      ] }, `${linha}-${rotulo}`)) })
     ] })
   ] });
-}
+});
 var Checkbox = forwardRef(function Checkbox2({
   label,
   showLabel = true,
@@ -568,7 +610,8 @@ var Checkbox = forwardRef(function Checkbox2({
   value,
   id,
   className,
-  style
+  style,
+  ...props
 }, ref) {
   const autoId = useId();
   const inputId = id ?? autoId;
@@ -611,7 +654,7 @@ var Checkbox = forwardRef(function Checkbox2({
           root: {
             className: `cr-checkbox__control${checked ? " cr-checkbox__control--checked" : ""}`
           },
-          input: { className: "cr-checkbox__input" },
+          input: { ...props, className: "cr-checkbox__input" },
           box: { className: "cr-checkbox__box" },
           icon: { className: "cr-checkbox__icon", "aria-hidden": true }
         }
@@ -620,7 +663,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
       }
@@ -749,7 +792,7 @@ var IconButton = forwardRef(function IconButton2({
   ] });
 });
 var FOCAVEIS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function Drawer({
+var Drawer = forwardRef(function Drawer2({
   visible,
   onHide,
   title,
@@ -764,8 +807,13 @@ function Drawer({
   footer,
   children,
   id,
-  className
-}) {
+  className,
+  ...props
+}, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    getElement: () => primeRef.current?.getElement() ?? null
+  }));
   const autoId = useId();
   const titleId = `${autoId}-title`;
   const subtitleId = `${autoId}-subtitle`;
@@ -814,6 +862,8 @@ function Drawer({
   return /* @__PURE__ */ jsx(
     Sidebar,
     {
+      ...props,
+      ref: primeRef,
       unstyled: true,
       id,
       visible,
@@ -851,7 +901,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 +924,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
               }
@@ -897,7 +947,7 @@ function Drawer({
       )
     }
   );
-}
+});
 var Input = forwardRef(function Input2({
   variant = "outline",
   size = "large",
@@ -942,8 +992,8 @@ var Input = forwardRef(function Input2({
           disabled,
           invalid: Boolean(error),
           "aria-invalid": error ? true : void 0,
-          "aria-describedby": supportText ? hintId : void 0,
-          ...props
+          ...props,
+          "aria-describedby": juntarIds(supportText && hintId, props["aria-describedby"])
         }
       ),
       trailingIcon && /* @__PURE__ */ jsx("span", { className: "cr-field__icon", children: trailingIcon })
@@ -966,7 +1016,8 @@ var Menu = forwardRef(function Menu2({
   onShow,
   onHide,
   id,
-  className
+  className,
+  ...props
 }, ref) {
   const primeRef = useRef(null);
   const alvo = useRef(null);
@@ -1000,7 +1051,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,12 +1074,13 @@ 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(
     Menu$1,
     {
+      ...props,
       unstyled: true,
       ref: primeRef,
       id,
@@ -1117,16 +1169,11 @@ function Profile({ user, menu }) {
       user.role && /* @__PURE__ */ jsx("span", { className: "cr-menubar__profile-role", children: user.role })
     ] }),
     /* @__PURE__ */ jsx(
-      Avatar,
+      "span",
       {
-        unstyled: true,
         "aria-hidden": "true",
         className: `cr-menubar__avatar${user.avatar ? "" : " cr-menubar__avatar--initial"}`,
-        image: user.avatar,
-        imageAlt: "",
-        label: user.avatar ? void 0 : user.name.trim().charAt(0).toUpperCase(),
-        shape: "circle",
-        pt: { image: { className: "cr-menubar__avatar-image" } }
+        children: user.avatar ? /* @__PURE__ */ jsx("img", { className: "cr-menubar__avatar-image", src: user.avatar, alt: "" }) : user.name.trim().charAt(0).toUpperCase()
       }
     )
   ] });
@@ -1175,7 +1222,8 @@ var Menubar = forwardRef(function Menubar2({
   user,
   userMenu,
   id,
-  className
+  className,
+  ...props
 }, ref) {
   const [innerSearch, setInnerSearch] = useState("");
   const search = searchValue ?? innerSearch;
@@ -1241,6 +1289,7 @@ var Menubar = forwardRef(function Menubar2({
   return /* @__PURE__ */ jsx("div", { ref, id, className: classes, children: /* @__PURE__ */ jsx(
     Menubar$1,
     {
+      ...props,
       unstyled: true,
       className: "cr-menubar__bar",
       model: [],
@@ -1272,10 +1321,12 @@ var MenuPrincipal = forwardRef(
     model,
     popup = false,
     "aria-label": ariaLabel = "Menu principal",
+    "aria-labelledby": ariaLabelledBy,
     onShow,
     onHide,
     id,
-    className
+    className,
+    ...props
   }, ref) {
     const primeRef = useRef(null);
     const context = useContext(PrimeReactContext);
@@ -1325,7 +1376,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
+              }
+            )
           ]
         }
       )
@@ -1341,9 +1400,17 @@ var MenuPrincipal = forwardRef(
     });
     const classes = ["cr-menu-principal", popup && "cr-menu-principal--popup", className].filter(Boolean).join(" ");
     const pt = {
-      menu: { className: "cr-menu-principal__list", "aria-label": ariaLabel },
+      // O nome acessível vai na lista (role=menu), como no Menu.
+      menu: {
+        className: "cr-menu-principal__list",
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": ariaLabelledBy
+      },
       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).
@@ -1354,6 +1421,7 @@ var MenuPrincipal = forwardRef(
     const menu = /* @__PURE__ */ jsx(
       Menu$1,
       {
+        ...props,
         unstyled: true,
         ref: primeRef,
         id,
@@ -1385,12 +1453,13 @@ var ICON = {
   highlight: /* @__PURE__ */ jsx(SealWarning, {}),
   neutral: /* @__PURE__ */ jsx(WarningCircle, {})
 };
-var Message = forwardRef(function Message2({ type = "info", children, showIcon = true, id, className }, ref) {
+var Message = forwardRef(function Message2({ type = "info", children, showIcon = true, id, className, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
   return /* @__PURE__ */ jsx(
     Message$1,
     {
+      ...props,
       unstyled: true,
       ref: primeRef,
       id,
@@ -1406,9 +1475,10 @@ var Message = forwardRef(function Message2({ type = "info", children, showIcon =
     }
   );
 });
-function Modal({
+var Modal = forwardRef(function Modal2({
   visible,
   onHide,
+  dismissableMask = true,
   title,
   size = "large",
   onHelp,
@@ -1418,8 +1488,13 @@ function Modal({
   footerStart,
   children,
   id,
-  className
-}) {
+  className,
+  ...props
+}, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    getElement: () => primeRef.current?.getElement() ?? null
+  }));
   const autoId = useId();
   const titleId = `${autoId}-title`;
   const [body, setBody] = useState(null);
@@ -1437,10 +1512,13 @@ function Modal({
   return /* @__PURE__ */ jsx(
     Dialog,
     {
+      ...props,
+      ref: primeRef,
       unstyled: true,
       id,
       visible,
       onHide,
+      dismissableMask,
       draggable: false,
       resizable: false,
       blockScroll: true,
@@ -1483,7 +1561,7 @@ function Modal({
           "div",
           {
             ref: setBody,
-            className: "cr-modal__body",
+            className: "cr-rolagem-fina cr-modal__body",
             tabIndex: rolavel ? 0 : void 0,
             children
           }
@@ -1495,7 +1573,7 @@ function Modal({
       ] })
     }
   );
-}
+});
 var MultiSelect = forwardRef(function MultiSelect2({
   variant = "outline",
   size = "large",
@@ -1580,9 +1658,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,16 +1671,16 @@ 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-describedby": juntarIds(supportText && hintId, props["aria-describedby"]),
       "aria-invalid": error ? true : void 0,
       "aria-required": required || void 0
     },
     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 +1695,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" },
@@ -1798,7 +1876,8 @@ var Select = forwardRef(function Select2({
   disabled,
   id,
   name,
-  className
+  className,
+  ...props
 }, ref) {
   const autoId = useId();
   const inputId = id ?? autoId;
@@ -1831,11 +1910,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 +1922,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: [
@@ -1863,6 +1942,7 @@ var Select = forwardRef(function Select2({
     /* @__PURE__ */ jsx(
       Dropdown,
       {
+        ...props,
         unstyled: true,
         inputId,
         focusInputRef: setInputRef,
@@ -1885,7 +1965,7 @@ var Select = forwardRef(function Select2({
         "aria-label": label ? void 0 : ariaLabel,
         "aria-expanded": open,
         "aria-controls": open ? listId : void 0,
-        "aria-describedby": supportText ? hintId : void 0,
+        "aria-describedby": juntarIds(supportText && hintId, props["aria-describedby"]),
         "aria-invalid": error ? true : void 0,
         "aria-required": required || void 0,
         pt
@@ -1917,7 +1997,8 @@ var Paginator = forwardRef(function Paginator2({
   onPageChange,
   rowsPerPageLabel = "Itens por p\xE1gina",
   id,
-  className
+  className,
+  ...props
 }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1929,6 +2010,7 @@ var Paginator = forwardRef(function Paginator2({
   return /* @__PURE__ */ jsx(
     Paginator$1,
     {
+      ...props,
       unstyled: true,
       ref: primeRef,
       id,
@@ -2016,7 +2098,8 @@ var Radio = forwardRef(function Radio2({
   required,
   id,
   className,
-  style
+  style,
+  ...props
 }, ref) {
   const autoId = useId();
   const inputId = id ?? autoId;
@@ -2042,7 +2125,7 @@ var Radio = forwardRef(function Radio2({
         pt: {
           // Marcado pela prop do Cristal, não pelo atributo interno do Prime (data-p-checked).
           root: { className: `cr-radio__control${checked ? " cr-radio__control--checked" : ""}` },
-          input: { className: "cr-radio__input" },
+          input: { ...props, className: "cr-radio__input" },
           box: { className: "cr-radio__box" },
           icon: { className: "cr-radio__icon" }
         }
@@ -2051,7 +2134,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
       }
@@ -2059,7 +2142,15 @@ var Radio = forwardRef(function Radio2({
   ] });
 });
 var porcentagem = (posicao, total, visivel) => total > visivel ? Math.round(posicao / (total - visivel) * 100) : 0;
-var ScrollPanel = forwardRef(function ScrollPanel2({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, id, className }, ref) {
+var ScrollPanel = forwardRef(function ScrollPanel2({
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  style,
+  id,
+  className,
+  ...props
+}, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
   const contentId = `${useId()}-content`;
@@ -2094,7 +2185,7 @@ var ScrollPanel = forwardRef(function ScrollPanel2({ children, "aria-label": ari
     barx: barra("horizontal", posicao.x),
     bary: barra("vertical", posicao.y)
   };
-  return /* @__PURE__ */ jsx(ScrollPanel$1, { unstyled: true, ref: primeRef, id, pt, children });
+  return /* @__PURE__ */ jsx(ScrollPanel$1, { ...props, unstyled: true, ref: primeRef, id, pt, children });
 });
 var SegmentControl = forwardRef(
   function SegmentControl2({
@@ -2106,7 +2197,8 @@ var SegmentControl = forwardRef(
     "aria-labelledby": ariaLabelledBy,
     disabled,
     id,
-    className
+    className,
+    ...props
   }, ref) {
     const primeRef = useRef(null);
     useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -2114,6 +2206,7 @@ var SegmentControl = forwardRef(
     return /* @__PURE__ */ jsx(
       SelectButton,
       {
+        ...props,
         unstyled: true,
         ref: primeRef,
         id,
@@ -2158,7 +2251,8 @@ var Switch = forwardRef(function Switch2({
   name,
   id,
   className,
-  style
+  style,
+  ...props
 }, ref) {
   const autoId = useId();
   const inputId = id ?? autoId;
@@ -2187,7 +2281,7 @@ var Switch = forwardRef(function Switch2({
             role: void 0,
             "aria-checked": void 0
           },
-          input: { className: "cr-switch__input" },
+          input: { ...props, className: "cr-switch__input" },
           slider: { className: "cr-switch__track" }
         }
       }
@@ -2195,7 +2289,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
       }
@@ -2205,7 +2299,7 @@ var Switch = forwardRef(function Switch2({
 function TabPanel(_props) {
   return null;
 }
-var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, className }, ref) {
+var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, className, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
   const [interno, setInterno] = useState(0);
@@ -2248,6 +2342,7 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
   return /* @__PURE__ */ jsx(
     TabView,
     {
+      ...props,
       unstyled: true,
       ref: primeRef,
       id,