@godxjp/ui 33.11.2 → 33.12.2

package/dist/lab/anchor.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { revealKeyboardFocus } from "../lib/focus-reveal.js";
 import * as React from "react";
 import { useTranslation } from "../i18n/use-translation.js";
 import { isDevelopment } from "../lib/dev.js";
@@ -264,7 +265,16 @@ function Anchor({
             } : void 0
           }
         ),
-        /* @__PURE__ */ jsx("ul", { ref: listRef, "data-slot": "anchor-list", className: "ui-anchor-list", children: renderItems(items ?? [], false) })
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            onFocusCapture: revealKeyboardFocus,
+            ref: listRef,
+            "data-slot": "anchor-list",
+            className: "ui-anchor-list",
+            children: renderItems(items ?? [], false)
+          }
+        )
       ] })
     }
   );

package/dist/lib/focus-reveal.d.ts

@@ -0,0 +1,5 @@
+import type { FocusEvent } from "react";
+/** Native Tab scrolling can leave a partially visible control clipped (Chromium).
+ * Reveal keyboard targets that fit inside a scroll viewport, without moving oversized
+ * rows, changing layout, or scrolling on pointer focus. */
+export declare function revealKeyboardFocus(event: FocusEvent<HTMLElement>, viewport?: EventTarget & HTMLElement): void;

package/dist/lib/focus-reveal.js

@@ -0,0 +1,28 @@
+function revealKeyboardFocus(event, viewport = event.currentTarget) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement) || target === viewport || !viewport.contains(target) || !target.matches(":focus-visible"))
+    return;
+  const carrier = target.closest(".ui-tag-input,.ui-control-composite-field") ?? target;
+  const rect = carrier.getBoundingClientRect();
+  const focus = getComputedStyle(carrier);
+  const extent = focus.outlineStyle === "none" ? 0 : Math.max(0, parseFloat(focus.outlineWidth) + parseFloat(focus.outlineOffset));
+  const box = {
+    left: rect.left - extent,
+    right: rect.right + extent,
+    top: rect.top - extent,
+    bottom: rect.bottom + extent,
+    width: rect.width + 2 * extent,
+    height: rect.height + 2 * extent
+  };
+  const frame = viewport.getBoundingClientRect();
+  const left = frame.left + viewport.clientLeft;
+  const top = frame.top + viewport.clientTop;
+  const style = getComputedStyle(viewport);
+  const outsideX = /auto|scroll/.test(style.overflowX) && box.width <= viewport.clientWidth && (box.left < left || box.right > left + viewport.clientWidth);
+  const outsideY = /auto|scroll/.test(style.overflowY) && box.height <= viewport.clientHeight && (box.top < top || box.bottom > top + viewport.clientHeight);
+  if (outsideX || outsideY)
+    carrier.scrollIntoView?.({ block: "nearest", inline: "nearest", behavior: "instant" });
+}
+export {
+  revealKeyboardFocus
+};

package/dist/lib/hooks.js

@@ -77,9 +77,12 @@ function useScrollableRegionTabIndex(element) {
     const sync = () => {
       const scrolls = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
       const hasFocusableContent = element.querySelector(SCROLLABLE_REGION_FOCUSABLE_SELECTOR) !== null;
-      if (scrolls && !hasFocusableContent) {
+      const hasVisibleBox = element.clientWidth > 0 && element.clientHeight > 0;
+      if (!hasVisibleBox) {
+        if (element.getAttribute("tabindex") !== "-1") element.setAttribute("tabindex", "-1");
+      } else if (scrolls && !hasFocusableContent) {
         if (element.getAttribute("tabindex") !== "0") element.setAttribute("tabindex", "0");
-      } else if (element.getAttribute("tabindex") === "0") {
+      } else if (["0", "-1"].includes(element.getAttribute("tabindex") ?? "")) {
         element.removeAttribute("tabindex");
       }
     };

package/dist/styles/card-layout.css

@@ -28,6 +28,19 @@
     overflow: hidden;
   }
 
+  [data-slot="card"]:focus-within,
+  [data-slot="card"]:has([data-slot="card-header"][data-banded]):focus-within {
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+  }
+
+  @supports not (overflow-clip-margin: 1px) {
+    [data-slot="card"]:focus-within,
+    [data-slot="card"]:has([data-slot="card-header"][data-banded]):focus-within {
+      overflow: visible;
+    }
+  }
+
   button[data-slot="card"] {
     text-align: inherit;
   }

package/dist/styles/data-display-layout.css

@@ -1108,6 +1108,8 @@
 @layer components {
 
   .ui-scroll-area {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     position: relative;
     scrollbar-width: var(--scroll-area-scrollbar-width);
     scrollbar-color: var(--scroll-area-thumb-color, hsl(var(--border)))

package/dist/styles/data-entry-layout.css

@@ -700,6 +700,8 @@
   }
 
   .ui-branch-scope-picker-list {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     max-block-size: var(--branch-scope-picker-list-max-height);
     overflow-y: auto;
   }

package/dist/styles/focus-ring.css

@@ -4,6 +4,34 @@
   :is(
     .ui-focus-ring,
     .ui-focus-ring-outline,
+    .ui-flex,
+    .ui-table-scroll,
+    .ui-pagination-list,
+    .react-aria-Menu,
+    .ui-chart [tabindex],
+    .ui-prose input,
+    .ui-auth-legal-footer a[href],
+    .ui-auth-shell a[href],
+    .app-main a[href],
+    .ui-breadcrumb a[href],
+    .ui-breadcrumb-link,
+    .ui-password-input-toggle,
+    .ui-search-select-value-remove,
+    .ui-tabs-overflow,
+    .ui-resizable-handle,
+    .ui-scroll-area,
+    .ui-data-table-scroll,
+    .ui-resizable-panel,
+    .ui-master-detail-master,
+    .ui-branch-scope-picker-list,
+    .ui-tag-input-chip,
+    .ui-attachments-placeholder,
+    .ui-block-editor-content,
+    .ui-range-timeline,
+    .sb-product,
+    .ui-logo,
+    .ui-logo-lockup,
+    [data-slot="anchor-link"],
     [data-interactive] > [data-slot="table-cell"] a[href],
     [data-interactive] > [data-slot="table-cell"] button,
     .ui-data-table-ellipsis[data-truncated],
@@ -51,6 +79,8 @@
     .tb-icon-btn
   ):focus-visible,
 
+  .ui-command-input-wrapper:has(.ui-command-input:focus-visible),
+  .ui-attachments:has(.ui-attachments-input:focus-visible),
   .ui-calendar-dropdown-root:has(.ui-calendar-dropdown:focus-visible),
   .ui-checkbox[data-focus-visible],
   .ui-radio[data-focus-visible],
@@ -70,17 +100,21 @@
       var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
         var(--focus-ring-opacity, 1)
     );
-    outline-offset: var(--focus-ring-offset);
+    outline-offset: var(--focus-ring-contained-offset, var(--focus-ring-offset));
+    scroll-margin: calc(var(--focus-ring-width) + var(--focus-outline-offset));
 
     transition:
       outline-offset 0s,
       outline 0s;
   }
 
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"])
     :is(
       .ui-focus-ring,
       .ui-focus-ring-outline,
+      .ui-logo,
+      .ui-logo-lockup,
+      [data-slot="anchor-link"],
       .ui-input,
       .ui-control,
       .ui-control-multiline,
@@ -123,21 +157,22 @@
       .tb-icon-btn
     ):focus-visible,
 
-  :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-radio[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-slider-thumb[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],
-  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
-  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"],
-  :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"]) .ui-checkbox[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-radio[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-switch[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-slider-thumb[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-focus-ring[data-focus-visible],
+  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
+  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field[data-state="open"],
+  :root:not([data-focus-outline="off"]) .ui-otp-slot[data-active="true"],
+  :root:not([data-focus-outline="off"])
     .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
 
     --tw-ring-shadow: var(
       --focus-field-shadow,
+      inset 0 0 0 calc(-1 * var(--focus-ring-contained-offset, 0px)) hsl(var(--background)),
       0 0 0 var(--focus-ring-glow-width)
         hsl(
           var(
@@ -149,6 +184,7 @@
     );
     box-shadow: var(
       --focus-field-shadow,
+      inset 0 0 0 calc(-1 * var(--focus-ring-contained-offset, 0px)) hsl(var(--background)),
       0 0 0 var(--focus-ring-glow-width)
         hsl(
           var(
@@ -160,7 +196,7 @@
     );
   }
 
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"])
     :is(
       .ui-input,
       .ui-control,
@@ -168,10 +204,10 @@
       .ui-control-trigger,
       .ui-tag-input
     ):focus-visible,
-  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
-  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
-  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"] {
+  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
+  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
+  :root:not([data-focus-outline="off"]) .ui-control-composite-field[data-state="open"] {
     --input: var(--focus-ring-color, var(--ring));
   }
 
@@ -191,10 +227,32 @@
 
   a.ui-list-row,
   tr.ui-focus-ring,
-  .sb-nav-item {
+  .sb-nav-item,
+  .ui-app-setting-picker-icon[data-appearance="bar"],
+  .ui-legal-document-toc-link {
     --focus-ring-offset: calc(-1 * var(--focus-ring-width));
   }
 
+  :is(
+    .ui-mobile-shell-tabbar .ui-button--ghost,
+    [data-slot="tabs-list"] [role="tab"],
+    [data-slot="tabs-list"] .ui-tabs-add,
+    .ui-app-setting-picker-icon[data-appearance="bar"],
+    .ui-legal-document-rail .ui-legal-document-toc-link,
+    .ui-table-scroll [data-slot="table-cell"] .ui-button--ghost,
+    .ui-data-table-scroll [data-slot="table-cell"] .ui-button--ghost,
+    .ui-search-select-value-remove,
+    .ui-table-scroll tr.ui-focus-ring,
+    .ui-data-table-scroll tr.ui-focus-ring,
+    .ui-resizable-handle,
+    .ui-scroll-area,
+    .ui-table-scroll,
+    .ui-data-table-scroll,
+    .ui-resizable-panel
+  ):focus-visible {
+    --focus-ring-contained-offset: var(--focus-ring-inset-offset);
+  }
+
   .ui-accordion-trigger {
     --focus-ring-offset: var(--accordion-focus-ring-offset);
   }

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.11.2",
+  "version": "33.12.2",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -642,12 +642,14 @@
   }
 
   .ui-resizable-panel {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     min-height: 0;
     min-width: 0;
   }
 
   .ui-resizable-handle {
-    width: var(--control-border-width, var(--stroke-hairline));
+    inline-size: var(--resizable-handle-size);
     background: hsl(var(--border));
     position: relative;
     flex-shrink: 0;
@@ -657,9 +659,9 @@
     color: hsl(var(--muted-foreground));
   }
 
-  .ui-resizable-handle[aria-orientation="vertical"] {
-    width: auto;
-    height: var(--control-border-width, var(--stroke-hairline));
+  .ui-resizable-handle[aria-orientation="horizontal"] {
+    inline-size: auto;
+    block-size: var(--resizable-handle-size);
   }
 
   .ui-resizable-handle:hover,
@@ -1385,6 +1387,8 @@
   }
 
   .ui-pagination-list {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     display: flex;
     min-width: 0;
     align-items: center;
@@ -1701,6 +1705,8 @@
   }
 
   .ui-legal-document-rail {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     display: flex;
     flex-direction: column;
     gap: var(--legal-document-nav-gap);

package/dist/styles/navigation-layout.css

@@ -493,6 +493,8 @@
   }
 
   .ui-pagination {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     max-inline-size: 100%;
     overflow-x: auto;
     scrollbar-width: thin;
@@ -1402,6 +1404,8 @@
   }
 
   .ui-anchor[data-direction="horizontal"] .ui-anchor-list {
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     display: flex;
     gap: var(--anchor-gap);
 

package/dist/styles/shell-layout.css

@@ -277,6 +277,9 @@
   }
 
   .app-main {
+
+    padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     grid-area: main;
     min-width: 0;
     overflow: auto;
@@ -753,6 +756,11 @@
     gap: var(--space-3);
   }
 
+  .app-topbar-rail:has(> .app-topbar-right) {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
   .app-topbar-logo,
   .app-topbar-logo > a {
     display: flex;
@@ -2095,6 +2103,11 @@
     justify-content: center;
   }
 
+  .ui-topbar[data-overflow="scroll"]
+    > .ui-topbar-center:has(> :is(button, a, [role="button"]):not(.ui-topbar-search, .tb-search)) {
+    min-inline-size: min-content;
+  }
+
   .ui-topbar-search,
   .ui-topbar-search-panel {
     display: flex;
@@ -2228,11 +2241,21 @@
   }
 
   .ui-topbar[data-overflow="scroll"] {
+
+    margin-inline: calc(-1 * (var(--focus-ring-weight) + var(--focus-outline-offset)));
+    max-width: calc(100% + 2 * (var(--focus-ring-weight) + var(--focus-outline-offset)));
+    padding-inline: calc(
+      var(--topbar-inset) + var(--focus-ring-weight) + var(--focus-outline-offset)
+    );
     overflow-x: auto;
     overscroll-behavior-inline: contain;
     scrollbar-width: none;
   }
 
+  .ui-topbar[data-overflow="scroll"]:not([data-height]):not(.app-topbar .ui-topbar) {
+    padding-block: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+  }
+
   .ui-topbar[data-overflow="scroll"]::-webkit-scrollbar {
     display: none;
   }

package/dist/styles/table-layout.css

@@ -358,6 +358,17 @@
       saturate(var(--surface-backdrop-saturate, 160%));
   }
 
+  .ui-data-table-surface:focus-within {
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+  }
+
+  @supports not (overflow-clip-margin: 1px) {
+    .ui-data-table-surface:focus-within {
+      overflow: visible;
+    }
+  }
+
   .ui-data-table-surface[data-preset="action-collection"] {
     min-inline-size: 0;
   }
@@ -460,6 +471,9 @@
     overflow-x: auto;
     margin-inline: calc(-1 * var(--space-page-active-x));
     padding-inline: var(--space-page-active-x);
+
+    padding-block: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
+    scroll-padding-block: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
   }
 
   .ui-data-table-scroll::after {