labsense-ui-kit 1.4.57 → 1.4.58

package/dist/index.js

@@ -12554,7 +12554,7 @@ var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObjec
   var $isMobileOpen = _ref7.$isMobileOpen;
   return $isMobileOpen ? 'visible' : 'hidden';
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Remove all transitions for instant color changes */\n  * {\n    transition: none !important;\n  }\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n\n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (_ref8) {
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Remove all transitions for instant color changes */\n  * {\n    transition: none !important;\n  }\n\n  /* Hover / active / keyboard-focus share the same highlight, so the icon\n     switches color together with the fill instead of the ring appearing alone */\n  &:hover,\n  &.active,\n  &:focus-visible {\n    color: ", ";\n    background: ", ";\n\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  /* text.dark tracks the sidebar's own surface (near-black on the light\n     theme, white on the dark theme) so the ring stays visible in both,\n     unlike text.white which is calibrated for text sitting on the primary fill */\n  &:focus-visible {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (_ref8) {
   var $padding = _ref8.$padding;
   return $padding;
 }, function (_ref9) {
@@ -12571,37 +12571,37 @@ var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 ||
   return theme.vms.text.white;
 }, function (_ref13) {
   var theme = _ref13.theme;
-  return theme.vms.text.white;
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.vms["default"].primary;
-}, function (_ref15) {
+  return theme.vms.text.dark;
+});
+var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Ensure icons inherit hover color from parent */\n  svg {\n    transition: none;\n  }\n"])), function (_ref14) {
+  var $selected = _ref14.$selected,
+    theme = _ref14.theme;
+  return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
+});
+var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active / keyboard-focus (for rows with no url of their\n     own - see the tabIndex added in SidebarItem) */\n  &:hover,\n  &.active,\n  &:focus-visible {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered or keyboard-focused */\n  &:hover > div:nth-child(2),\n  &:focus-visible > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Same fill + ring treatment as SidebarLink, for rows made keyboard-focusable below */\n  &:focus-visible {\n    background: ", ";\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (_ref15) {
   var theme = _ref15.theme;
   return theme.vms.text.white;
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.vms.text.white;
-});
-var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Ensure icons inherit hover color from parent */\n  svg {\n    transition: none;\n  }\n"])), function (_ref17) {
-  var $selected = _ref17.$selected,
-    theme = _ref17.theme;
-  return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
-});
-var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref18) {
+}, function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.vms.text.white;
+}, function (_ref18) {
   var theme = _ref18.theme;
   return theme.vms.text.white;
 }, function (_ref19) {
   var theme = _ref19.theme;
-  return theme.vms.text.white;
+  return theme.vms.text.medium;
 }, function (_ref20) {
   var theme = _ref20.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref21) {
   var theme = _ref21.theme;
   return theme.vms.text.white;
 }, function (_ref22) {
   var theme = _ref22.theme;
-  return theme.vms.text.medium;
+  return theme.vms.text.dark;
 });
 var Logo = styled__default(Container)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
 var TextContainer = styled__default.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref23) {
@@ -12780,6 +12780,7 @@ var Sidebar = function Sidebar(_ref27) {
         onToggle();
       }
     }, [hasChildren, onToggle]);
+    var isOwnFocusTarget = !item.url && hasChildren;
     var ContentLayout = React__default.createElement(StyledContainer, {
       className: activeClass,
       "$alignItems": 'center',
@@ -12789,7 +12790,16 @@ var Sidebar = function Sidebar(_ref27) {
       "$borderRadius": '4px',
       "$justifyContent": 'space-between',
       "$hoverBackground": themeColors.vms["default"].primary,
-      onClick: handleClick
+      onClick: handleClick,
+      role: isOwnFocusTarget ? 'button' : undefined,
+      tabIndex: isOwnFocusTarget ? 0 : undefined,
+      "aria-expanded": isOwnFocusTarget ? isOpen : undefined,
+      onKeyDown: isOwnFocusTarget ? function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick();
+        }
+      } : undefined
     }, React__default.createElement(Container, {
       "$alignItems": 'center',
       "$gap": '8px',
@@ -13415,7 +13425,7 @@ var FirstContainer = styled__default.div(_templateObject2$m || (_templateObject2
   var $headerPadding = _ref6.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    border-radius: 4px;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (_ref7) {
+var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    height: 35px;\n    max-height: 35px;\n    border-radius: 4px;\n    box-shadow: 0 0 0 2px ", ";\n\n    div {\n      font-size: 12px;\n    }\n  }\n"])), function (_ref7) {
   var $disabled = _ref7.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref8) {