@godxjp/ui 33.11.2 → 33.12.1

package/dist/lib/focus-reveal.js

@@ -0,0 +1,19 @@
+function revealKeyboardFocus(event) {
+  const 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 box = carrier.getBoundingClientRect();
+  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/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,20 @@
       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));
 
     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 +156,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 +183,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 +195,7 @@
     );
   }
 
-  :root[data-focus-outline="on"]
+  :root:not([data-focus-outline="off"])
     :is(
       .ui-input,
       .ui-control,
@@ -168,10 +203,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 +226,35 @@
 
   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,
+  [data-slot="anchor-link"] {
     --focus-ring-offset: calc(-1 * var(--focus-ring-width));
   }
 
+  :is(
+    .ui-pagination,
+    .ui-pagination-list,
+    [data-slot="card"],
+    [data-slot="tabs-list"],
+    .ui-topbar,
+    .app-topbar,
+    .ui-anchor-list,
+    .app-main,
+    .ui-data-table-scroll,
+    .ui-scroll-area,
+    .ui-table-scroll,
+    .ui-mobile-shell,
+    .ui-resizable-panel-group,
+    .ui-legal-document-rail,
+    .ui-command-input-wrapper,
+    .ui-attachments
+  ) {
+    --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.1",
   "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

@@ -647,7 +647,7 @@
   }
 
   .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 +657,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,

package/dist/styles/shell-layout.css

@@ -753,6 +753,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 +2100,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;