@apliteni/apliteni-ui 0.56.0 → 0.56.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.56.0",
+  "version": "0.56.1",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -68,6 +68,8 @@
   border-bottom: 1px solid var(--border);
 }
 .rx-modal__title {
+  margin: 0;
+  font-family: var(--font-sans);
   font-weight: var(--weight-normal);
   font-size: var(--text-base);
   color: var(--text);

package/react/dist/index.d.ts

@@ -14,6 +14,8 @@ type ButtonProps = {
     block?: boolean;
     /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
     busy?: boolean;
+    /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
+    completionMessage?: string;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 declare const Button: react.ForwardRefExoticComponent<{
@@ -25,6 +27,8 @@ declare const Button: react.ForwardRefExoticComponent<{
     block?: boolean;
     /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
     busy?: boolean;
+    /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
+    completionMessage?: string;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 

package/react/dist/index.js

@@ -56,6 +56,7 @@ var Button = forwardRef(function Button2({
   iconOnly,
   block,
   busy,
+  completionMessage,
   children,
   type = "button",
   disabled,
@@ -83,7 +84,7 @@ var Button = forwardRef(function Button2({
     const prior = previous.current;
     if ((busy || prior?.busy) && (!prior || prior.text !== text2 || prior.busy !== busy)) {
       announcer.current ?? (announcer.current = acquireAnnouncer(buttonRef.current.ownerDocument));
-      announcer.current.announce(`${text2}: ${busy ? "in progress" : "complete"}`);
+      announcer.current.announce(busy ? `${text2}: in progress` : completionMessage ?? `${text2}: complete`);
     }
     previous.current = { text: text2, busy };
   });
@@ -472,7 +473,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
         ref: panel,
         children: [
           /* @__PURE__ */ jsxs5("div", { className: "rx-modal__head", children: [
-            /* @__PURE__ */ jsx7("div", { className: "rx-modal__title", id: titleId, children: title }),
+            /* @__PURE__ */ jsx7("h2", { className: "rx-modal__title", id: titleId, children: title }),
             /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
           ] }),
           /* @__PURE__ */ jsx7("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
@@ -1943,6 +1944,9 @@ function Timeline({ events, className, ...rest }) {
 import { useEffect as useEffect8, useId as useId8, useRef as useRef13, useState as useState7 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+function messages(id, hint, error) {
+  return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
+}
 function Frame({ id, label, hint, error, required, children }) {
   return /* @__PURE__ */ jsxs19("div", { className: "ui-field", children: [
     /* @__PURE__ */ jsxs19("label", { className: "ui-field__label", htmlFor: id, children: [
@@ -1950,23 +1954,25 @@ function Frame({ id, label, hint, error, required, children }) {
       required && /* @__PURE__ */ jsx23("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
     children,
-    (error || hint) && /* @__PURE__ */ jsx23(
+    error && /* @__PURE__ */ jsx23(
       "div",
       {
-        id: `${id}-message`,
-        className: error ? "ui-field__error" : "ui-field__hint",
-        dangerouslySetInnerHTML: { __html: (error ? icon4("alert") : "") + esc(error || hint) }
+        id: `${id}-error`,
+        className: "ui-field__error",
+        role: "alert",
+        dangerouslySetInnerHTML: { __html: icon4("alert") + esc(error) }
       }
-    )
+    ),
+    hint && /* @__PURE__ */ jsx23("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
   ] });
 }
 function wiring(id, hint, error) {
-  return { id, "aria-describedby": error || hint ? `${id}-message` : void 0, "aria-invalid": error ? true : void 0 };
+  return { id, "aria-describedby": messages(id, hint, error), "aria-invalid": error ? true : void 0 };
 }
 function TextField({ label, hint, error, required, type = "text", unit, className = "", ...props }) {
   const id = useId8();
   const hasUnit = type === "number" && !!unit;
-  const describedBy = [error || hint ? `${id}-message` : "", hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
+  const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsx23(
     "input",
     {
@@ -2074,7 +2080,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect9, useRef as useRef14, useState as useState8 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useRef as useRef14, useState as useState8 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var Context = createContext2(null);
@@ -2169,18 +2175,40 @@ function Notice({ notice, remove }) {
     }
   );
 }
+var REACH = "--rx-toast-stack";
+function usePublishedReach(stack2, count) {
+  useLayoutEffect4(() => {
+    const element = stack2.current;
+    const view = element?.ownerDocument.defaultView;
+    const root = element?.ownerDocument.documentElement;
+    if (!element || !view || !root) return;
+    const publish = () => {
+      const box = element.getBoundingClientRect();
+      root.style.setProperty(REACH, `${box.height ? Math.round(view.innerHeight - box.top) : 0}px`);
+    };
+    publish();
+    const observer = typeof view.ResizeObserver === "function" ? new view.ResizeObserver(publish) : void 0;
+    observer?.observe(element);
+    return () => {
+      observer?.disconnect();
+      root.style.removeProperty(REACH);
+    };
+  }, [stack2, count]);
+}
 function Toast({ children }) {
   const [entries, setEntries] = useState8([]);
   const nextId = useRef14(0);
+  const stack2 = useRef14(null);
   const push = useCallback3((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
+  usePublishedReach(stack2, entries.length);
   return /* @__PURE__ */ jsxs20(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx24("div", { className: "ui-toast-stack rx-toast-stack", children: entries.map((entry) => /* @__PURE__ */ jsx24(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx24("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx24(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });