@jsenv/navi 0.12.34 → 0.12.37

package/dist/jsenv_navi.js

@@ -15197,13 +15197,18 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     outline-color: var(--link-outline-color);
     cursor: var(--x-link-cursor);
 
+    /* Current */
+    &[data-href-current] {
+      --x-link-cursor: default;
+    }
     /* Hover */
     &[data-hover] {
       --x-link-color: var(--x-link-color-hover);
       --x-link-text-decoration: var(--x-link-text-decoration-hover);
     }
     /* Focus */
-    &[data-focus] {
+    &[data-focus],
+    &[data-focus-visible] {
       position: relative;
       z-index: 1; /* Ensure focus outline is above other elements */
     }
@@ -15657,8 +15662,6 @@ import.meta.css = /* css */`
   .navi_tablist {
     display: flex;
     line-height: 2em;
-    background: var(--tablist-background);
-    border-radius: var(--tablist-border-radius);
     overflow-x: auto;
     overflow-y: hidden;
   }
@@ -15670,6 +15673,8 @@ import.meta.css = /* css */`
     align-items: center;
     gap: 0.5rem;
     list-style: none;
+    background: var(--tablist-background);
+    border-radius: var(--tablist-border-radius);
   }
   .navi_tablist > ul > li {
     position: relative;
@@ -15687,11 +15692,16 @@ import.meta.css = /* css */`
 
     .navi_tab_content {
       display: flex;
-      padding: 0 0.5rem;
       color: var(--x-tab-color);
       background: var(--x-tab-background);
       border-radius: inherit;
       transition: background 0.12s ease-out;
+
+      .navi_link {
+        flex-grow: 1;
+        text-align: center;
+        border-radius: inherit;
+      }
     }
     /* Hidden bold clone to reserve space for bold width without affecting height */
     .navi_tab_content_bold_clone {
@@ -15816,6 +15826,9 @@ const Tab = props => {
 const TabRoute = ({
   route,
   children,
+  paddingX,
+  padding,
+  paddingY,
   ...props
 }) => {
   const {
@@ -15823,10 +15836,16 @@ const TabRoute = ({
   } = useRouteStatus(route);
   return jsx(TabBasic, {
     selected: active,
+    paddingX: "0",
     ...props,
     children: jsx(RouteLink, {
       route: route,
+      expand: true,
       discrete: true,
+      align: "center",
+      paddingX: paddingX,
+      padding: padding,
+      paddingY: paddingY,
       children: children
     })
   });
@@ -15834,6 +15853,9 @@ const TabRoute = ({
 const TabBasic = ({
   children,
   selected,
+  padding,
+  paddingX = "s",
+  paddingY,
   onClick,
   ...props
 }) => {
@@ -15853,8 +15875,11 @@ const TabBasic = ({
       ":-navi-selected": selected
     },
     ...props,
-    children: [jsx("div", {
+    children: [jsx(Box, {
       className: "navi_tab_content",
+      paddingX: paddingX,
+      paddingY: paddingY,
+      padding: padding,
       children: children
     }), jsx("div", {
       className: "navi_tab_content_bold_clone",