@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/text-link.d.ts

@@ -0,0 +1,176 @@
+import * as react from 'react';
+import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { ax as KitLinkComponent } from '../kit-labels-v3biUF1L.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import './field-sync.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+
+/**
+ * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a
+ * protocol-relative `//host`. A router's link is for paths inside the app, so the
+ * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.
+ *
+ * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the
+ * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to
+ * `to="/x"`. A plain in-page anchor (`#section`) is not external either, but it is not
+ * a route: see {@link isInPageAnchor}.
+ */
+declare function isExternalHref(href: string): boolean;
+/**
+ * An `href` that only scrolls the current page: `#section` (or a bare `#`). The
+ * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router
+ * link must not get an anchor — under a `HashRouter` `#section` would navigate to the
+ * path `/section` — so every kit link draws it as a plain `<a>`.
+ */
+declare function isInPageAnchor(href: string): boolean;
+/**
+ * Whether the provider's `linkComponent` (or a kit component's router fallback) draws
+ * `href`: an in-app path, `#/x` included — not an external `href`
+ * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).
+ */
+declare function isRoutableHref(href: string): boolean;
+/**
+ * What draws a kit link to `href`: the component's own `renderLink` when it was given
+ * one (it always wins — the caller asked for it by name), else the
+ * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else
+ * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /
+ * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router
+ * `#/x` go to the router link. Every kit link props type is a subset of the anchor
+ * attributes `KitLinkProps` describes, which is what makes the cast sound.
+ * @internal Shared by the kit's link-bearing components; not part of the barrel.
+ */
+declare function pickLinkRenderer<P>(own: ((props: P) => ReactElement) | undefined, kitLink: KitLinkComponent | undefined, href: string | undefined): ((props: P) => ReactElement) | undefined;
+/**
+ * Draws `props` through `render` as a component of its own, so a router link's hooks
+ * belong to it and not to the kit component calling it — for the kit components that
+ * call their own `renderLink` inline and reach the provider's link through here.
+ * @internal
+ */
+declare function RenderedKitLink<P>({ render, props }: {
+    render: (props: P) => ReactElement;
+    props: P;
+}): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+/** `brand` (default) for a link in running text, `muted` for footer and meta links
+ *  that should not compete with the content, `danger` for a destructive one ("Leave
+ *  group"), `inherit` for a link that takes its surroundings' colour. */
+type TextLinkTone = "brand" | "muted" | "danger" | "inherit";
+/** `hover` (default): underlined under the pointer — the idiom all three apps draw.
+ *  `always` for a link inside prose, where colour alone must not be the only mark
+ *  (WCAG 1.4.1). `none` where the context already says "link" (a footer nav). */
+type TextLinkUnderline = "hover" | "always" | "none";
+/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */
+type TextLinkCurrent = "page" | "step" | "location" | "date" | "time" | "true";
+/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is
+ *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */
+interface TextLinkRenderProps {
+    href: string;
+    /** The link's look — keep it, or the tone, underline and focus ring go. */
+    className: string;
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
+    "aria-current"?: TextLinkCurrent;
+    id?: string;
+    title?: string;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+interface TextLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "children" | "aria-current" | "onClick" | "onKeyDown"> {
+    href: string;
+    children: ReactNode;
+    /** Default `brand`. */
+    tone?: TextLinkTone;
+    /** Default `hover`. */
+    underline?: TextLinkUnderline;
+    /**
+     * The link leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`
+     * (never the router's), an external-link mark after the text (mirrored in RTL), and
+     * "opens in a new tab" (`common.opensInNewTab`) read after it — the mark says it
+     * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).
+     */
+    external?: boolean;
+    /**
+     * Keep the click (and the Enter that activates the link) from reaching an ancestor —
+     * a link in a DataTable row with `onRowClick` goes to its own target instead of
+     * running the row's action. kastlan's `CellLink` did this by hand.
+     */
+    stopPropagation?: boolean;
+    /** Mark the link as the current one of a set — `true` is `aria-current="page"`, the
+     *  legal footer's link to the page you are on. Drawn in semibold. */
+    current?: boolean | TextLinkCurrent;
+    /** A Lucide icon before the text, at the text's size — kastlan's "← Back" link. */
+    icon?: LucideIcon;
+    /** Your router's link for an in-app `href`. Default: the `<UiKitProvider
+     *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */
+    renderLink?: (props: TextLinkRenderProps) => ReactElement;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
+    ref?: Ref<HTMLAnchorElement>;
+}
+/**
+ * The one inline link: a real `<a href>` (middle click, "open in new tab", link
+ * semantics) through the app's router for an in-app path, in one of four tones.
+ *
+ * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,
+ * hover underline, one stopping the row click), the legal pages' back link and footer,
+ * the feedback page's URL links, the calculator's external sources with a hand-placed
+ * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)
+ * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router
+ * link comes from `<UiKitProvider linkComponent>`, set once.
+ *
+ * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit
+ * on the text's baseline at the text's size, so they scale with whatever type the link
+ * is set in. The focus ring is an outline, which follows every line of a wrapped link.
+ */
+declare function TextLink({ href, children, tone, underline, external, stopPropagation, current, icon: Icon, renderLink, className, onClick, onKeyDown, ref, ...rest }: TextLinkProps): react.JSX.Element;
+
+export { RenderedKitLink, TextLink, type TextLinkCurrent, type TextLinkProps, type TextLinkRenderProps, type TextLinkTone, type TextLinkUnderline, isExternalHref, isInPageAnchor, isRoutableHref, pickLinkRenderer };

package/dist/components/text-link.js

@@ -0,0 +1,109 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+function isExternalHref(href) {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
+}
+function isInPageAnchor(href) {
+  return href.startsWith("#") && !href.startsWith("#/");
+}
+function isRoutableHref(href) {
+  return !isExternalHref(href) && !isInPageAnchor(href);
+}
+function pickLinkRenderer(own, kitLink, href) {
+  if (own) return own;
+  if (!kitLink || href === void 0 || !isRoutableHref(href)) return void 0;
+  return kitLink;
+}
+function RenderedKitLink({ render, props }) {
+  return render(props);
+}
+const TONE = {
+  brand: "text-[var(--brand)] hover:text-[var(--brand-hover)]",
+  muted: "text-[var(--text-muted)] hover:text-[var(--text-primary)]",
+  danger: "text-[var(--danger)] hover:text-[var(--danger-hover)]",
+  inherit: ""
+};
+const UNDERLINE = {
+  hover: "no-underline hover:underline",
+  always: "underline",
+  none: "no-underline"
+};
+function TextLink({
+  href,
+  children,
+  tone = "brand",
+  underline = "hover",
+  external = false,
+  stopPropagation = false,
+  current,
+  icon: Icon,
+  renderLink,
+  className,
+  onClick,
+  onKeyDown,
+  ref,
+  ...rest
+}) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const kitLink = useKitLink();
+  const ariaCurrent = current === true ? "page" : current === false ? void 0 : current;
+  const look = cn(
+    "rounded-sm underline-offset-2 transition-colors",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+    TONE[tone],
+    UNDERLINE[underline],
+    ariaCurrent && "font-semibold",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "me-1 inline size-[1em] shrink-0 align-[-0.125em]" }),
+    children,
+    external && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true, className: "ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100" }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        "(",
+        common.opensInNewTab,
+        ")"
+      ] })
+    ] })
+  ] });
+  const props = {
+    ...rest,
+    ref,
+    href,
+    className: look,
+    "aria-current": ariaCurrent,
+    onClick: stopPropagation ? (event) => {
+      event.stopPropagation();
+      onClick?.(event);
+    } : onClick,
+    onKeyDown: stopPropagation ? (event) => {
+      if (event.key === "Enter") event.stopPropagation();
+      onKeyDown?.(event);
+    } : onKeyDown,
+    children: body
+  };
+  const render = external ? void 0 : pickLinkRenderer(renderLink, kitLink, href);
+  if (render) return /* @__PURE__ */ jsx(RenderedTextLink, { render, ...props });
+  const { children: content, ...anchor } = props;
+  return /* @__PURE__ */ jsx("a", { ...anchor, ...external ? { target: "_blank", rel: "noopener noreferrer" } : null, children: content });
+}
+function RenderedTextLink({
+  render,
+  ...props
+}) {
+  return render(props);
+}
+export {
+  RenderedKitLink,
+  TextLink,
+  isExternalHref,
+  isInPageAnchor,
+  isRoutableHref,
+  pickLinkRenderer
+};
+//# sourceMappingURL=text-link.js.map

package/dist/components/text-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/text-link.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent } from \"../i18n/kit-labels\";\n\n/* ── Choosing what draws a link ──────────────────────────────────────────── */\n\n/**\n * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a\n * protocol-relative `//host`. A router's link is for paths inside the app, so the\n * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.\n *\n * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the\n * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to\n * `to=\"/x\"`. A plain in-page anchor (`#section`) is not external either, but it is not\n * a route: see {@link isInPageAnchor}.\n */\nexport function isExternalHref(href: string): boolean {\n  return /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i.test(href);\n}\n\n/**\n * An `href` that only scrolls the current page: `#section` (or a bare `#`). The\n * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router\n * link must not get an anchor — under a `HashRouter` `#section` would navigate to the\n * path `/section` — so every kit link draws it as a plain `<a>`.\n */\nexport function isInPageAnchor(href: string): boolean {\n  return href.startsWith(\"#\") && !href.startsWith(\"#/\");\n}\n\n/**\n * Whether the provider's `linkComponent` (or a kit component's router fallback) draws\n * `href`: an in-app path, `#/x` included — not an external `href`\n * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).\n */\nexport function isRoutableHref(href: string): boolean {\n  return !isExternalHref(href) && !isInPageAnchor(href);\n}\n\n/**\n * What draws a kit link to `href`: the component's own `renderLink` when it was given\n * one (it always wins — the caller asked for it by name), else the\n * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else\n * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /\n * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router\n * `#/x` go to the router link. Every kit link props type is a subset of the anchor\n * attributes `KitLinkProps` describes, which is what makes the cast sound.\n * @internal Shared by the kit's link-bearing components; not part of the barrel.\n */\nexport function pickLinkRenderer<P>(\n  own: ((props: P) => ReactElement) | undefined,\n  kitLink: KitLinkComponent | undefined,\n  href: string | undefined,\n): ((props: P) => ReactElement) | undefined {\n  if (own) return own;\n  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;\n  return kitLink as unknown as (props: P) => ReactElement;\n}\n\n/**\n * Draws `props` through `render` as a component of its own, so a router link's hooks\n * belong to it and not to the kit component calling it — for the kit components that\n * call their own `renderLink` inline and reach the provider's link through here.\n * @internal\n */\nexport function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {\n  return render(props);\n}\n\n/* ── TextLink ─────────────────────────────────────────────────────────────── */\n\n/** `brand` (default) for a link in running text, `muted` for footer and meta links\n *  that should not compete with the content, `danger` for a destructive one (\"Leave\n *  group\"), `inherit` for a link that takes its surroundings' colour. */\nexport type TextLinkTone = \"brand\" | \"muted\" | \"danger\" | \"inherit\";\n\n/** `hover` (default): underlined under the pointer — the idiom all three apps draw.\n *  `always` for a link inside prose, where colour alone must not be the only mark\n *  (WCAG 1.4.1). `none` where the context already says \"link\" (a footer nav). */\nexport type TextLinkUnderline = \"hover\" | \"always\" | \"none\";\n\n/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */\nexport type TextLinkCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\";\n\n/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface TextLinkRenderProps {\n  href: string;\n  /** The link's look — keep it, or the tone, underline and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: TextLinkCurrent;\n  id?: string;\n  title?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface TextLinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"children\" | \"aria-current\" | \"onClick\" | \"onKeyDown\"> {\n  href: string;\n  children: ReactNode;\n  /** Default `brand`. */\n  tone?: TextLinkTone;\n  /** Default `hover`. */\n  underline?: TextLinkUnderline;\n  /**\n   * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`\n   * (never the router's), an external-link mark after the text (mirrored in RTL), and\n   * \"opens in a new tab\" (`common.opensInNewTab`) read after it — the mark says it\n   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).\n   */\n  external?: boolean;\n  /**\n   * Keep the click (and the Enter that activates the link) from reaching an ancestor —\n   * a link in a DataTable row with `onRowClick` goes to its own target instead of\n   * running the row's action. kastlan's `CellLink` did this by hand.\n   */\n  stopPropagation?: boolean;\n  /** Mark the link as the current one of a set — `true` is `aria-current=\"page\"`, the\n   *  legal footer's link to the page you are on. Drawn in semibold. */\n  current?: boolean | TextLinkCurrent;\n  /** A Lucide icon before the text, at the text's size — kastlan's \"← Back\" link. */\n  icon?: LucideIcon;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */\n  renderLink?: (props: TextLinkRenderProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst TONE: Record<TextLinkTone, string> = {\n  brand: \"text-[var(--brand)] hover:text-[var(--brand-hover)]\",\n  muted: \"text-[var(--text-muted)] hover:text-[var(--text-primary)]\",\n  danger: \"text-[var(--danger)] hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n};\n\nconst UNDERLINE: Record<TextLinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline\",\n  none: \"no-underline\",\n};\n\n/**\n * The one inline link: a real `<a href>` (middle click, \"open in new tab\", link\n * semantics) through the app's router for an in-app path, in one of four tones.\n *\n * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,\n * hover underline, one stopping the row click), the legal pages' back link and footer,\n * the feedback page's URL links, the calculator's external sources with a hand-placed\n * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)\n * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router\n * link comes from `<UiKitProvider linkComponent>`, set once.\n *\n * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit\n * on the text's baseline at the text's size, so they scale with whatever type the link\n * is set in. The focus ring is an outline, which follows every line of a wrapped link.\n */\nexport function TextLink({\n  href,\n  children,\n  tone = \"brand\",\n  underline = \"hover\",\n  external = false,\n  stopPropagation = false,\n  current,\n  icon: Icon,\n  renderLink,\n  className,\n  onClick,\n  onKeyDown,\n  ref,\n  ...rest\n}: TextLinkProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLink = useKitLink();\n  const ariaCurrent: TextLinkCurrent | undefined =\n    current === true ? \"page\" : current === false ? undefined : current;\n\n  const look = cn(\n    \"rounded-sm underline-offset-2 transition-colors\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n    TONE[tone],\n    UNDERLINE[underline],\n    ariaCurrent && \"font-semibold\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className=\"me-1 inline size-[1em] shrink-0 align-[-0.125em]\" />}\n      {children}\n      {external && (\n        <>\n          <ExternalLink aria-hidden className=\"ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100\" />\n          {\" \"}\n          <span className=\"sr-only\">({common.opensInNewTab})</span>\n        </>\n      )}\n    </>\n  );\n\n  const props: TextLinkRenderProps = {\n    ...(rest as Partial<TextLinkRenderProps>),\n    ref,\n    href,\n    className: look,\n    \"aria-current\": ariaCurrent,\n    onClick: stopPropagation\n      ? (event) => {\n          event.stopPropagation();\n          onClick?.(event);\n        }\n      : onClick,\n    onKeyDown: stopPropagation\n      ? (event) => {\n          if (event.key === \"Enter\") event.stopPropagation();\n          onKeyDown?.(event);\n        }\n      : onKeyDown,\n    children: body,\n  };\n\n  const render = external ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedTextLink render={render} {...props} />;\n  const { children: content, ...anchor } = props;\n  return (\n    <a {...anchor} {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}>\n      {content}\n    </a>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedTextLink({\n  render,\n  ...props\n}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAsMe,SAGP,UAHO,KAML,YANK;AArMf,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,kBAAkB;AAezD,SAAS,eAAe,MAAuB;AACpD,SAAO,+BAA+B,KAAK,IAAI;AACjD;AAQO,SAAS,eAAe,MAAuB;AACpD,SAAO,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,IAAI;AACtD;AAOO,SAAS,eAAe,MAAuB;AACpD,SAAO,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,IAAI;AACtD;AAYO,SAAS,iBACd,KACA,SACA,MAC0C;AAC1C,MAAI,IAAK,QAAO;AAChB,MAAI,CAAC,WAAW,SAAS,UAAa,CAAC,eAAe,IAAI,EAAG,QAAO;AACpE,SAAO;AACT;AAQO,SAAS,gBAAmB,EAAE,QAAQ,MAAM,GAAqD;AACtG,SAAO,OAAO,KAAK;AACrB;AAoEA,MAAM,OAAqC;AAAA,EACzC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,YAA+C;AAAA,EACnD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAiBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,UAAU,WAAW;AAC3B,QAAM,cACJ,YAAY,OAAO,SAAS,YAAY,QAAQ,SAAY;AAE9D,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA,KAAK,IAAI;AAAA,IACT,UAAU,SAAS;AAAA,IACnB,eAAe;AAAA,IACf;AAAA,EACF;AAEA,QAAM,OACJ,iCACG;AAAA,YAAQ,oBAAC,QAAK,eAAW,MAAC,WAAU,oDAAmD;AAAA,IACvF;AAAA,IACA,YACC,iCACE;AAAA,0BAAC,gBAAa,eAAW,MAAC,WAAU,6DAA4D;AAAA,MAC/F;AAAA,MACD,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,QAAE,OAAO;AAAA,QAAc;AAAA,SAAC;AAAA,OACpD;AAAA,KAEJ;AAGF,QAAM,QAA6B;AAAA,IACjC,GAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,SAAS,kBACL,CAAC,UAAU;AACT,YAAM,gBAAgB;AACtB,gBAAU,KAAK;AAAA,IACjB,IACA;AAAA,IACJ,WAAW,kBACP,CAAC,UAAU;AACT,UAAI,MAAM,QAAQ,QAAS,OAAM,gBAAgB;AACjD,kBAAY,KAAK;AAAA,IACnB,IACA;AAAA,IACJ,UAAU;AAAA,EACZ;AAEA,QAAM,SAAS,WAAW,SAAY,iBAAiB,YAAY,SAAS,IAAI;AAChF,MAAI,OAAQ,QAAO,oBAAC,oBAAiB,QAAiB,GAAG,OAAO;AAChE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SACE,oBAAC,OAAG,GAAG,QAAS,GAAI,WAAW,EAAE,QAAQ,UAAU,KAAK,sBAAsB,IAAI,MAC/E,mBACH;AAEJ;AAGA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAAmF;AACjF,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/components/text.d.ts

@@ -7,8 +7,15 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a
  * dense panel (a legend, a menu) or above a block of page content, and one size looked
  * wrong in the other place.
+ *
+ * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels
+ * its figures ("Assigned", "Activity", "Upcoming", "Available" —
+ * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line
+ * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a
+ * figure that size, 12px competed with it. Named `md` rather than slotted in order
+ * because `sm` was already the default and renaming it would move every caller.
  */
-type SectionLabelSize = "xs" | "sm";
+type SectionLabelSize = "xs" | "md" | "sm";
 /**
  * The small, uppercase, tracked, muted label — as a class string, per size.
  *

package/dist/components/text.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 const SECTION_LABEL_CLASS = {
   xs: "text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+  md: "text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
   sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
 };
 function SectionLabel({ as = "h3", size = "sm", className, children, ...rest }) {

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n */\nexport type SectionLabelSize = \"xs\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({ as = \"h3\", size = \"sm\", className, children, ...rest }: SectionLabelProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(SECTION_LABEL_CLASS[size], className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-[11px] leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AAoDI;AAnDJ,SAAS,UAAU;AAsBZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AACN;AAuBO,SAAS,aAAa,EAAE,KAAK,MAAM,OAAO,MAAM,WAAW,UAAU,GAAG,KAAK,GAAsB;AACxG,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,oBAAoB,IAAI,GAAG,SAAS,GAC9D,UACH;AAEJ;AAYO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  md: \"text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({ as = \"h3\", size = \"sm\", className, children, ...rest }: SectionLabelProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(SECTION_LABEL_CLASS[size], className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-[11px] leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AA4DI;AA3DJ,SAAS,UAAU;AA6BZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuBO,SAAS,aAAa,EAAE,KAAK,MAAM,OAAO,MAAM,WAAW,UAAU,GAAG,KAAK,GAAsB;AACxG,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,oBAAoB,IAAI,GAAG,SAAS,GAC9D,UACH;AAEJ;AAYO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}

package/dist/components/time-input.d.ts

@@ -1,7 +1,56 @@
 import * as react from 'react';
-import { InputProps } from './ui.js';
+import { aw as InputProps } from '../kit-labels-v3biUF1L.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).

package/dist/components/toggle-group.d.ts

@@ -61,6 +61,19 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * group's own box is dropped: two nested borders read as a control in a control.
      */
     label?: ReactNode;
+    /**
+     * Where `label` goes. `"field"` (default): the field chrome described under `label`.
+     * `"above"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}
+     * — with `hint` beside the label and `error` under the group, for a form that sets
+     * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE
+     * cap pair sits in a `Field` column between two labelled-above inputs, where the
+     * chrome's inner label would be the only one of its kind).
+     *
+     * Inside a `Field`, pass no `label` at all and spread the render-prop instead —
+     * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —
+     * so the Field's label names the group and its hint and error describe it.
+     */
+    labelPlacement?: "field" | "above";
     /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with
      *  `label`. */
     hint?: ReactNode;
@@ -69,11 +82,24 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      *  {@link Select}'s `error` does. Only with `label`. */
     error?: ReactNode;
 }
+/**
+ * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField
+ * `hint` (features/gear/common.tsx:97): not help behind a "?" but a caption, and one
+ * that changes as the choice does. Pass a function of the value for that; it is
+ * attached with `aria-describedby`, and a function caption is also a polite live
+ * region, because a description is read when the group is entered and not again when
+ * an arrow key changes the choice underneath it.
+ *
+ * In muted 11px text under the field (or the bare group), above an `error`.
+ */
+type ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);
 /** The group as it has always been: one option is always the answer. */
 interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {
     allowEmpty?: false;
     value: T;
     onChange: (value: T) => void;
+    /** See {@link ToggleGroupCaption}. */
+    caption?: ToggleGroupCaption<T>;
 }
 /**
  * A group that can be emptied: clicking the active option clears it, and `onChange`
@@ -89,6 +115,8 @@ interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBasePro
     allowEmpty: true;
     value: T | null;
     onChange: (value: T | null) => void;
+    /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */
+    caption?: ToggleGroupCaption<T | null>;
 }
 /** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group
  *  can actually emit `null` — no existing caller has a `null` to handle. */

package/dist/components/toggle-group.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
-import { FIELD_INVALID, FloatingField } from "./ui.js";
+import { FIELD_INVALID, FloatingField, Label } from "./ui.js";
 function ToggleGroup(props) {
   const {
     value,
@@ -14,6 +14,7 @@ function ToggleGroup(props) {
     disabled = false,
     size = "md",
     label,
+    labelPlacement = "field",
     hint,
     error,
     "aria-label": ariaLabelAttr,
@@ -21,9 +22,16 @@ function ToggleGroup(props) {
   } = props;
   const labelId = useId();
   const errorId = useId();
-  const field = label !== void 0 && label !== null && label !== false && label !== "";
-  const hasError = field && error !== void 0 && error !== null && error !== false && error !== "";
-  const { allowEmpty: _allowEmpty, onChange: _onChange, ...rest } = restWithMode;
+  const labelled = label !== void 0 && label !== null && label !== false && label !== "";
+  const field = labelled && labelPlacement === "field";
+  const above = labelled && labelPlacement === "above";
+  const hasError = labelled && error !== void 0 && error !== null && error !== false && error !== "";
+  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, ...rest } = restWithMode;
+  const outsideInvalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+  const captionId = useId();
+  const captionIsLive = typeof caption === "function";
+  const captionNode = captionIsLive ? caption(value) : caption;
+  const hasCaption = captionNode !== void 0 && captionNode !== null && captionNode !== false && captionNode !== "";
   const choose = (next) => {
     if (props.allowEmpty) props.onChange(next === value ? null : next);
     else props.onChange(next);
@@ -52,9 +60,9 @@ function ToggleGroup(props) {
       ...rest,
       role: clearable ? "group" : "radiogroup",
       "aria-label": ariaLabelAttr ?? ariaLabel,
-      "aria-labelledby": field && ariaLabelAttr === void 0 && ariaLabel === void 0 ? labelId : rest["aria-labelledby"],
+      "aria-labelledby": labelled && ariaLabelAttr === void 0 && ariaLabel === void 0 ? labelId : rest["aria-labelledby"],
       "aria-invalid": hasError || rest["aria-invalid"] || void 0,
-      "aria-describedby": hasError ? rest["aria-describedby"] ? `${rest["aria-describedby"]} ${errorId}` : errorId : rest["aria-describedby"],
+      "aria-describedby": [rest["aria-describedby"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || void 0,
       "aria-disabled": disabled || void 0,
       className: cn(
         // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
@@ -74,10 +82,12 @@ function ToggleGroup(props) {
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
         disabled && "opacity-60",
+        // The bare group (no chrome to paint) wears the invalid border itself.
+        !field && (outsideInvalid || above && hasError) && FIELD_INVALID,
         // Inside the field's chrome the group is only a row of segments: no border, no
         // surface, no padding of its own, and the field (not the group) is what dims.
         field && "border-0 bg-transparent p-0 shadow-none opacity-100",
-        !field && className
+        !labelled && className
       ),
       children: options.map((opt, index) => {
         const active = opt.value === value;
@@ -135,7 +145,45 @@ function ToggleGroup(props) {
       })
     }
   );
-  if (!field) return group;
+  const captionEl = hasCaption || captionIsLive ? /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: captionId,
+      "aria-live": captionIsLive ? "polite" : void 0,
+      className: cn("text-[11px] leading-snug text-[var(--text-muted)]", hasCaption && "mt-1"),
+      children: hasCaption ? captionNode : null
+    }
+  ) : null;
+  const errorEl = hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: error }) : null;
+  if (above) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative grid min-w-0 gap-1.5", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            id: labelId,
+            disabled,
+            "data-error": hasError || void 0,
+            className: "data-[error=true]:text-[var(--danger)]",
+            children: label
+          }
+        ),
+        hint
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        group,
+        captionEl,
+        errorEl
+      ] })
+    ] });
+  }
+  if (!field) {
+    if (!captionEl) return group;
+    return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      group,
+      captionEl
+    ] });
+  }
   return (
     // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what
     // levels it with a select beside it whatever the browser makes of the select.
@@ -160,7 +208,8 @@ function ToggleGroup(props) {
           )
         }
       ),
-      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: error })
+      captionEl,
+      errorEl
     ] })
   );
 }