@eifi1/ui-kit 0.10.0 → 0.11.0

package/dist/components/field.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** What a `Field` hands its render-prop children, to spread on the control. */
+interface FieldControlProps {
+    /** The id the label's `htmlFor` points at. */
+    id: string;
+    /** The ids of the hint and the error that are rendered, or `undefined` when
+     *  neither is. */
+    "aria-describedby": string | undefined;
+    /** `true` while the field has an error, `undefined` otherwise. */
+    "aria-invalid": true | undefined;
+    /** `true` when the field is `required`. The label's star is `aria-hidden`; this
+     *  is what a screen reader hears instead. */
+    "aria-required": true | undefined;
+}
+interface FieldProps {
+    /** The label above the control. Omit it for a group whose control is labelled
+     *  some other way; the hint and error still render. */
+    label?: ReactNode;
+    /** Draws the kit's required mark after the label, and sets `aria-required` on the
+     *  render-prop control. */
+    required?: boolean;
+    /** Muted helper text below the control. */
+    hint?: ReactNode;
+    /** The error below the control. `null`, `false` and `""` are no error — what a
+     *  `touched && errors.x` evaluates to on the happy path. */
+    error?: ReactNode;
+    /** The control's id. Defaults to a generated one; set it when the control carries
+     *  its own id (plain children). */
+    htmlFor?: string;
+    /** Dims the label with its control. */
+    disabled?: boolean;
+    /** The label's size: `sm` for a dense row, `md` otherwise. */
+    labelSize?: "sm" | "md";
+    /** Wrapper className. */
+    className?: string;
+    /** The control. A function receives {@link FieldControlProps} to spread on it. */
+    children: ReactNode | ((control: FieldControlProps) => ReactNode);
+}
+declare function Field({ label, required, hint, error, htmlFor, disabled, labelSize, className, children, }: FieldProps): react.JSX.Element;
+
+export { Field, type FieldControlProps, type FieldProps };

package/dist/components/field.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Label } from "./ui.js";
+const isShown = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+function Field({
+  label,
+  required,
+  hint,
+  error,
+  htmlFor,
+  disabled,
+  labelSize,
+  className,
+  children
+}) {
+  const generated = useId();
+  const id = htmlFor ?? `${generated}-control`;
+  const hintId = `${generated}-hint`;
+  const errorId = `${generated}-error`;
+  const hasHint = isShown(hint);
+  const hasError = isShown(error);
+  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(" ");
+  const control = {
+    id,
+    "aria-describedby": describedBy || void 0,
+    "aria-invalid": hasError || void 0,
+    "aria-required": required || void 0
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "field", className: cn("grid gap-1.5", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: id,
+        required,
+        disabled,
+        size: labelSize,
+        "data-error": hasError || void 0,
+        className: "data-[error=true]:text-[var(--danger)]",
+        children: label
+      }
+    ),
+    typeof children === "function" ? children(control) : children,
+    hasHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
+    hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-[11px] leading-tight text-[var(--danger)]", children: error })
+  ] });
+}
+export {
+  Field
+};
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["/**\n * A field group with its label ABOVE the control: label, control, hint, error.\n *\n * ```tsx\n * <Field label=\"IBAN\" required hint=\"22 characters\" error={errors.iban}>\n *   {(ids) => <Input {...ids} value={iban} onChange={…} />}\n * </Field>\n * ```\n *\n * The kit's `Input` and `Select` float their label inside the field, and the pickers\n * draw theirs the same way. That is the wrong shape for a control the kit did not\n * render, a radio group, a range slider, or a form that sets its labels above the\n * fields throughout — which is what kastlan's wizards are, and why it kept its own\n * `WizardField` after the kit dropped the one it had never rendered. This is that\n * group, with the wiring the old one left to the caller: the label names the control\n * through `htmlFor`, and the control is described by the hint and the error that are\n * actually on screen.\n *\n * ## Wiring\n *\n * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,\n * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.\n * Plain children render as they are, for a control that wires itself (a checkbox that\n * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the\n * label at the control's own id, and the hint and error are on screen but describe\n * nothing — the same as the `WizardField` this replaces.\n *\n * ## Decoupled\n *\n * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain\n * value. Pass `wizard.fieldErrors.iban`, a step-local error, or\n * `fieldState.error?.message` from a `FormField` render — the markup is the same\n * whichever of them gates the step, so a step can move between them without its\n * fields changing. (Inside a react-hook-form form, `FormItem` + `FormLabel` from\n * `@eifi1/ui-kit/rhf` do the same job with the ids taken from the form.)\n *\n * The error is NOT `role=\"alert\"`, for the reason the kit's `error` prop gives (see\n * `useFieldError` in components/ui.tsx): it is read when focus reaches the control.\n */\nimport { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./ui\";\n\n/** What a `Field` hands its render-prop children, to spread on the control. */\nexport interface FieldControlProps {\n  /** The id the label's `htmlFor` points at. */\n  id: string;\n  /** The ids of the hint and the error that are rendered, or `undefined` when\n   *  neither is. */\n  \"aria-describedby\": string | undefined;\n  /** `true` while the field has an error, `undefined` otherwise. */\n  \"aria-invalid\": true | undefined;\n  /** `true` when the field is `required`. The label's star is `aria-hidden`; this\n   *  is what a screen reader hears instead. */\n  \"aria-required\": true | undefined;\n}\n\nexport interface FieldProps {\n  /** The label above the control. Omit it for a group whose control is labelled\n   *  some other way; the hint and error still render. */\n  label?: ReactNode;\n  /** Draws the kit's required mark after the label, and sets `aria-required` on the\n   *  render-prop control. */\n  required?: boolean;\n  /** Muted helper text below the control. */\n  hint?: ReactNode;\n  /** The error below the control. `null`, `false` and `\"\"` are no error — what a\n   *  `touched && errors.x` evaluates to on the happy path. */\n  error?: ReactNode;\n  /** The control's id. Defaults to a generated one; set it when the control carries\n   *  its own id (plain children). */\n  htmlFor?: string;\n  /** Dims the label with its control. */\n  disabled?: boolean;\n  /** The label's size: `sm` for a dense row, `md` otherwise. */\n  labelSize?: \"sm\" | \"md\";\n  /** Wrapper className. */\n  className?: string;\n  /** The control. A function receives {@link FieldControlProps} to spread on it. */\n  children: ReactNode | ((control: FieldControlProps) => ReactNode);\n}\n\nconst isShown = (node: ReactNode) =>\n  node !== undefined && node !== null && node !== false && node !== \"\";\n\nexport function Field({\n  label,\n  required,\n  hint,\n  error,\n  htmlFor,\n  disabled,\n  labelSize,\n  className,\n  children,\n}: FieldProps) {\n  const generated = useId();\n  const id = htmlFor ?? `${generated}-control`;\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  const hasHint = isShown(hint);\n  const hasError = isShown(error);\n  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(\" \");\n  const control: FieldControlProps = {\n    id,\n    \"aria-describedby\": describedBy || undefined,\n    \"aria-invalid\": hasError || undefined,\n    \"aria-required\": required || undefined,\n  };\n  return (\n    <div data-slot=\"field\" className={cn(\"grid gap-1.5\", className)}>\n      {label !== undefined && (\n        <Label\n          htmlFor={id}\n          required={required}\n          disabled={disabled}\n          size={labelSize}\n          data-error={hasError || undefined}\n          className=\"data-[error=true]:text-[var(--danger)]\"\n        >\n          {label}\n        </Label>\n      )}\n      {typeof children === \"function\" ? children(control) : children}\n      {hasHint && (\n        <p id={hintId} className=\"text-[11px] leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className=\"text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8GI,SAEI,KAFJ;AAvEJ,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,aAAa;AAyCtB,MAAM,UAAU,CAAC,SACf,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAE7D,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,WAAW,GAAG,SAAS;AAClC,QAAM,SAAS,GAAG,SAAS;AAC3B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,QAAQ,IAAI;AAC5B,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,cAAc,CAAC,WAAW,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrF,QAAM,UAA6B;AAAA,IACjC;AAAA,IACA,oBAAoB,eAAe;AAAA,IACnC,gBAAgB,YAAY;AAAA,IAC5B,iBAAiB,YAAY;AAAA,EAC/B;AACA,SACE,qBAAC,SAAI,aAAU,SAAQ,WAAW,GAAG,gBAAgB,SAAS,GAC3D;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,cAAY,YAAY;AAAA,QACxB,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAED,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;AAAA,IACrD,WACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,sDACtB,gBACH;AAAA,IAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,kDACvB,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/file-button.d.ts

@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
 import { Button } from './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /**
  * A button that opens the file picker — the shape all three apps kept writing by hand

package/dist/components/file-dropzone.d.ts

@@ -4,6 +4,7 @@ import { FileRejection, FilePickHandler, FilePickerLabels } from './file-button.
 import './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /**
  * Where a refused file's message goes.

package/dist/components/floating-panel.d.ts

@@ -1,9 +1,18 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+import { ButtonHTMLAttributes, ReactNode, MouseEvent, ReactElement, Ref, HTMLAttributes } from 'react';
+import { TooltipSide } from './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 interface FloatingPanelLabels {
     /** Accessible name of the panel header's X. */
     close: string;
+    /**
+     * What a {@link FloatingAction}'s count badge adds to its accessible name ("3 new"),
+     * read after the label: "Invoices, 3 new". The dot itself is hidden from a reader —
+     * a bare "3" read out of context says nothing about what is counted.
+     */
+    badge: (count: number) => string;
 }
 declare const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels;
 /** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */
@@ -44,6 +53,49 @@ interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
      * in both states; `aria-pressed` already says which one it is in.
      */
     pressed?: boolean;
+    /**
+     * Show `label` beside the icon: the EXTENDED FAB, a pill rather than a disc. For a
+     * corner control whose words are the point — kastlan's offline indicator
+     * (shared/offline/offline-indicator.tsx:39) is a pill saying "Offline — 2 photo(s)
+     * queued" / "Syncing…", hand-placed at `fixed bottom-4 left-4`, i.e. over the
+     * bottom nav and on the wrong side in RTL. Same height as the disc (3rem), so a
+     * {@link FloatingPanel} card above it still clears it.
+     */
+    extended?: boolean;
+    /**
+     * Announce `label` whenever it changes, through a polite `role="status"` region — for
+     * an extended FAB that REPORTS something (kastlan's offline/sync state), where a
+     * sighted user sees the words change and a screen reader user otherwise hears
+     * nothing until they happen to land on the button.
+     *
+     * ⚠️ A live region announces changes, not its own arrival: a FAB that mounts already
+     * saying "Offline" says it to nobody. Keep it mounted and pass `hidden` while there
+     * is nothing to report (kastlan returns `null` when online and idle); the region
+     * stays in the page, and the first real status is heard.
+     */
+    live?: boolean;
+    /**
+     * `primary` (default): the solid brand disc of a page's main action. `surface`: the
+     * page's surface with a hairline border — for a FAB that is a status rather than a
+     * call to action, as kastlan's offline pill is (a brand pill would shout "press me"
+     * at a user who is merely offline). Ignored while `pressed` is set; a toggle has its
+     * own two looks.
+     */
+    variant?: "primary" | "surface";
+    /**
+     * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —
+     * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,
+     * which cannot work: the tooltip's anchor is a `relative inline-flex` span, and this
+     * button is `fixed` and portalled. With `tooltip` the FAB positions a fixed wrapper
+     * instead and the button sits in the tooltip inside it. `true` shows the `label`;
+     * any other content shows that. Implies no native `title` (whatever `nativeTitle`
+     * says): one hover hint, not two. `style` stays on the button; the corner and
+     * `offset` move to the wrapper.
+     */
+    tooltip?: ReactNode;
+    /** Where the {@link tooltip} opens. Default `top`; the bubble is portalled and kept on
+     *  screen, so a corner button's label is not pushed off the edge. */
+    tooltipSide?: TooltipSide;
     ref?: Ref<HTMLButtonElement>;
 }
 /**
@@ -63,7 +115,7 @@ interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
  * Portalled, because `position: fixed` inside any transformed ancestor (an animated
  * page transition) is fixed to that ancestor, not to the screen.
  */
-declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, className, style, type, title, ...rest }: FloatingActionButtonProps): react.JSX.Element;
+declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, extended, live, variant, tooltip, tooltipSide, className, style, type, title, ...rest }: FloatingActionButtonProps): react.JSX.Element;
 interface FloatingPanelProps {
     /** The panel's heading, and its accessible name. */
     title: ReactNode;
@@ -84,6 +136,10 @@ interface FloatingPanelProps {
     /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.
      *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */
     fabNativeTitle?: boolean;
+    /** The FAB's kit tooltip — see {@link FloatingActionButtonProps.tooltip}. `true` for
+     *  keksdose's assistant launcher, which wanted the kit bubble and had no way to
+     *  put one on a fixed, portalled button (dev#523). */
+    fabTooltip?: ReactNode;
     /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else "Close". */
     closeLabel?: string;
     /**
@@ -129,6 +185,93 @@ interface FloatingPanelProps {
  * panel unmounts when closed; an app that must keep a draft across a close keeps it in
  * its own state, where it also survives a reload.
  */
-declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
+declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, fabTooltip, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
+interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    /** Name the group ("Register actions"); a reader then introduces the members as one
+     *  set. A group with no name is one more unlabelled wrapper. */
+    "aria-label"?: string;
+    /** Default `bottom-end`. */
+    corner?: FloatingCorner;
+    /** Distance above the nav / home indicator — see {@link FloatingActionButtonProps.offset}. */
+    offset?: string;
+    /** {@link FloatingAction}s, in reading order. */
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A floating pill of {@link FloatingAction}s — one to four `size-12` toggles, actions
+ * or links with hairline dividers — pinned to a corner exactly as the
+ * {@link FloatingActionButton} is: `--app-nav-h` and the home indicator cleared, a
+ * logical corner, portalled.
+ *
+ * keksdose built it twice by hand: the /transactions phone toolbar
+ * (transactions-page.tsx:644 — upcoming and pending toggles, an invoices link with a
+ * pending count, and the brand "+") and the feedback page's "awaiting only" toggle
+ * (feedback-page.tsx:854, one button in the group anyway, so the two pages look
+ * alike). Both at `right-4 bottom-20` — `right`, not `end`, so over the page's leading
+ * edge in RTL — with `divide-x`, slate hovers, and each member's `Tooltip` spelled out.
+ *
+ * `role="group"`, NOT a toolbar: every member keeps its own tab stop, as the
+ * hand-built ones did, and there is no arrow-key roving to learn. Hide it where it
+ * does not belong with a class (`md:hidden`, as both keksdose pages do).
+ */
+declare function FloatingActionGroup({ corner, offset, className, style, children, ...rest }: FloatingActionGroupProps): react.JSX.Element;
+/** What {@link FloatingActionProps.renderLink} is handed. Spread it onto your router's
+ *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+interface FloatingActionLinkProps {
+    href: string;
+    /** The member's whole look — keep it. */
+    className: string;
+    children: ReactNode;
+    "aria-label": string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    /** The accessible name, and the tooltip's text. Keep it the same in both states of a
+     *  toggle; `aria-pressed` says which one it is in. */
+    label: string;
+    icon: ReactNode;
+    /** Make it a toggle: `aria-pressed` and the brand "on" look (the brand glyph on the
+     *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link. */
+    pressed?: boolean;
+    /**
+     * `primary`: the brand-filled member, for the group's main action (the /transactions
+     * "+"). Default: the quiet one.
+     */
+    variant?: "default" | "primary";
+    /**
+     * A count in a dot at the member's top end corner — the /transactions invoices link's
+     * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count
+     * joins the accessible name through `floatingPanel.badge` ("Invoices, 3 new"), or
+     * `badgeLabel` when passed.
+     */
+    badge?: number;
+    /** The badge's words for a reader, replacing `floatingPanel.badge` — "3 to review". */
+    badgeLabel?: string;
+    /** The dot's colour. Default `warning`, the pending count's. */
+    badgeTone?: "warning" | "danger" | "brand";
+    /** Show `label` in the kit {@link Tooltip} on hover and focus. Default `true`: the
+     *  members are icon-only and this is their only visible label. */
+    tooltip?: boolean;
+    /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */
+    tooltipSide?: TooltipSide;
+    /** Make it a link — the /transactions invoices member. A plain `<a>` unless
+     *  `renderLink` hands it to your router. */
+    href?: string;
+    /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */
+    renderLink?: (props: FloatingActionLinkProps) => ReactElement;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * One member of a {@link FloatingActionGroup}: a `size-12` icon button, toggle or link
+ * with its label in a styled tooltip — what each keksdose member wrapped by hand in
+ * `<Tooltip portal>`. The tooltip is portalled because the group clips (`overflow-hidden`
+ * keeps the brand member's fill inside the pill's corners), and the focus ring is inset
+ * for the same reason.
+ */
+declare function FloatingAction({ label, icon, pressed, variant, badge, badgeLabel, badgeTone, tooltip, tooltipSide, href, renderLink, className, type, onClick, ref, ...rest }: FloatingActionProps): react.JSX.Element;
 
-export { DEFAULT_FLOATING_PANEL_LABELS, FloatingActionButton, type FloatingActionButtonProps, type FloatingCorner, FloatingPanel, type FloatingPanelLabels, type FloatingPanelProps };
+export { DEFAULT_FLOATING_PANEL_LABELS, FloatingAction, FloatingActionButton, type FloatingActionButtonProps, FloatingActionGroup, type FloatingActionGroupProps, type FloatingActionLinkProps, type FloatingActionProps, type FloatingCorner, FloatingPanel, type FloatingPanelLabels, type FloatingPanelProps };

package/dist/components/floating-panel.js

@@ -6,7 +6,11 @@ import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { dirOf } from "../lib/direction.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-const DEFAULT_FLOATING_PANEL_LABELS = { close: "Close" };
+import { Tooltip } from "./tooltip.js";
+const DEFAULT_FLOATING_PANEL_LABELS = {
+  close: "Close",
+  badge: (count) => `${count} new`
+};
 const BOTTOM_CLEARANCE = "max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))";
 const SIDE_GUTTER = "max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))";
 function cornerStyle(corner, lift) {
@@ -32,6 +36,11 @@ function FloatingActionButton({
   offset = "1rem",
   nativeTitle = true,
   pressed,
+  extended = false,
+  live = false,
+  variant = "primary",
+  tooltip,
+  tooltipSide = "top",
   className,
   style,
   type = "button",
@@ -40,36 +49,57 @@ function FloatingActionButton({
 }) {
   const [marker, dir] = usePortalDir();
   const toggle = pressed !== void 0;
-  const nativeTip = nativeTitle && title !== "" ? title ?? label : void 0;
+  const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? void 0 : tooltip;
+  const wrapped = tip !== void 0 && tip !== null;
+  const nativeTip = !wrapped && nativeTitle && title !== "" ? title ?? label : void 0;
+  const button = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      dir,
+      "aria-label": label,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
+      title: nativeTip,
+      style: wrapped ? style : { ...cornerStyle(corner, offset), ...style },
+      className: cn(
+        // Wrapped, the wrapper is the fixed thing and the button sits in it.
+        !wrapped && "fixed z-40",
+        "inline-flex items-center justify-center rounded-full",
+        extended ? "h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5" : "size-12 [&_svg]:size-6",
+        "shadow-lg transition-colors disabled:cursor-default",
+        !toggle && variant === "primary" && "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
+        !toggle && variant === "surface" && "border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:hover:bg-[var(--bg-surface)]",
+        // A toggle sits on the page's surface — a solid brand disc would read as
+        // "on" in both states — and says "on" in the brand family.
+        toggle && "border border-[var(--border)]",
+        pressed === false && "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+        pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
+        className
+      ),
+      children: [
+        icon,
+        extended && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "whitespace-nowrap", children: label })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
     typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          ...rest,
-          type,
-          dir,
-          "aria-label": label,
-          "aria-pressed": pressed ?? rest["aria-pressed"],
-          title: nativeTip,
-          style: { ...cornerStyle(corner, offset), ...style },
-          className: cn(
-            "fixed z-40 inline-flex size-12 items-center justify-center rounded-full",
-            "shadow-lg transition-colors",
-            !toggle && "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
-            // A toggle sits on the page's surface — a solid brand disc would read as
-            // "on" in both states — and says "on" in the brand family.
-            toggle && "border border-[var(--border)]",
-            pressed === false && "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
-            pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
-            "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
-            "[&_svg]:size-6",
-            className
-          ),
-          children: icon
-        }
-      ),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        wrapped ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            dir,
+            hidden: rest.hidden,
+            style: cornerStyle(corner, offset),
+            className: "fixed z-40 inline-flex",
+            children: /* @__PURE__ */ jsx(Tooltip, { label: tip, side: tooltipSide, portal: true, children: tip === label ? /* @__PURE__ */ jsx(Fragment, { children: button }) : button })
+          }
+        ) : button,
+        live && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: label })
+      ] }),
       document.body
     )
   ] });
@@ -84,6 +114,7 @@ function FloatingPanel({
   corner = "bottom-end",
   offset = "1rem",
   fabNativeTitle,
+  fabTooltip,
   closeLabel,
   initialFocus,
   className,
@@ -143,6 +174,7 @@ function FloatingPanel({
         corner,
         offset,
         nativeTitle: fabNativeTitle,
+        tooltip: fabTooltip,
         "aria-expanded": open,
         "aria-controls": open ? panelId : void 0,
         onClick: () => {
@@ -212,9 +244,137 @@ function FloatingPanel({
     )
   ] });
 }
+function FloatingActionGroup({
+  corner = "bottom-end",
+  offset = "1rem",
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const [marker, dir] = usePortalDir();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          role: "group",
+          dir,
+          "data-corner": corner,
+          style: { ...cornerStyle(corner, offset), ...style },
+          className: cn(
+            "fixed z-40 inline-flex flex-row overflow-hidden rounded-2xl",
+            "border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+            // Dividers on the logical start edge of every member but the first, so
+            // they sit between the same two members in RTL. The member is the
+            // tooltip's wrapper span, which is the direct child.
+            "[&>*:not(:first-child)]:border-s [&>*]:border-[var(--border)]",
+            className
+          ),
+          children
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+const BADGE_TONE = {
+  warning: "bg-[var(--warning)] text-[var(--text-inverse)]",
+  danger: "bg-[var(--danger)] text-[var(--danger-contrast)]",
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)]"
+};
+function FloatingAction({
+  label,
+  icon,
+  pressed,
+  variant = "default",
+  badge,
+  badgeLabel,
+  badgeTone = "warning",
+  tooltip = true,
+  tooltipSide = "top",
+  href,
+  renderLink,
+  className,
+  type = "button",
+  onClick,
+  ref,
+  ...rest
+}) {
+  const labels = useKitLabels("floatingPanel", DEFAULT_FLOATING_PANEL_LABELS);
+  const counted = badge !== void 0 && badge > 0;
+  const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
+  const isLink = href !== void 0;
+  const look = cn(
+    "relative flex size-12 items-center justify-center transition-colors",
+    "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
+    variant === "primary" ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : pressed && !isLink ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    counted && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-badge": "",
+        className: cn(
+          "pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-[10px] leading-4 font-semibold",
+          BADGE_TONE[badgeTone]
+        ),
+        children: badge > 99 ? "99+" : badge
+      }
+    )
+  ] });
+  let member;
+  if (isLink) {
+    const { disabled: _disabled, form: _form, value: _value, name: _name, ...anchorRest } = rest;
+    const linkProps = {
+      ...anchorRest,
+      href,
+      "aria-label": name,
+      onClick,
+      className: look,
+      children: body
+    };
+    const { children: content, ...anchor } = linkProps;
+    member = renderLink ? /* @__PURE__ */ jsx(RenderedFloatingLink, { render: renderLink, ...linkProps }) : /* @__PURE__ */ jsx("a", { ...anchor, children: content });
+  } else {
+    member = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type,
+        "aria-label": name,
+        "aria-pressed": pressed ?? rest["aria-pressed"],
+        onClick,
+        className: look,
+        children: body
+      }
+    );
+  }
+  if (!tooltip) return member;
+  return (
+    // A fragment: the bubble says the member's name, and a description that repeats
+    // the name is read twice.
+    /* @__PURE__ */ jsx(Tooltip, { label, side: tooltipSide, portal: true, children: /* @__PURE__ */ jsx(Fragment, { children: member }) })
+  );
+}
+function RenderedFloatingLink({
+  render,
+  ...props
+}) {
+  return render(props);
+}
 export {
   DEFAULT_FLOATING_PANEL_LABELS,
+  FloatingAction,
   FloatingActionButton,
+  FloatingActionGroup,
   FloatingPanel
 };
 //# sourceMappingURL=floating-panel.js.map