@utahdts/utah-design-system 4.2.1 → 4.3.0

package/css/6-components/base-components/forms/_switch.scss

@@ -28,7 +28,7 @@
     }
     &__wrapper {
       min-width: 20px;
-      background: color-swatches.$neutral-gray-08;
+      background: color-swatches.$neutral-gray-07;
       color: white;
       border-radius: var(--radius-circle);
       min-height: var(--form-ele-small3x);

package/dist/style.css

@@ -3219,7 +3219,7 @@ component specific, BEM (Block, Element, Modifier)
 }
 .utah-design-system .switch__wrapper {
   min-width: 20px;
-  background: #7b7b7b;
+  background: #6e6e6e;
   color: white;
   border-radius: var(--radius-circle);
   min-height: var(--form-ele-small3x);

package/dist/utah-design-system.es.js

@@ -7,7 +7,7 @@ import { castArray, trim, identity, isFunction, isEqual, uniq, split, cloneDeep,
 import { useImmer } from "use-immer";
 import { isValid, format, add, parse } from "date-fns";
 import { v4 } from "uuid";
-const version$1 = "4.2.1";
+const version$1 = "4.3.0";
 const packageJson = {
   version: version$1
 };
@@ -703,6 +703,7 @@ function Accordion({
       {
         "aria-hidden": !stateIsOpen,
         "aria-labelledby": `accordion-button__${id}`,
+        inert: !stateIsOpen,
         className: joinClassNames(["accordion__content", contentClassName, stateIsOpen ? "accordion__content--open" : ""]),
         id: `accordion-content__${id}`,
         role: "region",
@@ -1165,6 +1166,7 @@ function TabPanel({ children, className, tabId }) {
       id: `tabpanel__${tabGroupId}__${tabId}`,
       role: "tabpanel",
       tabIndex: selectedTabId === tabId ? 0 : -1,
+      inert: selectedTabId !== tabId,
       children
     }
   );
@@ -3396,7 +3398,6 @@ function MultiSelectComboBox({
               /* @__PURE__ */ jsx(
                 IconButton,
                 {
-                  "aria-hidden": "true",
                   className: joinClassNames(
                     "multi-select__chevron",
                     "icon-button--borderless",
@@ -4846,7 +4847,7 @@ function Pagination({
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-props-no-spreading
     /* @__PURE__ */ jsx(WrapInElement, { ref: innerRef, className: joinClassNames("pagination", className), id, "aria-label": ariaLabel, ...rest, children: /* @__PURE__ */ jsxs("ul", { children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         IconButton,
         {
           appearance: ICON_BUTTON_APPEARANCE.BORDERLESS,
@@ -4856,15 +4857,14 @@ function Pagination({
           onClick: useCallback(() => currentOnChange(currentPageIndexRef.current - 1), [currentOnChange, currentPageIndexRef]),
           title: "Previous page"
         }
-      ),
-      paginationLinks.map((paginationLink, paginationLinkIndex) => paginationLink.isEllipsis ? /* @__PURE__ */ jsx(
+      ) }),
+      paginationLinks.map((paginationLink, paginationLinkIndex) => paginationLink.isEllipsis ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         "span",
         {
           className: "pagination__ellipsis",
           children: /* @__PURE__ */ jsx("span", { className: "utds-icon-before-more-horizontal", "aria-hidden": "true" })
-        },
-        `pagination-link__ellipsis__${paginationLinkIndex}`
-      ) : /* @__PURE__ */ jsx(
+        }
+      ) }, `pagination-link__ellipsis__${paginationLinkIndex}`) : /* @__PURE__ */ jsx(
         PaginationLink,
         {
           currentPageIndex,
@@ -4875,7 +4875,7 @@ function Pagination({
         },
         `pagination-link__${paginationLink.pageIndex}__${paginationLink.title}`
       )),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         IconButton,
         {
           appearance: ICON_BUTTON_APPEARANCE.BORDERLESS,
@@ -4885,7 +4885,7 @@ function Pagination({
           onClick: useCallback(() => currentOnChange(currentPageIndexRef.current + 1), [currentOnChange, currentPageIndexRef]),
           title: "Next page"
         }
-      )
+      ) })
     ] }) })
   );
 }
@@ -5218,6 +5218,7 @@ function Popup({
       ),
       role,
       "data-popup-placement": middlewareData?.offset?.placement || placement,
+      inert: !isVisible,
       ...rest,
       children: /* @__PURE__ */ jsxs("div", { className: "popup__content", children: [
         hasCloseButton ? /* @__PURE__ */ jsx(
@@ -6680,6 +6681,7 @@ function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
   return result;
 }
 function TableWrapper({
+  allowScrollOverflow,
   children,
   className,
   id,
@@ -6809,7 +6811,17 @@ function TableWrapper({
     ),
     [setState, state, stateRef]
   );
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: joinClassNames("table__wrapper", className), id, ref: innerRef, ...rest, children }) });
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClassNames("table__wrapper", className),
+      id,
+      ref: innerRef,
+      tabIndex: allowScrollOverflow ? 0 : void 0,
+      ...rest,
+      children
+    }
+  ) });
 }
 function MainContent({
   children,

package/dist/utah-design-system.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@utahdts/utah-design-system-header"), require("react/jsx-runtime"), require("react"), require("@floating-ui/react-dom"), require("lodash-es"), require("use-immer"), require("date-fns"), require("uuid")) : typeof define === "function" && define.amd ? define(["exports", "@utahdts/utah-design-system-header", "react/jsx-runtime", "react", "@floating-ui/react-dom", "lodash-es", "use-immer", "date-fns", "uuid"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["@utahdts/utah-design-system"] = {}, global["@utahdts/utah-design-system-header"], global.jsxRuntime, global.React, global["@floating-ui/react-dom"], global["lodash-es"], global.useImmer, global.dateFns, global.uuid));
 })(this, (function(exports2, utahDesignSystemHeader, jsxRuntime, React, reactDom, lodashEs, useImmer, dateFns, uuid) {
   "use strict";
-  const version$1 = "4.2.1";
+  const version$1 = "4.3.0";
   const packageJson = {
     version: version$1
   };
@@ -698,6 +698,7 @@
         {
           "aria-hidden": !stateIsOpen,
           "aria-labelledby": `accordion-button__${id}`,
+          inert: !stateIsOpen,
           className: joinClassNames(["accordion__content", contentClassName, stateIsOpen ? "accordion__content--open" : ""]),
           id: `accordion-content__${id}`,
           role: "region",
@@ -1160,6 +1161,7 @@
         id: `tabpanel__${tabGroupId}__${tabId}`,
         role: "tabpanel",
         tabIndex: selectedTabId === tabId ? 0 : -1,
+        inert: selectedTabId !== tabId,
         children
       }
     );
@@ -3391,7 +3393,6 @@
                 /* @__PURE__ */ jsxRuntime.jsx(
                   IconButton,
                   {
-                    "aria-hidden": "true",
                     className: joinClassNames(
                       "multi-select__chevron",
                       "icon-button--borderless",
@@ -4841,7 +4842,7 @@
       // @ts-expect-error
       // eslint-disable-next-line react/jsx-props-no-spreading
       /* @__PURE__ */ jsxRuntime.jsx(WrapInElement, { ref: innerRef, className: joinClassNames("pagination", className), id, "aria-label": ariaLabel, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           IconButton,
           {
             appearance: ICON_BUTTON_APPEARANCE.BORDERLESS,
@@ -4851,15 +4852,14 @@
             onClick: React.useCallback(() => currentOnChange(currentPageIndexRef.current - 1), [currentOnChange, currentPageIndexRef]),
             title: "Previous page"
           }
-        ),
-        paginationLinks.map((paginationLink, paginationLinkIndex) => paginationLink.isEllipsis ? /* @__PURE__ */ jsxRuntime.jsx(
+        ) }),
+        paginationLinks.map((paginationLink, paginationLinkIndex) => paginationLink.isEllipsis ? /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: "pagination__ellipsis",
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "utds-icon-before-more-horizontal", "aria-hidden": "true" })
-          },
-          `pagination-link__ellipsis__${paginationLinkIndex}`
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          }
+        ) }, `pagination-link__ellipsis__${paginationLinkIndex}`) : /* @__PURE__ */ jsxRuntime.jsx(
           PaginationLink,
           {
             currentPageIndex,
@@ -4870,7 +4870,7 @@
           },
           `pagination-link__${paginationLink.pageIndex}__${paginationLink.title}`
         )),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           IconButton,
           {
             appearance: ICON_BUTTON_APPEARANCE.BORDERLESS,
@@ -4880,7 +4880,7 @@
             onClick: React.useCallback(() => currentOnChange(currentPageIndexRef.current + 1), [currentOnChange, currentPageIndexRef]),
             title: "Next page"
           }
-        )
+        ) })
       ] }) })
     );
   }
@@ -5213,6 +5213,7 @@
         ),
         role,
         "data-popup-placement": middlewareData?.offset?.placement || placement,
+        inert: !isVisible,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "popup__content", children: [
           hasCloseButton ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -6675,6 +6676,7 @@
     return result;
   }
   function TableWrapper({
+    allowScrollOverflow,
     children,
     className,
     id,
@@ -6804,7 +6806,17 @@
       ),
       [setState, state, stateRef]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: joinClassNames("table__wrapper", className), id, ref: innerRef, ...rest, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: joinClassNames("table__wrapper", className),
+        id,
+        ref: innerRef,
+        tabIndex: allowScrollOverflow ? 0 : void 0,
+        ...rest,
+        children
+      }
+    ) });
   }
   function MainContent({
     children,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@utahdts/utah-design-system",
   "description": "Utah Design System React Library",
   "displayName": "Utah Design System React Library",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -58,7 +58,7 @@
     "utah",
     "components"
   ],
-  "author": "DTS Digital Experience <dtsui@utah.gov>",
+  "author": "DTS Digital Experience <dxp@utah.gov>",
   "license": "Apache 2.0",
   "bugs": {
     "url": "https://github.com/utahdts/utah-design-system/issues"
@@ -68,26 +68,26 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "2.1.6",
-    "@utahdts/utah-design-system-header": "4.2.1",
+    "@floating-ui/react-dom": "2.1.7",
+    "@utahdts/utah-design-system-header": "4.3.0",
     "date-fns": "4.1.0",
-    "immer": "10.2.0",
-    "lodash-es": "4.17.21",
+    "immer": "11.1.4",
+    "lodash-es": "4.17.23",
     "use-immer": "0.11.0",
     "uuid": "13.0.0"
   },
   "devDependencies": {
     "@types/lodash-es": "4.17.12",
-    "@types/react": "^19.2.6",
-    "@vitejs/plugin-react": "5.1.1",
-    "@vitest/coverage-istanbul": "4.0.10",
-    "@vitest/ui": "4.0.10",
-    "jsdom": "27.2.0",
+    "@types/react": "^19.2.13",
+    "@vitejs/plugin-react": "5.1.4",
+    "@vitest/coverage-istanbul": "4.0.18",
+    "@vitest/ui": "4.0.18",
+    "jsdom": "28.0.0",
     "prop-types": "15.8.1",
-    "sass": "1.94.1",
+    "sass": "1.97.3",
     "typescript": "5.9.3",
-    "vite": "7.2.2",
-    "vitest": "4.0.10"
+    "vite": "7.3.1",
+    "vitest": "4.0.18"
   },
   "type": "module"
 }

package/react/components/containers/accordion/Accordion.jsx

@@ -59,6 +59,7 @@ export function Accordion({
       <div
         aria-hidden={!stateIsOpen}
         aria-labelledby={`accordion-button__${id}`}
+        inert={!stateIsOpen}
         className={joinClassNames(['accordion__content', contentClassName, stateIsOpen ? 'accordion__content--open' : ''])}
         id={`accordion-content__${id}`}
         role="region"

package/react/components/containers/tabs/TabPanel.jsx

@@ -24,6 +24,7 @@ export function TabPanel({ children, className, tabId }) {
       id={`tabpanel__${tabGroupId}__${tabId}`}
       role="tabpanel"
       tabIndex={selectedTabId === tabId ? 0 : -1}
+      inert={selectedTabId !== tabId}
     >
       {children}
     </div>

package/react/components/forms/MultiSelect/MultiSelectComboBox.jsx

@@ -202,7 +202,6 @@ export function MultiSelectComboBox({
           </ComboBox>
           <MultiSelectClearIcon isClearable={isClearable} isDisabled={isDisabled} />
           <IconButton
-            aria-hidden="true"
             className={joinClassNames(
               'multi-select__chevron',
               'icon-button--borderless',

package/react/components/navigation/pagination/Pagination.jsx

@@ -84,26 +84,28 @@ export function Pagination({
     // eslint-disable-next-line react/jsx-props-no-spreading
     <WrapInElement ref={innerRef} className={joinClassNames('pagination', className)} id={id} aria-label={ariaLabel} {...rest}>
       <ul>
-        <IconButton
-          appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
-          className="pagination__prev"
-          icon={<span className="utds-icon-before-arrow-left" aria-hidden="true" />}
-          isDisabled={currentPageIndex === 0}
-          onClick={useCallback(() => currentOnChange(currentPageIndexRef.current - 1), [currentOnChange, currentPageIndexRef])}
-          title="Previous page"
-        />
+        <li>
+          <IconButton
+            appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
+            className="pagination__prev"
+            icon={<span className="utds-icon-before-arrow-left" aria-hidden="true" />}
+            isDisabled={currentPageIndex === 0}
+            onClick={useCallback(() => currentOnChange(currentPageIndexRef.current - 1), [currentOnChange, currentPageIndexRef])}
+            title="Previous page"
+          />
+        </li>
 
         {
           paginationLinks.map((paginationLink, paginationLinkIndex) => (
             paginationLink.isEllipsis
               ? (
-                <span
-                  className="pagination__ellipsis"
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={`pagination-link__ellipsis__${paginationLinkIndex}`}
-                >
-                  <span className="utds-icon-before-more-horizontal" aria-hidden="true" />
-                </span>
+                <li key={`pagination-link__ellipsis__${paginationLinkIndex}`}>
+                  <span
+                    className="pagination__ellipsis"
+                  >
+                    <span className="utds-icon-before-more-horizontal" aria-hidden="true" />
+                  </span>
+                </li>
               )
               : (
                 <PaginationLink
@@ -118,14 +120,16 @@ export function Pagination({
           ))
         }
 
-        <IconButton
-          appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
-          className="pagination__next"
-          icon={<span className="utds-icon-before-arrow-right" aria-hidden="true" />}
-          isDisabled={currentPageIndex === numberOfPages - 1}
-          onClick={useCallback(() => currentOnChange(currentPageIndexRef.current + 1), [currentOnChange, currentPageIndexRef])}
-          title="Next page"
-        />
+        <li>
+          <IconButton
+            appearance={ICON_BUTTON_APPEARANCE.BORDERLESS}
+            className="pagination__next"
+            icon={<span className="utds-icon-before-arrow-right" aria-hidden="true" />}
+            isDisabled={currentPageIndex === numberOfPages - 1}
+            onClick={useCallback(() => currentOnChange(currentPageIndexRef.current + 1), [currentOnChange, currentPageIndexRef])}
+            title="Next page"
+          />
+        </li>
       </ul>
     </WrapInElement>
   );

package/react/components/popups/Popup.jsx

@@ -93,6 +93,7 @@ export function Popup({
       )}
       role={role}
       data-popup-placement={middlewareData?.offset?.placement || placement}
+      inert={!isVisible}
       {...rest}
     >
       <div className="popup__content">

package/react/components/table/TableWrapper.jsx

@@ -57,6 +57,7 @@ function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
 /**
  * @template TableDataT extends TableDataT & { [x: string]: any; }
  * @param {object} props
+ * @param {boolean} [props.allowScrollOverflow]
  * @param {import('react').ReactNode} props.children
  * @param {string} [props.className]
  * @param {import('react').RefObject<HTMLDivElement>} [props.innerRef]
@@ -64,6 +65,7 @@ function sortByFieldType(sortingRule, fieldValueA, fieldValueB) {
  * @returns {import('react').JSX.Element}
  */
 export function TableWrapper({
+  allowScrollOverflow,
   children,
   className,
   id,
@@ -212,7 +214,12 @@ export function TableWrapper({
 
   return (
     <TableContext.Provider value={contextValue}>
-      <div className={joinClassNames('table__wrapper', className)} id={id} ref={innerRef} {...rest}>
+      <div
+        className={joinClassNames('table__wrapper', className)}
+        id={id} ref={innerRef}
+        tabIndex={allowScrollOverflow ? 0 : undefined}
+        {...rest}
+      >
         {children}
       </div>
     </TableContext.Provider>