@caqophony/ui 0.6.0 → 0.6.2

package/dist/{chunk-WGWKCFG2.js → chunk-K2B226HX.js}

@@ -2,7 +2,7 @@
 import {
   CONTENT_GUTTER,
   Icon
-} from "./chunk-ID7VBGJA.js";
+} from "./chunk-KXI4UQPS.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";

package/dist/{chunk-ID7VBGJA.js → chunk-KXI4UQPS.js}

@@ -127,8 +127,8 @@ function Icon({ name, size, className }) {
 var SCROLL_HINT_X = "";
 var SCROLL_HINT_X_MARK = "pointer-events-none sticky right-0 z-10 ml-2 flex w-6 shrink-0 items-center justify-end self-stretch data-[scroll-hint-state=end]:invisible data-[scroll-hint-state=none]:hidden";
 var SCROLL_HINT_X_PILL = "flex h-full max-h-6 w-6 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm";
-var SCROLL_HINT_Y = "[container-type:scroll-state]";
-var SCROLL_HINT_Y_MARK = "pointer-events-none sticky bottom-1 -mt-7 flex h-6 justify-center supports-[container-type:scroll-state]:[@container_not_scroll-state(scrollable:bottom)]:hidden";
+var SCROLL_HINT_Y_MARK = "pointer-events-none flex h-7 shrink-0 items-end justify-center data-[scroll-hint-state=end]:invisible data-[scroll-hint-state=none]:hidden";
+var SCROLL_HINT_Y_PILL = "flex h-6 items-center rounded-full border border-border bg-card px-2 text-muted-foreground shadow-sm";
 
 // src/scroll-hint-mark.tsx
 import * as React from "react";
@@ -190,6 +190,43 @@ function watchScrollHintX(mark, write) {
     added.disconnect();
   };
 }
+function scrollHintYState(box) {
+  if (box.scrollHeight <= box.clientHeight + 1) return "none";
+  return box.scrollTop + box.clientHeight >= box.scrollHeight - 1 ? "end" : "more";
+}
+function watchScrollHintY(mark, write) {
+  const scroller = mark.previousElementSibling;
+  if (scroller === null) {
+    throw new Error(
+      "watchScrollHintY: the mark has no element before it; it must be the next sibling of the box that scrolls on y"
+    );
+  }
+  let last;
+  const update = () => {
+    const state = scrollHintYState(scroller);
+    if (state === last) return;
+    last = state;
+    write(state);
+  };
+  const resize = new ResizeObserver(update);
+  const observeChildren = () => {
+    for (const child of Array.from(scroller.children)) resize.observe(child);
+  };
+  resize.observe(scroller);
+  observeChildren();
+  const added = new MutationObserver(() => {
+    observeChildren();
+    update();
+  });
+  added.observe(scroller, { childList: true });
+  scroller.addEventListener("scroll", update, { passive: true });
+  update();
+  return () => {
+    scroller.removeEventListener("scroll", update);
+    resize.disconnect();
+    added.disconnect();
+  };
+}
 
 // src/scroll-hint-mark.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -217,6 +254,30 @@ function ScrollHintXMark() {
     }
   );
 }
+function ScrollHintYMark() {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const mark = ref.current;
+    if (mark === null) {
+      throw new Error(
+        "ScrollHintYMark: the effect ran with no mounted mark (ref.current is null)"
+      );
+    }
+    return watchScrollHintY(mark, (state) => {
+      mark.dataset.scrollHintState = state;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      "data-scroll-hint": "y",
+      className: SCROLL_HINT_Y_MARK,
+      children: /* @__PURE__ */ jsx2("span", { className: SCROLL_HINT_Y_PILL, children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-down", size: "sm" }) })
+    }
+  );
+}
 
 // src/content-gutter.ts
 var CONTENT_GUTTER = "px-4 sm:px-6 lg:px-8";
@@ -226,8 +287,7 @@ export {
   ICON_SIZES,
   Icon,
   SCROLL_HINT_X,
-  SCROLL_HINT_Y,
-  SCROLL_HINT_Y_MARK,
   ScrollHintXMark,
+  ScrollHintYMark,
   CONTENT_GUTTER
 };

package/dist/{chunk-44GEHNZP.js → chunk-MRVYXQE3.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   Icon
-} from "./chunk-ID7VBGJA.js";
+} from "./chunk-KXI4UQPS.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";

package/dist/index.d.mts

@@ -1044,10 +1044,10 @@ declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes
  * Authored by Caqophony
  */
 
-interface FormLayoutProps extends React.FormHTMLAttributes<HTMLFormElement> {
+interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     layout?: 'stacked' | 'inline' | 'two-column';
 }
-declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLFormElement>>;
+declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
 interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     description?: string;
@@ -1922,10 +1922,17 @@ declare const StageList: React.ForwardRefExoticComponent<StageListProps & React.
  * One-artifact W1 (#5823): run 7 wrapped a 9-step `Stepper` in
  * `max-h-[160px] overflow-y-auto`, which cut the stepper's line under the
  * clip with no sign there was more. This owns the clamp: a height from the
- * scale, the scroll, the scroll hint (`SCROLL_HINT_Y`: a chevron mark on the
- * end edge while there is more below), and keyboard access
- * (a scrolling region is focusable and named, WCAG 2.1.1). A page never
- * writes `max-h-*` with `overflow-*` around a library component.
+ * scale, the scroll, the scroll hint, and keyboard access (a scrolling region
+ * is focusable and named, WCAG 2.1.1). A page never writes `max-h-*` with
+ * `overflow-*` around a library component.
+ *
+ * #6089: the hint was drawn inside the box, sticky over its last row, and on
+ * the approved application detail it sat over a line in full view ("Target
+ * range discussed with recruiter"). It is now a row of its own under the box
+ * (`ScrollHintYMark`, `scroll-hint.ts`): never over a row, hidden when the
+ * rows fit, and empty (its room kept) once the reader has scrolled to the end.
+ * The region (its `ref`, `className`, `data-testid` and every other prop) is
+ * the box that scrolls, as before; the two sit in a column.
  *
  * Usage:
  *   import { ClampedList } from '@caqophony/ui';

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   buttonVariants,
   useModalSurface,
   usePanelRef
-} from "./chunk-WGWKCFG2.js";
+} from "./chunk-K2B226HX.js";
 import {
   Alert,
   EMPTY_VALUE_GLYPH,
@@ -19,17 +19,16 @@ import {
   INTENT_SUBTLE_STYLES,
   IntentBadge,
   isEmptyValue
-} from "./chunk-44GEHNZP.js";
+} from "./chunk-MRVYXQE3.js";
 import {
   CONTENT_GUTTER,
   ICONS,
   ICON_SIZES,
   Icon,
   SCROLL_HINT_X,
-  SCROLL_HINT_Y,
-  SCROLL_HINT_Y_MARK,
-  ScrollHintXMark
-} from "./chunk-ID7VBGJA.js";
+  ScrollHintXMark,
+  ScrollHintYMark
+} from "./chunk-KXI4UQPS.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";
@@ -3146,7 +3145,7 @@ import * as React20 from "react";
 import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var FormLayout = React20.forwardRef(
   ({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx31(
-    "form",
+    "div",
     {
       ref,
       className: cn(
@@ -4791,34 +4790,25 @@ var MAX_HEIGHTS = {
   lg: "max-h-96"
 };
 var ClampedList = React41.forwardRef(
-  ({ className, label, maxHeight = "md", children, ...props }, ref) => /* @__PURE__ */ jsxs44(
-    "div",
-    {
-      ref,
-      role: "region",
-      "aria-label": label,
-      tabIndex: 0,
-      className: cn(
-        "min-w-0 overflow-y-auto overscroll-contain rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        MAX_HEIGHTS[maxHeight],
-        SCROLL_HINT_Y,
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx55(
-          "div",
-          {
-            "aria-hidden": "true",
-            "data-scroll-hint": "y",
-            className: SCROLL_HINT_Y_MARK,
-            children: /* @__PURE__ */ jsx55("span", { className: "flex items-center rounded-full border border-border bg-card px-2 text-muted-foreground shadow-sm", children: /* @__PURE__ */ jsx55(Icon, { name: "chevron-down", size: "sm" }) })
-          }
-        )
-      ]
-    }
-  )
+  ({ className, label, maxHeight = "md", children, ...props }, ref) => /* @__PURE__ */ jsxs44("div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsx55(
+      "div",
+      {
+        ref,
+        role: "region",
+        "aria-label": label,
+        tabIndex: 0,
+        className: cn(
+          "min-w-0 overflow-y-auto overscroll-contain rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          MAX_HEIGHTS[maxHeight],
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx55(ScrollHintYMark, {})
+  ] })
 );
 ClampedList.displayName = "ClampedList";
 

package/dist/marketing.js

@@ -3,17 +3,17 @@ import {
   Button,
   Container,
   NavbarMenu
-} from "./chunk-WGWKCFG2.js";
+} from "./chunk-K2B226HX.js";
 import {
   ScrollHintXMark
-} from "./chunk-ID7VBGJA.js";
+} from "./chunk-KXI4UQPS.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";
 
 // src/marketing/marketing-header.tsx
 import * as React from "react";
-import { createPortal } from "react-dom";
+import { createPortal, flushSync } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NIGHT_GROUND = "-mb-16 justify-between border-b border-border bg-night-0/80 backdrop-blur-md";
 var ON_DARK_GROUND = "text-background dark:text-foreground";
@@ -50,7 +50,7 @@ function useFold(refs, actionsHost, hasLinks) {
       );
     };
     measure();
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(() => flushSync(measure));
     for (const el of [
       bar.current,
       brandText.current,

package/dist/material.js

@@ -1,12 +1,12 @@
 'use client';
 import {
   IntentBadge
-} from "./chunk-44GEHNZP.js";
+} from "./chunk-MRVYXQE3.js";
 import {
   CONTENT_GUTTER,
   Icon,
   ScrollHintXMark
-} from "./chunk-ID7VBGJA.js";
+} from "./chunk-KXI4UQPS.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caqophony/ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Generic, optional React UI reuse library (Gossamer tokens). Centrally maintained by Caqophony.",
   "license": "MIT",
   "author": "Caqophony",