@stackone/malachite 2.70.0 → 2.72.0

package/dist/components/WizardLayout.js

@@ -1,104 +1,118 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useRef as b, useState as k, useLayoutEffect as $ } from "react";
-import { Button as j } from "./Button.js";
-import z from "./CustomIcons/ArrowLeftIcon.js";
-import { GLASS_SURFACE_STYLE as L } from "./glassSurface.js";
-const H = ({
-  showBack: f = !1,
-  onBack: x,
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useRef as j, useState as L, useLayoutEffect as z } from "react";
+import { Button as A } from "./Button.js";
+import R from "./CustomIcons/ArrowLeftIcon.js";
+import { GLASS_SURFACE_STYLE as B } from "./glassSurface.js";
+const E = {
+  default: "px-6 pt-4 min-h-[var(--malachite-control-height-small,28px)]",
+  large: "h-[60px] px-[28px] max-sm:h-[52px] max-sm:px-[16px]"
+}, F = ({
+  showBack: p = !1,
+  onBack: f,
   backDisabled: h = !1,
-  leading: p,
-  stepper: d,
-  trailing: u,
-  header: s,
-  footer: t,
-  footerGlass: v = !1,
-  center: g = !1,
-  contentWidth: i = 480,
-  minWidth: r,
-  children: w,
-  className: y = ""
+  reserveBack: d = !0,
+  topBarSize: u = "default",
+  leading: v,
+  stepper: g,
+  trailing: w,
+  banner: r,
+  header: t,
+  footer: l,
+  footerGlass: N = !1,
+  footerAlign: y = "full",
+  center: b = !1,
+  contentWidth: a = 480,
+  minWidth: c,
+  children: k,
+  className: S = ""
 }) => {
-  const n = b(null), [N, c] = k(0);
-  return $(() => {
-    const a = n.current;
-    if (!a) {
-      c(0);
+  const n = j(null), [$, o] = L(0);
+  return z(() => {
+    const i = n.current;
+    if (!i) {
+      o(0);
       return;
     }
-    const o = () => c(a.offsetHeight);
-    o();
-    const m = new ResizeObserver(o);
-    return m.observe(a), () => m.disconnect();
-  }, [t]), /* @__PURE__ */ l(
+    const m = () => o(i.offsetHeight);
+    m();
+    const x = new ResizeObserver(m);
+    return x.observe(i), () => x.disconnect();
+  }, [l]), /* @__PURE__ */ s(
     "div",
     {
-      className: `w-full h-screen flex flex-col overflow-hidden bg-[var(--malachite-card-sunken-background)] ${y}`,
-      style: r ? { minWidth: `${r}px` } : void 0,
+      className: `w-full h-screen flex flex-col overflow-hidden bg-[var(--malachite-card-sunken-background)] ${S}`,
+      style: c ? { minWidth: `${c}px` } : void 0,
       children: [
-        /* @__PURE__ */ l("div", { className: "w-full shrink-0 flex items-center justify-between px-6 pt-4 min-h-[var(--malachite-control-height-small,28px)]", children: [
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-[16px] min-w-0", children: [
-            f ? /* @__PURE__ */ e(
-              j,
-              {
-                variant: "outline",
-                size: "small",
-                iconOnly: !0,
-                icon: /* @__PURE__ */ e(z, { size: 14 }),
-                disabled: h,
-                onClick: x,
-                "aria-label": "Back",
-                className: "w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0"
-              }
-            ) : /* @__PURE__ */ e("span", { className: "w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0" }),
-            p
-          ] }),
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-[16px]", children: [
-            u ?? null,
-            d ?? null
-          ] })
-        ] }),
-        s ? /* @__PURE__ */ e("div", { className: "w-full shrink-0 flex flex-col items-center px-6 pt-8", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: `w-full shrink-0 flex items-center justify-between ${E[u]}`,
+            children: [
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-[16px] min-w-0", children: [
+                p ? /* @__PURE__ */ e(
+                  A,
+                  {
+                    variant: "outline",
+                    size: "small",
+                    iconOnly: !0,
+                    icon: /* @__PURE__ */ e(R, { size: 14 }),
+                    disabled: h,
+                    onClick: f,
+                    "aria-label": "Back",
+                    className: "w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0"
+                  }
+                ) : d ? /* @__PURE__ */ e("span", { className: "w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0" }) : null,
+                v
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-[16px]", children: [
+                w ?? null,
+                g ?? null
+              ] })
+            ]
+          }
+        ),
+        r ? /* @__PURE__ */ e("div", { className: "w-full shrink-0 px-[12px] pt-[12px]", children: r }) : null,
+        t ? /* @__PURE__ */ e("div", { className: "w-full shrink-0 flex flex-col items-center px-6 pt-8", children: /* @__PURE__ */ e(
           "div",
           {
             className: "w-full flex flex-col items-center gap-[24px]",
-            style: { maxWidth: `${i}px` },
-            children: s
+            style: { maxWidth: `${a}px` },
+            children: t
           }
         ) }) : null,
-        /* @__PURE__ */ l("div", { className: "relative flex-1 min-h-0", children: [
+        /* @__PURE__ */ s("div", { className: "relative flex-1 min-h-0", children: [
           /* @__PURE__ */ e(
             "div",
             {
-              className: `absolute inset-0 overflow-y-auto flex flex-col items-center px-6 ${g ? "justify-center" : "justify-start"}`,
+              className: `absolute inset-0 overflow-y-auto flex flex-col items-center px-6 ${b ? "justify-center" : "justify-start"}`,
               style: {
                 // Reserve the overlaid footer's height plus a gap, so the last item
                 // clears the footer with breathing room (not flush against it, which
                 // reads as hidden content continuing underneath).
-                paddingBottom: t ? `${N + 24}px` : "48px"
+                paddingBottom: l ? `${$ + 24}px` : "48px"
               },
               children: /* @__PURE__ */ e(
                 "div",
                 {
                   className: "w-full flex flex-col items-center gap-[40px]",
                   style: {
-                    maxWidth: `${i}px`,
+                    maxWidth: `${a}px`,
                     // Top padding lives on the scrolling content — NOT the scrollport —
                     // so a `position: sticky` child pins flush to the top with no gap.
-                    paddingTop: s ? "32px" : "48px"
+                    paddingTop: t ? "32px" : "48px"
                   },
-                  children: w
+                  children: k
                 }
               )
             }
           ),
-          t ? /* @__PURE__ */ e(
+          l ? /* @__PURE__ */ e(
             "div",
             {
               ref: n,
               className: "absolute inset-x-0 bottom-0 z-20",
-              style: v ? L : void 0,
-              children: t
+              style: N ? B : void 0,
+              children: y === "content" ? /* @__PURE__ */ e("div", { className: "flex justify-center px-6 pt-4 pb-3", children: /* @__PURE__ */ e("div", { className: "w-full", style: { maxWidth: `${a}px` }, children: l }) }) : l
             }
           ) : null
         ] })
@@ -107,7 +121,7 @@ const H = ({
   );
 };
 export {
-  H as WizardLayout,
-  H as default
+  F as WizardLayout,
+  F as default
 };
 //# sourceMappingURL=WizardLayout.js.map

package/dist/components/WizardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardLayout.js","sources":["../../src/components/WizardLayout.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\n\nexport interface WizardLayoutProps {\n    /** Renders the outline back button in the top-left slot. */\n    showBack?: boolean;\n    onBack?: () => void;\n    backDisabled?: boolean;\n    /** Top-left slot beside the back button — e.g. a user avatar menu. */\n    leading?: React.ReactNode;\n    /** Right top-bar slot (sits just before `stepper`) — e.g. a theme toggle. */\n    stepper?: React.ReactNode;\n    /** Far-right top-bar slot — e.g. a theme toggle. */\n    trailing?: React.ReactNode;\n    /**\n     * Pinned below the top bar and always visible while the content scrolls —\n     * e.g. connection logos + a step title. Rendered in the same centred column\n     * as the content (`contentWidth`).\n     */\n    header?: React.ReactNode;\n    /** Pinned to the bottom of the screen — typically a <FooterNav /> or a primary CTA. */\n    footer?: React.ReactNode;\n    /**\n     * Give the pinned footer a frosted-glass treatment (translucent background +\n     * backdrop blur) so scrolling content shows through it. The footer already sits\n     * above sticky body content, so it reads as glass over the scrolling list.\n     */\n    footerGlass?: boolean;\n    /** Vertically centre the content (used for terminal/success screens). */\n    center?: boolean;\n    /** Max width of the centered content column. */\n    contentWidth?: number;\n    /** Minimum width of the whole layout, below which it scrolls horizontally. */\n    minWidth?: number;\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst WizardLayout: React.FC<WizardLayoutProps> = ({\n    showBack = false,\n    onBack,\n    backDisabled = false,\n    leading,\n    stepper,\n    trailing,\n    header,\n    footer,\n    footerGlass = false,\n    center = false,\n    contentWidth = 480,\n    minWidth,\n    children,\n    className = '',\n}) => {\n    // The footer overlays the bottom of the scroll area (so content can glass under\n    // it). Measure it so the scroll content reserves matching bottom space and the\n    // last item is never hidden behind it.\n    const footerRef = useRef<HTMLDivElement>(null);\n    const [footerHeight, setFooterHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the footer node mounts/unmounts so the observer attaches to the current element.\n    useLayoutEffect(() => {\n        const el = footerRef.current;\n        if (!el) {\n            setFooterHeight(0);\n            return;\n        }\n        const update = () => setFooterHeight(el.offsetHeight);\n        update();\n        const observer = new ResizeObserver(update);\n        observer.observe(el);\n        return () => observer.disconnect();\n    }, [footer]);\n\n    return (\n        <div\n            className={`w-full h-screen flex flex-col overflow-hidden bg-[var(--malachite-card-sunken-background)] ${className}`}\n            style={minWidth ? { minWidth: `${minWidth}px` } : undefined}\n        >\n            <div className=\"w-full shrink-0 flex items-center justify-between px-6 pt-4 min-h-[var(--malachite-control-height-small,28px)]\">\n                <div className=\"flex items-center gap-[16px] min-w-0\">\n                    {showBack ? (\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            iconOnly\n                            icon={<ArrowLeftIcon size={14} />}\n                            disabled={backDisabled}\n                            onClick={onBack}\n                            aria-label=\"Back\"\n                            className=\"w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0\"\n                        />\n                    ) : (\n                        <span className=\"w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0\" />\n                    )}\n                    {leading}\n                </div>\n                <div className=\"flex items-center gap-[16px]\">\n                    {trailing ?? null}\n                    {stepper ?? null}\n                </div>\n            </div>\n\n            {header ? (\n                <div className=\"w-full shrink-0 flex flex-col items-center px-6 pt-8\">\n                    <div\n                        className=\"w-full flex flex-col items-center gap-[24px]\"\n                        style={{ maxWidth: `${contentWidth}px` }}\n                    >\n                        {header}\n                    </div>\n                </div>\n            ) : null}\n\n            <div className=\"relative flex-1 min-h-0\">\n                <div\n                    className={`absolute inset-0 overflow-y-auto flex flex-col items-center px-6 ${\n                        center ? 'justify-center' : 'justify-start'\n                    }`}\n                    style={{\n                        // Reserve the overlaid footer's height plus a gap, so the last item\n                        // clears the footer with breathing room (not flush against it, which\n                        // reads as hidden content continuing underneath).\n                        paddingBottom: footer ? `${footerHeight + 24}px` : '48px',\n                    }}\n                >\n                    <div\n                        className=\"w-full flex flex-col items-center gap-[40px]\"\n                        style={{\n                            maxWidth: `${contentWidth}px`,\n                            // Top padding lives on the scrolling content — NOT the scrollport —\n                            // so a `position: sticky` child pins flush to the top with no gap.\n                            paddingTop: header ? '32px' : '48px',\n                        }}\n                    >\n                        {children}\n                    </div>\n                </div>\n\n                {footer ? (\n                    <div\n                        ref={footerRef}\n                        // z-20 keeps the pinned footer above sticky body content (e.g. a\n                        // sticky Accordion header at z-10) so it can't paint over the footer.\n                        className=\"absolute inset-x-0 bottom-0 z-20\"\n                        style={footerGlass ? GLASS_SURFACE_STYLE : undefined}\n                    >\n                        {footer}\n                    </div>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default WizardLayout;\nexport { WizardLayout };\n"],"names":["WizardLayout","showBack","onBack","backDisabled","leading","stepper","trailing","header","footer","footerGlass","center","contentWidth","minWidth","children","className","footerRef","useRef","footerHeight","setFooterHeight","useState","useLayoutEffect","el","update","observer","jsxs","jsx","Button","ArrowLeftIcon","GLASS_SURFACE_STYLE"],"mappings":"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"}
+{"version":3,"file":"WizardLayout.js","sources":["../../src/components/WizardLayout.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\n\nexport interface WizardLayoutProps {\n    /** Renders the outline back button in the top-left slot. */\n    showBack?: boolean;\n    onBack?: () => void;\n    backDisabled?: boolean;\n    /** `false` drops the hidden back button's square, so `leading` sits at the same inset as `trailing`. */\n    reserveBack?: boolean;\n    /** `large`: a 60px bar with 28px insets (52px and 16px below 640px), items centred. */\n    topBarSize?: 'default' | 'large';\n    /** Top-left slot beside the back button — e.g. a user avatar menu. */\n    leading?: React.ReactNode;\n    /** Right top-bar slot (sits just before `stepper`) — e.g. a theme toggle. */\n    stepper?: React.ReactNode;\n    /** Far-right top-bar slot — e.g. a theme toggle. */\n    trailing?: React.ReactNode;\n    /** A page-wide notice under the top bar, above `header`. */\n    banner?: React.ReactNode;\n    /**\n     * Pinned below the top bar and always visible while the content scrolls —\n     * e.g. connection logos + a step title. Rendered in the same centred column\n     * as the content (`contentWidth`).\n     */\n    header?: React.ReactNode;\n    /** Pinned to the bottom of the screen — typically a <FooterNav /> or a primary CTA. */\n    footer?: React.ReactNode;\n    /**\n     * Give the pinned footer a frosted-glass treatment (translucent background +\n     * backdrop blur) so scrolling content shows through it. The footer already sits\n     * above sticky body content, so it reads as glass over the scrolling list.\n     */\n    footerGlass?: boolean;\n    /** `content` holds the footer to the content column, so a full-width action lines up with the list. */\n    footerAlign?: 'full' | 'content';\n    /** Vertically centre the content (used for terminal/success screens). */\n    center?: boolean;\n    /** Max width of the centered content column. */\n    contentWidth?: number;\n    /** Minimum width of the whole layout, below which it scrolls horizontally. */\n    minWidth?: number;\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst TOP_BAR_CLASSES: Record<NonNullable<WizardLayoutProps['topBarSize']>, string> = {\n    default: 'px-6 pt-4 min-h-[var(--malachite-control-height-small,28px)]',\n    large: 'h-[60px] px-[28px] max-sm:h-[52px] max-sm:px-[16px]',\n};\n\nconst WizardLayout: React.FC<WizardLayoutProps> = ({\n    showBack = false,\n    onBack,\n    backDisabled = false,\n    reserveBack = true,\n    topBarSize = 'default',\n    leading,\n    stepper,\n    trailing,\n    banner,\n    header,\n    footer,\n    footerGlass = false,\n    footerAlign = 'full',\n    center = false,\n    contentWidth = 480,\n    minWidth,\n    children,\n    className = '',\n}) => {\n    // The footer overlays the bottom of the scroll area (so content can glass under\n    // it). Measure it so the scroll content reserves matching bottom space and the\n    // last item is never hidden behind it.\n    const footerRef = useRef<HTMLDivElement>(null);\n    const [footerHeight, setFooterHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the footer node mounts/unmounts so the observer attaches to the current element.\n    useLayoutEffect(() => {\n        const el = footerRef.current;\n        if (!el) {\n            setFooterHeight(0);\n            return;\n        }\n        const update = () => setFooterHeight(el.offsetHeight);\n        update();\n        const observer = new ResizeObserver(update);\n        observer.observe(el);\n        return () => observer.disconnect();\n    }, [footer]);\n\n    return (\n        <div\n            className={`w-full h-screen flex flex-col overflow-hidden bg-[var(--malachite-card-sunken-background)] ${className}`}\n            style={minWidth ? { minWidth: `${minWidth}px` } : undefined}\n        >\n            <div\n                className={`w-full shrink-0 flex items-center justify-between ${TOP_BAR_CLASSES[topBarSize]}`}\n            >\n                <div className=\"flex items-center gap-[16px] min-w-0\">\n                    {showBack ? (\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            iconOnly\n                            icon={<ArrowLeftIcon size={14} />}\n                            disabled={backDisabled}\n                            onClick={onBack}\n                            aria-label=\"Back\"\n                            className=\"w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0\"\n                        />\n                    ) : reserveBack ? (\n                        <span className=\"w-[var(--malachite-control-height-small,28px)] h-[var(--malachite-control-height-small,28px)] shrink-0\" />\n                    ) : null}\n                    {leading}\n                </div>\n                <div className=\"flex items-center gap-[16px]\">\n                    {trailing ?? null}\n                    {stepper ?? null}\n                </div>\n            </div>\n\n            {banner ? <div className=\"w-full shrink-0 px-[12px] pt-[12px]\">{banner}</div> : null}\n\n            {header ? (\n                <div className=\"w-full shrink-0 flex flex-col items-center px-6 pt-8\">\n                    <div\n                        className=\"w-full flex flex-col items-center gap-[24px]\"\n                        style={{ maxWidth: `${contentWidth}px` }}\n                    >\n                        {header}\n                    </div>\n                </div>\n            ) : null}\n\n            <div className=\"relative flex-1 min-h-0\">\n                <div\n                    className={`absolute inset-0 overflow-y-auto flex flex-col items-center px-6 ${\n                        center ? 'justify-center' : 'justify-start'\n                    }`}\n                    style={{\n                        // Reserve the overlaid footer's height plus a gap, so the last item\n                        // clears the footer with breathing room (not flush against it, which\n                        // reads as hidden content continuing underneath).\n                        paddingBottom: footer ? `${footerHeight + 24}px` : '48px',\n                    }}\n                >\n                    <div\n                        className=\"w-full flex flex-col items-center gap-[40px]\"\n                        style={{\n                            maxWidth: `${contentWidth}px`,\n                            // Top padding lives on the scrolling content — NOT the scrollport —\n                            // so a `position: sticky` child pins flush to the top with no gap.\n                            paddingTop: header ? '32px' : '48px',\n                        }}\n                    >\n                        {children}\n                    </div>\n                </div>\n\n                {footer ? (\n                    <div\n                        ref={footerRef}\n                        // z-20 keeps the pinned footer above sticky body content (e.g. a\n                        // sticky Accordion header at z-10) so it can't paint over the footer.\n                        className=\"absolute inset-x-0 bottom-0 z-20\"\n                        style={footerGlass ? GLASS_SURFACE_STYLE : undefined}\n                    >\n                        {footerAlign === 'content' ? (\n                            <div className=\"flex justify-center px-6 pt-4 pb-3\">\n                                <div className=\"w-full\" style={{ maxWidth: `${contentWidth}px` }}>\n                                    {footer}\n                                </div>\n                            </div>\n                        ) : (\n                            footer\n                        )}\n                    </div>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default WizardLayout;\nexport { WizardLayout };\n"],"names":["TOP_BAR_CLASSES","WizardLayout","showBack","onBack","backDisabled","reserveBack","topBarSize","leading","stepper","trailing","banner","header","footer","footerGlass","footerAlign","center","contentWidth","minWidth","children","className","footerRef","useRef","footerHeight","setFooterHeight","useState","useLayoutEffect","el","update","observer","jsxs","jsx","Button","ArrowLeftIcon","GLASS_SURFACE_STYLE"],"mappings":"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"}

package/dist/index.d.ts

@@ -51,6 +51,11 @@ declare interface AccordionBaseProps {
      * be interactive (e.g. a Checkbox) without nesting a button inside a button.
      */
     trailing?: default_2.ReactNode;
+    /** Before the title, outside the toggle button. */
+    leading?: default_2.ReactNode;
+    arrowPosition?: 'start' | 'end';
+    /** `false` keeps an open row on the card ground. */
+    highlightExpanded?: boolean;
     defaultExpanded?: boolean;
     isExpanded?: boolean;
     onToggle?: (expanded: boolean) => void;
@@ -180,6 +185,8 @@ export declare const AdvancedLogsIcon: React.FC<IconProps_4>;
 
 export declare const Alert: default_2.FC<AlertProps>;
 
+export declare type AlertLayout = 'inline' | 'banner';
+
 declare interface AlertProps {
     type?: AlertType;
     message: string;
@@ -199,6 +206,10 @@ declare interface AlertProps {
     live?: boolean;
     /** Routes root-relative links in `message` through the app's router; see `MarkdownBlock`. */
     renderLink?: RenderLink;
+    /** `banner`: a 48px page-wide band. Applies only without `children`. */
+    layout?: AlertLayout;
+    /** A bold sentence the message runs on from. Plain text, not markdown. */
+    lead?: string;
 }
 
 export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';
@@ -402,10 +413,14 @@ declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonE
     contentAlign?: 'center' | 'start';
     /** Fills the container's width. */
     flexGrow?: boolean;
+    /** `wide` holds a 120px floor for a primary action. */
+    width?: 'auto' | 'wide';
     fill?: boolean;
     tooltip?: string;
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
     iconOnly?: boolean;
+    /** Pulls a borderless button out by its own padding, so its label lines up with the text around it. */
+    flush?: boolean;
     children?: default_2.ReactNode;
     onClick?: default_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>;
     /** Renders the button as a real anchor, so a link action is never an <a> nested in a <button>. */
@@ -430,7 +445,9 @@ export declare type ButtonVariant = 'filled' | 'outline'
 * acts on what it produced. Provenance, not a severity: it says who is being asked, not
 * that anything is wrong.
 */
-| 'assistant' | 'destructive' | 'success' | 'warning' | 'error' | 'ghost' | 'no-style';
+| 'assistant' | 'destructive' | 'success' | 'warning' | 'error' | 'ghost'
+/** Text only, in the accent colour, for a secondary action beside a primary one. */
+| 'quiet' | 'no-style';
 
 export declare const Card: default_2.FC<CardProps>;
 
@@ -1650,6 +1667,7 @@ declare interface EllipsisTextProps {
     maxWidth?: string;
     color?: TextColor;
     size?: FontSize;
+    fontWeight?: FontWeight;
     /**
      * Show `tooltip` only when the text is actually cut off. Opt-in, because `tooltip` is any
      * node: a caller repeating the label wants this, and one supplying something the label does
@@ -3565,6 +3583,8 @@ export declare interface ModalProps {
     closeOnOverlayClick?: boolean;
     /** Whether the body gets default padding. Default: true. */
     bodyPadding?: boolean;
+    /** `tall`: 600px, or the viewport less 160px, for content that sizes to its box. */
+    bodyHeight?: 'auto' | 'tall';
     /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by
      *  `bodyPadding`, and announced ahead of the dialog's description. The message is markdown. */
     callouts?: {
@@ -4027,6 +4047,8 @@ declare type PopoverFocusSource = {
 export declare interface PopoverHeaderProps {
     title: string;
     action?: default_2.ReactNode;
+    /** `false` drops the rule and sits the header 4px over the list. */
+    divider?: boolean;
 }
 
 export declare type PopoverInitialFocus = default_2.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
@@ -4310,6 +4332,7 @@ export declare interface SearchProps {
     /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */
     size?: SearchSize;
     variant?: SearchVariant;
+    textSize?: SearchTextSize;
     disabled?: boolean;
     autoFocus?: boolean;
     className?: string;
@@ -4331,6 +4354,9 @@ export declare interface SearchProps {
 
 export declare type SearchSize = 'small' | 'medium' | 'large';
 
+/** `body` is the 14px body step at any size. */
+export declare type SearchTextSize = 'control' | 'body';
+
 export declare const SearchTrigger: default_2.ForwardRefExoticComponent<SearchTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface SearchTriggerProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'color' | 'type'> {
@@ -4663,12 +4689,15 @@ export declare interface SidePanelProps {
     /** Dismiss handler — close button, ESC, or overlay click. */
     onClose: () => void;
     title: default_2.ReactNode;
-    /** Secondary text, inline after the title. */
     subtitle?: default_2.ReactNode;
+    /** `below` stacks the subtitle under the title, so neither truncates the other. */
+    subtitlePlacement?: 'inline' | 'below';
     /** Content at the end of the title row, after the subtitle (e.g. a status tag). */
     titleExtra?: default_2.ReactNode;
     /** Block paragraph below the title row, spanning the header width. Announced as the panel's description. */
     description?: default_2.ReactNode;
+    /** Pinned between the header and the scrolling body. */
+    toolbar?: default_2.ReactNode;
     /** Divider under the header. Default: false. */
     headerDivider?: boolean;
     /** Leading header slot, typically a logo or icon. */
@@ -4853,6 +4882,26 @@ export declare interface StatusBadgeProps {
 
 export declare type StatusBadgeType = 'success' | 'error' | 'warning' | 'info';
 
+export declare const StatusPill: default_2.FC<StatusPillProps>;
+
+export declare interface StatusPillProps {
+    label: string;
+    /** Set in the mono face after a `·`. */
+    detail?: string;
+    tone?: StatusPillTone;
+    icon?: default_2.ReactNode;
+    busy?: boolean;
+    /** Makes it a `status` live region. Off by default, as on `Alert`. */
+    live?: boolean;
+    /** Names the live region; only applies with `live`. */
+    'aria-label'?: string;
+    /** Only applies with `live`. */
+    'aria-labelledby'?: string;
+    className?: string;
+}
+
+export declare type StatusPillTone = 'success' | 'neutral' | 'warning' | 'error';
+
 export declare const StepCurrentIcon: React.FC<IconProps_104>;
 
 export declare const Stepper: default_2.FC<StepperProps>;
@@ -4985,6 +5034,8 @@ declare interface SurfaceRowChromeProps {
      * an outcome, where the result belongs to the whole line rather than to one cell in it.
      */
     tone?: 'default' | 'muted' | 'success' | 'error';
+    /** `compact` is an 8px by 16px inset the row owns. */
+    inset?: 'none' | 'compact';
     className?: string;
     style?: default_2.CSSProperties;
 }
@@ -5323,6 +5374,7 @@ export declare interface TextProps {
     children: default_2.ReactNode;
     tooltip?: string;
     textAlign?: 'left' | 'center' | 'right' | 'justify';
+    wrap?: boolean;
     /** The element it renders, for a heading or paragraph that keeps Text's look. */
     as?: TextElement;
     className?: string;
@@ -5454,6 +5506,9 @@ export declare interface ToolbarProps {
      *  the content it pins over — the consumer then owns the gutter. */
     padding?: 'none' | 'compact' | 'default';
     layout?: 'plain' | 'filters';
+    /** `page` paints the sunken page ground, for a bar that sits above a card. */
+    surface?: 'card' | 'page';
+    sticky?: boolean;
     className?: string;
     style?: default_2.CSSProperties;
 }
@@ -5583,12 +5638,18 @@ export declare interface WizardLayoutProps {
     showBack?: boolean;
     onBack?: () => void;
     backDisabled?: boolean;
+    /** `false` drops the hidden back button's square, so `leading` sits at the same inset as `trailing`. */
+    reserveBack?: boolean;
+    /** `large`: a 60px bar with 28px insets (52px and 16px below 640px), items centred. */
+    topBarSize?: 'default' | 'large';
     /** Top-left slot beside the back button — e.g. a user avatar menu. */
     leading?: default_2.ReactNode;
     /** Right top-bar slot (sits just before `stepper`) — e.g. a theme toggle. */
     stepper?: default_2.ReactNode;
     /** Far-right top-bar slot — e.g. a theme toggle. */
     trailing?: default_2.ReactNode;
+    /** A page-wide notice under the top bar, above `header`. */
+    banner?: default_2.ReactNode;
     /**
      * Pinned below the top bar and always visible while the content scrolls —
      * e.g. connection logos + a step title. Rendered in the same centred column
@@ -5603,6 +5664,8 @@ export declare interface WizardLayoutProps {
      * above sticky body content, so it reads as glass over the scrolling list.
      */
     footerGlass?: boolean;
+    /** `content` holds the footer to the content column, so a full-width action lines up with the list. */
+    footerAlign?: 'full' | 'content';
     /** Vertically centre the content (used for terminal/success screens). */
     center?: boolean;
     /** Max width of the centered content column. */