@planningcenter/tapestry 4.11.0 → 4.12.0

package/dist/components/link/BaseLink.js

@@ -1,15 +1,27 @@
+import { TooltipTriggerContext } from '../internal/tooltip/TooltipTriggerContext.js';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP, wrapStringWithSpan } from '../../utilities/buttonLinkShared.js';
 import classNames from 'classnames';
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useContext } from 'react';
+import { mergeProps } from 'react-aria/mergeProps';
+import { mergeRefs } from 'react-aria/mergeRefs';
 
-const BaseLink = forwardRef(({ asChild = false, children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
+const BaseLink = forwardRef(({ asChild = false, "aria-describedby": ariaDescribedBy, children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
+    const tooltip = useContext(TooltipTriggerContext);
+    const { "aria-describedby": tooltipId, ...tooltipTriggerProps } = tooltip?.triggerProps ?? {};
+    const mergedProps = tooltip
+        ? mergeProps(restProps, tooltipTriggerProps)
+        : restProps;
+    const mergedRef = tooltip
+        ? mergeRefs(ref, tooltip.ref)
+        : ref;
+    const describedBy = [ariaDescribedBy, tooltipId].filter(Boolean).join(" ") || undefined;
     const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
     const externalProps = external
         ? { rel: "noopener noreferrer", target: "_blank" }
         : {};
     const Comp = asChild ? Slot : "a";
-    return (React__default.createElement(Comp, { ...(!asChild && { href }), className: combinedClassName, ref: ref, ...restProps, ...externalProps },
+    return (React__default.createElement(Comp, { ...(!asChild && { href }), className: combinedClassName, ref: mergedRef, ...mergedProps, "aria-describedby": describedBy, ...externalProps },
         wrapStringWithSpan(prefix),
         React__default.createElement(Slottable, null, label || children),
         wrapStringWithSpan(suffix)));

package/dist/components/link/BaseLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport { Slot, Slottable } from \"@radix-ui/react-slot\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport { Simplify } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\ntype BaseLinkBaseProps = BaseComponentProps &\n  Omit<\n    AnchorHTMLAttributes<HTMLAnchorElement>,\n    keyof BaseComponentProps | \"children\" | \"href\"\n  > & {\n    children?: React.ReactNode\n    external?: boolean\n    kind?: ComponentKind\n    label?: React.ReactNode\n  }\n\nexport type BaseLinkElementProps =\n  | Simplify<\n      BaseLinkBaseProps & {\n        /**\n         * When true, merges the link's styling onto the child element instead\n         * of rendering an `<a>`. Use to wrap a router link (e.g. react-router,\n         * Next.js) or any link-like component. The `external` prop still\n         * applies — it spreads `rel`/`target` onto the child element.\n         */\n        asChild: true\n        href?: never\n      }\n    >\n  | Simplify<BaseLinkBaseProps & { asChild?: false; href: string }>\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n  (\n    {\n      asChild = false,\n      children,\n      className,\n      external = false,\n      fullWidth,\n      href,\n      kind,\n      label,\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseLinkElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const externalProps = external\n      ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n      : {}\n\n    const Comp = asChild ? Slot : \"a\"\n\n    return (\n      <Comp\n        {...(!asChild && { href })}\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        {...externalProps}\n      >\n        {wrapStringWithSpan(prefix)}\n        <Slottable>{label || children}</Slottable>\n        {wrapStringWithSpan(suffix)}\n      </Comp>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;;AAwCO,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;IAED,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;IAEN,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,GAAG;IAEjC,QACEA,6BAAC,IAAI,EAAA,EAAA,IACE,CAAC,OAAO,IAAI,EAAE,IAAI,EAAE,CAAC,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,GACT,aAAa,EAAA;QAEhB,kBAAkB,CAAC,MAAM,CAAC;AAC3B,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,EAAE,KAAK,IAAI,QAAQ,CAAa;AACzC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACtB;AAEX,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport { TooltipTriggerContext } from \"@components/internal/tooltip/TooltipTriggerContext\"\nimport { Slot, Slottable } from \"@radix-ui/react-slot\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport { Simplify } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React, {\n  AnchorHTMLAttributes,\n  forwardRef,\n  RefObject,\n  useContext,\n} from \"react\"\nimport { mergeProps } from \"react-aria/mergeProps\"\nimport { mergeRefs } from \"react-aria/mergeRefs\"\n\ntype BaseLinkBaseProps = BaseComponentProps &\n  Omit<\n    AnchorHTMLAttributes<HTMLAnchorElement>,\n    keyof BaseComponentProps | \"children\" | \"href\"\n  > & {\n    children?: React.ReactNode\n    external?: boolean\n    kind?: ComponentKind\n    label?: React.ReactNode\n  }\n\nexport type BaseLinkElementProps =\n  | Simplify<\n      BaseLinkBaseProps & {\n        /**\n         * When true, merges the link's styling onto the child element instead\n         * of rendering an `<a>`. Use to wrap a router link (e.g. react-router,\n         * Next.js) or any link-like component. The `external` prop still\n         * applies — it spreads `rel`/`target` onto the child element.\n         */\n        asChild: true\n        href?: never\n      }\n    >\n  | Simplify<BaseLinkBaseProps & { asChild?: false; href: string }>\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n  (\n    {\n      asChild = false,\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      external = false,\n      fullWidth,\n      href,\n      kind,\n      label,\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseLinkElementProps,\n    ref\n  ) => {\n    const tooltip = useContext(TooltipTriggerContext)\n    const { \"aria-describedby\": tooltipId, ...tooltipTriggerProps } =\n      tooltip?.triggerProps ?? {}\n\n    const mergedProps = tooltip\n      ? mergeProps(restProps, tooltipTriggerProps)\n      : restProps\n    const mergedRef = tooltip\n      ? mergeRefs<HTMLAnchorElement>(\n          ref,\n          tooltip.ref as RefObject<HTMLAnchorElement>\n        )\n      : ref\n    const describedBy =\n      [ariaDescribedBy, tooltipId].filter(Boolean).join(\" \") || undefined\n\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const externalProps = external\n      ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n      : {}\n\n    const Comp = asChild ? Slot : \"a\"\n\n    return (\n      <Comp\n        {...(!asChild && { href })}\n        className={combinedClassName}\n        ref={mergedRef}\n        {...mergedProps}\n        aria-describedby={describedBy}\n        {...externalProps}\n      >\n        {wrapStringWithSpan(prefix)}\n        <Slottable>{label || children}</Slottable>\n        {wrapStringWithSpan(suffix)}\n      </Comp>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;;;;;MAgDa,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,OAAO,GAAG,KAAK,EACf,kBAAkB,EAAE,eAAe,EACnC,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC;AACjD,IAAA,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,GAC7D,OAAO,EAAE,YAAY,IAAI,EAAE;IAE7B,MAAM,WAAW,GAAG;AAClB,UAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB;UACzC,SAAS;IACb,MAAM,SAAS,GAAG;UACd,SAAS,CACP,GAAG,EACH,OAAO,CAAC,GAAmC;UAE7C,GAAG;AACP,IAAA,MAAM,WAAW,GACf,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;IAErE,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;IAED,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;IAEN,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,GAAG;IAEjC,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,IACE,CAAC,OAAO,IAAI,EAAE,IAAI,EAAE,CAAC,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,SAAS,EAAA,GACV,WAAW,EAAA,kBAAA,EACG,WAAW,EAAA,GACzB,aAAa,EAAA;QAEhB,kBAAkB,CAAC,MAAM,CAAC;AAC3B,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,EAAE,KAAK,IAAI,QAAQ,CAAa;AACzC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACtB;AAEX,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/link/IconLink.d.ts

@@ -1,305 +1,43 @@
 import "../button/btn.css";
+import { type TooltipPlacement } from "../internal/tooltip";
 import React from "react";
 import { BaseLinkElementProps } from "./BaseLink";
-export type IconLinkProps = Omit<Extract<BaseLinkElementProps, {
+type IconLinkSharedProps = Omit<Extract<BaseLinkElementProps, {
     asChild?: false;
 }>, "label" | "children"> & {
-    "aria-label": string;
     /** The icon element to display. */
     icon: React.ReactNode;
 };
+type IconLinkTooltipProps = {
+    /** Accessible label. Required for icon-only links to provide context about the link's purpose. Not required when `tooltip` is set. When both are set, this is the name and the tooltip is visual only. */
+    "aria-label"?: string;
+    /** Text shown on hover and focus. Without `aria-label`, it is also used as the `aria-label`. With `aria-label`, start the `aria-label` with the same text (e.g. tooltip `"Download"`, aria-label `"Download, report.pdf"`). The tooltip itself is hidden from screen readers. Ignores `aria-labelledby`. */
+    tooltip: string;
+};
+type IconLinkAriaLabelProps = {
+    /** Accessible label. Required for icon-only links to provide context about the link's purpose. Not required when `tooltip` is set. When both are set, this is the name and the tooltip is visual only. */
+    "aria-label": string;
+    /** Text shown on hover and focus. Without `aria-label`, it is also used as the `aria-label`. With `aria-label`, start the `aria-label` with the same text (e.g. tooltip `"Download"`, aria-label `"Download, report.pdf"`). The tooltip itself is hidden from screen readers. Ignores `aria-labelledby`. */
+    tooltip?: string;
+};
+/**
+ * An icon-only link needs a name: `aria-label`, `tooltip`, or both.
+ * `IconLinkAriaLabelProps` is declared last so that a missing name
+ * reports "aria-label is missing", not "tooltip is missing".
+ */
+type IconLinkNameProps = IconLinkAriaLabelProps | IconLinkTooltipProps;
+export type IconLinkProps = IconLinkSharedProps & IconLinkNameProps & {
+    /** Where the tooltip renders relative to the link. Default `"bottom"`. Has no effect without `tooltip`. */
+    tooltipPlacement?: TooltipPlacement;
+};
 /**
  * An icon-only link component that renders as an HTML `<a>` element with
- * button-like styling. Requires an `icon` and `aria-label` for accessibility.
+ * button-like styling. Requires an `icon`, and an `aria-label` or `tooltip`
+ * for accessibility.
  *
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/links-icon-link--docs | Storybook Documentation}
  */
-export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
-    fullWidth?: boolean | undefined;
-    kind?: import("../../utilities/buttonLinkShared").ComponentKind | undefined;
-    prefix?: React.ReactNode;
-    size?: import("../../utilities/buttonLinkShared").ComponentSize | undefined;
-    suffix?: React.ReactNode;
-    slot?: string | undefined | undefined;
-    style?: React.CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    className?: string | undefined | undefined;
-    target?: React.HTMLAttributeAnchorTarget | undefined;
-    popover?: "" | "auto" | "manual" | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    type?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    role?: React.AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCapitalize?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
-    onCopy?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-    onCut?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-    onCutCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-    onPaste?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-    onCompositionStart?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-    onFocus?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-    onFocusCapture?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-    onBlur?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-    onBlurCapture?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-    onLoad?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onError?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onErrorCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-    onKeyPress?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-    onKeyUp?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-    onAbort?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onAbortCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onCanPlay?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onDurationChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onEmptied?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onEncrypted?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onEnded?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onEndedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadedData?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadStart?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onPause?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onPauseCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onPlay?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onPlayCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onPlaying?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onPlayingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onProgress?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onProgressCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onRateChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onResize?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onResizeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSeeked?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSeekedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSeeking?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSeekingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onStalled?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onStalledCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSuspend?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSuspendCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onTimeUpdate?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onVolumeChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onWaiting?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onWaitingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onAuxClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onContextMenu?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onDoubleClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onDrag?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragEnd?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragEndCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragEnter?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragEnterCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragExit?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragExitCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragLeave?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragOver?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragOverCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragStart?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDragStartCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDrop?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onDropCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-    onMouseDown?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseLeave?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseMove?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseOut?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseOver?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseUp?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-    onSelect?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onSelectCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-    onTouchCancel?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchEnd?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchMove?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-    onPointerDown?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerMove?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerUp?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerCancel?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerEnter?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerLeave?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerOver?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerOut?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-    onScroll?: React.UIEventHandler<HTMLAnchorElement> | undefined;
-    onScrollCapture?: React.UIEventHandler<HTMLAnchorElement> | undefined;
-    onWheel?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
-    onWheelCapture?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
-    onAnimationStart?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
-    media?: string | undefined | undefined;
-    download?: any;
-    hrefLang?: string | undefined | undefined;
-    ping?: string | undefined | undefined;
-    referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
-    children?: React.ReactNode;
-    external?: boolean | undefined;
-    label?: React.ReactNode;
-    asChild?: false | undefined;
-    href: string;
-}, "label" | "children"> & {
-    "aria-label": string;
-    /** The icon element to display. */
-    icon: React.ReactNode;
-} & React.RefAttributes<HTMLAnchorElement>>;
+export declare const IconLink: React.ForwardRefExoticComponent<IconLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};
 //# sourceMappingURL=IconLink.d.ts.map

package/dist/components/link/IconLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,OAAO,CAAC,oBAAoB,EAAE;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,EAClD,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,YAAY,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAZL,MAAM;IACpB,mCAAmC;UAC7B,KAAK,CAAC,SAAS;2CAwBtB,CAAA"}
+{"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAE7E,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,KAAK,mBAAmB,GAAG,IAAI,CAC7B,OAAO,CAAC,oBAAoB,EAAE;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,EAClD,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,0MAA0M;IAC1M,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4SAA4S;IAC5S,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,0MAA0M;IAC1M,YAAY,EAAE,MAAM,CAAA;IACpB,4SAA4S;IAC5S,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;GAIG;AACH,KAAK,iBAAiB,GAAG,sBAAsB,GAAG,oBAAoB,CAAA;AAEtE,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAC7C,iBAAiB,GAAG;IAClB,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,yFA6CpB,CAAA"}

package/dist/components/link/IconLink.js

@@ -1,16 +1,23 @@
+import { Tooltip } from '../internal/tooltip/Tooltip.js';
 import classNames from 'classnames';
 import React__default, { forwardRef } from 'react';
 import { BaseLink } from './BaseLink.js';
 
 /**
  * An icon-only link component that renders as an HTML `<a>` element with
- * button-like styling. Requires an `icon` and `aria-label` for accessibility.
+ * button-like styling. Requires an `icon`, and an `aria-label` or `tooltip`
+ * for accessibility.
  *
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/links-icon-link--docs | Storybook Documentation}
  */
-const IconLink = forwardRef(({ className, href, icon, ...restProps }, ref) => {
+const IconLink = forwardRef(({ className, href, icon, tooltip, tooltipPlacement = "bottom", ...restProps }, ref) => {
     const iconOnlyClassName = classNames("tds-btn--icononly", className);
+    if (tooltip) {
+        const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...linkProps } = restProps;
+        return (React__default.createElement(Tooltip, { content: tooltip, placement: tooltipPlacement, visualOnly: true },
+            React__default.createElement(BaseLink, { href: href, label: icon, className: iconOnlyClassName, ref: ref, ...linkProps, "aria-label": ariaLabel || tooltip })));
+    }
     return (React__default.createElement(BaseLink, { href: href, label: icon, className: iconOnlyClassName, ref: ref, ...restProps }));
 });
 IconLink.displayName = "IconLink";

package/dist/components/link/IconLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<\n  Extract<BaseLinkElementProps, { asChild?: false }>,\n  \"label\" | \"children\"\n> & {\n  \"aria-label\": string\n  /** The icon element to display. */\n  icon: React.ReactNode\n}\n\n/**\n * An icon-only link component that renders as an HTML `<a>` element with\n * button-like styling. Requires an `icon` and `aria-label` for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/links-icon-link--docs | Storybook Documentation}\n */\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n  ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n    const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n    return (\n      <BaseLink\n        href={href}\n        label={icon}\n        className={iconOnlyClassName}\n        ref={ref}\n        {...restProps}\n      />\n    )\n  }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;AAgBA;;;;;;AAMG;MACU,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport { Tooltip, type TooltipPlacement } from \"@components/internal/tooltip\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\ntype IconLinkSharedProps = Omit<\n  Extract<BaseLinkElementProps, { asChild?: false }>,\n  \"label\" | \"children\"\n> & {\n  /** The icon element to display. */\n  icon: React.ReactNode\n}\n\ntype IconLinkTooltipProps = {\n  /** Accessible label. Required for icon-only links to provide context about the link's purpose. Not required when `tooltip` is set. When both are set, this is the name and the tooltip is visual only. */\n  \"aria-label\"?: string\n  /** Text shown on hover and focus. Without `aria-label`, it is also used as the `aria-label`. With `aria-label`, start the `aria-label` with the same text (e.g. tooltip `\"Download\"`, aria-label `\"Download, report.pdf\"`). The tooltip itself is hidden from screen readers. Ignores `aria-labelledby`. */\n  tooltip: string\n}\n\ntype IconLinkAriaLabelProps = {\n  /** Accessible label. Required for icon-only links to provide context about the link's purpose. Not required when `tooltip` is set. When both are set, this is the name and the tooltip is visual only. */\n  \"aria-label\": string\n  /** Text shown on hover and focus. Without `aria-label`, it is also used as the `aria-label`. With `aria-label`, start the `aria-label` with the same text (e.g. tooltip `\"Download\"`, aria-label `\"Download, report.pdf\"`). The tooltip itself is hidden from screen readers. Ignores `aria-labelledby`. */\n  tooltip?: string\n}\n\n/**\n * An icon-only link needs a name: `aria-label`, `tooltip`, or both.\n * `IconLinkAriaLabelProps` is declared last so that a missing name\n * reports \"aria-label is missing\", not \"tooltip is missing\".\n */\ntype IconLinkNameProps = IconLinkAriaLabelProps | IconLinkTooltipProps\n\nexport type IconLinkProps = IconLinkSharedProps &\n  IconLinkNameProps & {\n    /** Where the tooltip renders relative to the link. Default `\"bottom\"`. Has no effect without `tooltip`. */\n    tooltipPlacement?: TooltipPlacement\n  }\n\n/**\n * An icon-only link component that renders as an HTML `<a>` element with\n * button-like styling. Requires an `icon`, and an `aria-label` or `tooltip`\n * for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/links-icon-link--docs | Storybook Documentation}\n */\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n  (\n    {\n      className,\n      href,\n      icon,\n      tooltip,\n      tooltipPlacement = \"bottom\",\n      ...restProps\n    }: IconLinkProps,\n    ref\n  ) => {\n    const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n    if (tooltip) {\n      const {\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        ...linkProps\n      } = restProps\n\n      return (\n        <Tooltip content={tooltip} placement={tooltipPlacement} visualOnly>\n          <BaseLink\n            href={href}\n            label={icon}\n            className={iconOnlyClassName}\n            ref={ref}\n            {...linkProps}\n            aria-label={ariaLabel || tooltip}\n          />\n        </Tooltip>\n      )\n    }\n\n    return (\n      <BaseLink\n        href={href}\n        label={icon}\n        className={iconOnlyClassName}\n        ref={ref}\n        {...restProps}\n      />\n    )\n  }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;;AA2CA;;;;;;;AAOG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,gBAAgB,GAAG,QAAQ,EAC3B,GAAG,SAAS,EACE,EAChB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,IAAI,OAAO,EAAE;AACX,QAAA,MAAM,EACJ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,SAAS,EACb,GAAG,SAAS;AAEb,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAA,IAAA,EAAA;YAChEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,YAAA,EACD,SAAS,IAAI,OAAO,EAAA,CAChC,CACM;IAEd;IAEA,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/page-header/defineElements.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-B2xqMgNQ.js';
+import '../../packages/tapestry-wc/dist/components/p-CBFtMIxJ.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-page-header-nav.js';
 import { defineTdsScrollToSelectedInUnorderedList } from './tds-scroll-to-selected-in-unordered-list.js';

package/dist/components/pane/Pane.d.ts

@@ -13,7 +13,7 @@ export type PaneElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof PanePr
  * `Flex` or another layout primitive.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 export declare function Pane({ children, className, id, ...restProps }: PaneElementProps): React.JSX.Element;
 export declare namespace Pane {

package/dist/components/pane/Pane.js

@@ -31,7 +31,7 @@ function flattenChildren(children) {
  * `Flex` or another layout primitive.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 function Pane({ children, className, id, ...restProps }) {
     const stableId = useId();

package/dist/components/pane/Pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pane.js","sources":["../../../src/components/pane/Pane.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\nimport { hasRenderableContent, PaneHeader } from \"./PaneHeader\"\n\nexport interface PaneProps {\n  /** `PaneHeader` / `PaneBody` / `PaneFooter`. */\n  children: React.ReactNode\n}\n\nexport type PaneElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneProps\n> &\n  PaneProps\n\n/**\n * Flattens Fragments so a `PaneHeader` can be found regardless of whether\n * children arrive as direct JSX children or as a single Fragment value (as\n * happens when `children` is passed via props, e.g. Storybook args or\n * `tapestry-render`).\n */\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = []\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      const fragmentProps = child.props as { children?: React.ReactNode }\n      result.push(...flattenChildren(fragmentProps.children))\n    } else {\n      result.push(child)\n    }\n  })\n\n  return result\n}\n\n/**\n * A decorative, static surface — a card-toned container with rounded corners\n * used to visually group related content. Renders a fixed anatomy: an\n * optional `PaneHeader`, a `PaneBody`, and an optional `PaneFooter`. Pane does\n * not manage layout — arrange Panes on a page, and content within one, with\n * `Flex` or another layout primitive.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function Pane({\n  children,\n  className,\n  id,\n  ...restProps\n}: PaneElementProps) {\n  const stableId = useId()\n  const paneId = id || `tds-pane-${stableId}`\n  const titleId = `${paneId}-title`\n  const combinedClassName = classNames(\"tds-pane\", className)\n\n  const paneHeader = flattenChildren(children).find(\n    (child): child is React.ReactElement<{ title?: React.ReactNode }> =>\n      React.isValidElement(child) && child.type === PaneHeader\n  )\n  const hasTitle = hasRenderableContent(paneHeader?.props.title)\n\n  return (\n    <div\n      {...restProps}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      className={combinedClassName}\n      id={paneId}\n      role={hasTitle ? \"region\" : undefined}\n    >\n      <PaneContext.Provider value={{ paneId, titleId }}>\n        {children}\n      </PaneContext.Provider>\n    </div>\n  )\n}\n\nPane.displayName = \"Pane\"\n"],"names":["React"],"mappings":";;;;;;AAoBA;;;;;AAKG;AACH,SAAS,eAAe,CAAC,QAAyB,EAAA;IAChD,MAAM,MAAM,GAAsB,EAAE;IAEpCA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACzC,QAAA,IAAIA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKA,cAAK,CAAC,QAAQ,EAAE;AAChE,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAuC;YACnE,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD;aAAO;AACL,YAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACpB;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAM;AACf;AAEA;;;;;;;;;AASG;AACG,SAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,SAAS,EACK,EAAA;AACjB,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,MAAM,GAAG,EAAE,IAAI,CAAA,SAAA,EAAY,QAAQ,EAAE;AAC3C,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;IACjC,MAAM,iBAAiB,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC;IAE3D,MAAM,UAAU,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,KACJA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC3D;IACD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC;AAE9D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,SAAS,EAAA,iBAAA,EACI,QAAQ,GAAG,OAAO,GAAG,SAAS,EAC/C,SAAS,EAAE,iBAAiB,EAC5B,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAA;AAErC,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAA,EAC7C,QAAQ,CACY,CACnB;AAEV;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Pane.js","sources":["../../../src/components/pane/Pane.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\nimport { hasRenderableContent, PaneHeader } from \"./PaneHeader\"\n\nexport interface PaneProps {\n  /** `PaneHeader` / `PaneBody` / `PaneFooter`. */\n  children: React.ReactNode\n}\n\nexport type PaneElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneProps\n> &\n  PaneProps\n\n/**\n * Flattens Fragments so a `PaneHeader` can be found regardless of whether\n * children arrive as direct JSX children or as a single Fragment value (as\n * happens when `children` is passed via props, e.g. Storybook args or\n * `tapestry-render`).\n */\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = []\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      const fragmentProps = child.props as { children?: React.ReactNode }\n      result.push(...flattenChildren(fragmentProps.children))\n    } else {\n      result.push(child)\n    }\n  })\n\n  return result\n}\n\n/**\n * A decorative, static surface — a card-toned container with rounded corners\n * used to visually group related content. Renders a fixed anatomy: an\n * optional `PaneHeader`, a `PaneBody`, and an optional `PaneFooter`. Pane does\n * not manage layout — arrange Panes on a page, and content within one, with\n * `Flex` or another layout primitive.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function Pane({\n  children,\n  className,\n  id,\n  ...restProps\n}: PaneElementProps) {\n  const stableId = useId()\n  const paneId = id || `tds-pane-${stableId}`\n  const titleId = `${paneId}-title`\n  const combinedClassName = classNames(\"tds-pane\", className)\n\n  const paneHeader = flattenChildren(children).find(\n    (child): child is React.ReactElement<{ title?: React.ReactNode }> =>\n      React.isValidElement(child) && child.type === PaneHeader\n  )\n  const hasTitle = hasRenderableContent(paneHeader?.props.title)\n\n  return (\n    <div\n      {...restProps}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      className={combinedClassName}\n      id={paneId}\n      role={hasTitle ? \"region\" : undefined}\n    >\n      <PaneContext.Provider value={{ paneId, titleId }}>\n        {children}\n      </PaneContext.Provider>\n    </div>\n  )\n}\n\nPane.displayName = \"Pane\"\n"],"names":["React"],"mappings":";;;;;;AAoBA;;;;;AAKG;AACH,SAAS,eAAe,CAAC,QAAyB,EAAA;IAChD,MAAM,MAAM,GAAsB,EAAE;IAEpCA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACzC,QAAA,IAAIA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKA,cAAK,CAAC,QAAQ,EAAE;AAChE,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAuC;YACnE,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD;aAAO;AACL,YAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACpB;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAM;AACf;AAEA;;;;;;;;;AASG;AACG,SAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,SAAS,EACK,EAAA;AACjB,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,MAAM,GAAG,EAAE,IAAI,CAAA,SAAA,EAAY,QAAQ,EAAE;AAC3C,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;IACjC,MAAM,iBAAiB,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC;IAE3D,MAAM,UAAU,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,KACJA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC3D;IACD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC;AAE9D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,SAAS,EAAA,iBAAA,EACI,QAAQ,GAAG,OAAO,GAAG,SAAS,EAC/C,SAAS,EAAE,iBAAiB,EAC5B,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAA;AAErC,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAA,EAC7C,QAAQ,CACY,CACnB;AAEV;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/pane/PaneBody.d.ts

@@ -9,7 +9,7 @@ export type PaneBodyElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Pa
  * The body region of a `Pane` — holds arbitrary content.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 export declare function PaneBody({ children, className, ...restProps }: PaneBodyElementProps): React.JSX.Element;
 export declare namespace PaneBody {

package/dist/components/pane/PaneBody.js

@@ -5,7 +5,7 @@ import React__default from 'react';
  * The body region of a `Pane` — holds arbitrary content.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 function PaneBody({ children, className, ...restProps }) {
     const combinedClassName = classNames("tds-pane-body", className);

package/dist/components/pane/PaneBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneBody.js","sources":["../../../src/components/pane/PaneBody.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport interface PaneBodyProps {\n  /** Arbitrary content; may include a `PaneDivider` between sub-sections. */\n  children: React.ReactNode\n}\n\nexport type PaneBodyElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneBodyProps\n> &\n  PaneBodyProps\n\n/**\n * The body region of a `Pane` — holds arbitrary content.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneBody({\n  children,\n  className,\n  ...restProps\n}: PaneBodyElementProps) {\n  const combinedClassName = classNames(\"tds-pane-body\", className)\n\n  return (\n    <div {...restProps} className={combinedClassName}>\n      {children}\n    </div>\n  )\n}\n\nPaneBody.displayName = \"PaneBody\"\n"],"names":["React"],"mappings":";;;AAgBA;;;;;AAKG;AACG,SAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACS,EAAA;IACrB,MAAM,iBAAiB,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC;IAEhE,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAA,EAC7C,QAAQ,CACL;AAEV;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"PaneBody.js","sources":["../../../src/components/pane/PaneBody.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport interface PaneBodyProps {\n  /** Arbitrary content; may include a `PaneDivider` between sub-sections. */\n  children: React.ReactNode\n}\n\nexport type PaneBodyElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneBodyProps\n> &\n  PaneBodyProps\n\n/**\n * The body region of a `Pane` — holds arbitrary content.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function PaneBody({\n  children,\n  className,\n  ...restProps\n}: PaneBodyElementProps) {\n  const combinedClassName = classNames(\"tds-pane-body\", className)\n\n  return (\n    <div {...restProps} className={combinedClassName}>\n      {children}\n    </div>\n  )\n}\n\nPaneBody.displayName = \"PaneBody\"\n"],"names":["React"],"mappings":";;;AAgBA;;;;;AAKG;AACG,SAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACS,EAAA;IACrB,MAAM,iBAAiB,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC;IAEhE,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAA,EAC7C,QAAQ,CACL;AAEV;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/pane/PaneDivider.d.ts

@@ -1,13 +1,16 @@
 import "./index.css";
 import React, { type HTMLAttributes } from "react";
-export type PaneDividerElementProps = HTMLAttributes<HTMLHRElement>;
+export type PaneDividerElementProps = HTMLAttributes<HTMLHRElement> & {
+    /** Keeps the rule inside `PaneBody`'s padding instead of bleeding to the Pane's edges. */
+    inset?: boolean;
+};
 /**
  * A 1px rule between sub-sections inside a `PaneBody`.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
-export declare function PaneDivider({ className, ...restProps }: PaneDividerElementProps): React.JSX.Element;
+export declare function PaneDivider({ className, inset, ...restProps }: PaneDividerElementProps): React.JSX.Element;
 export declare namespace PaneDivider {
     var displayName: string;
 }

package/dist/components/pane/PaneDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaneDivider.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEnE;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAIzB;yBAPe,WAAW"}
+{"version":3,"file":"PaneDivider.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAa,EACb,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAQzB;yBAZe,WAAW"}

package/dist/components/pane/PaneDivider.js

@@ -5,10 +5,10 @@ import React__default from 'react';
  * A 1px rule between sub-sections inside a `PaneBody`.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
-function PaneDivider({ className, ...restProps }) {
-    const combinedClassName = classNames("tds-pane-divider", className);
+function PaneDivider({ className, inset = false, ...restProps }) {
+    const combinedClassName = classNames("tds-pane-divider", { "tds-pane-divider--inset": inset }, className);
     return React__default.createElement("hr", { ...restProps, className: combinedClassName });
 }
 PaneDivider.displayName = "PaneDivider";

package/dist/components/pane/PaneDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneDivider.js","sources":["../../../src/components/pane/PaneDivider.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport type PaneDividerElementProps = HTMLAttributes<HTMLHRElement>\n\n/**\n * A 1px rule between sub-sections inside a `PaneBody`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneDivider({\n  className,\n  ...restProps\n}: PaneDividerElementProps) {\n  const combinedClassName = classNames(\"tds-pane-divider\", className)\n\n  return <hr {...restProps} className={combinedClassName} />\n}\n\nPaneDivider.displayName = \"PaneDivider\"\n"],"names":["React"],"mappings":";;;AAOA;;;;;AAKG;AACG,SAAU,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,SAAS,EACY,EAAA;IACxB,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;AAEnE,IAAA,OAAOA,wCAAQ,SAAS,EAAE,SAAS,EAAE,iBAAiB,GAAI;AAC5D;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"PaneDivider.js","sources":["../../../src/components/pane/PaneDivider.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport type PaneDividerElementProps = HTMLAttributes<HTMLHRElement> & {\n  /** Keeps the rule inside `PaneBody`'s padding instead of bleeding to the Pane's edges. */\n  inset?: boolean\n}\n\n/**\n * A 1px rule between sub-sections inside a `PaneBody`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function PaneDivider({\n  className,\n  inset = false,\n  ...restProps\n}: PaneDividerElementProps) {\n  const combinedClassName = classNames(\n    \"tds-pane-divider\",\n    { \"tds-pane-divider--inset\": inset },\n    className\n  )\n\n  return <hr {...restProps} className={combinedClassName} />\n}\n\nPaneDivider.displayName = \"PaneDivider\"\n"],"names":["React"],"mappings":";;;AAUA;;;;;AAKG;AACG,SAAU,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,KAAK,EACb,GAAG,SAAS,EACY,EAAA;AACxB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,kBAAkB,EAClB,EAAE,yBAAyB,EAAE,KAAK,EAAE,EACpC,SAAS,CACV;AAED,IAAA,OAAOA,wCAAQ,SAAS,EAAE,SAAS,EAAE,iBAAiB,GAAI;AAC5D;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/pane/PaneFooter.d.ts

@@ -18,7 +18,7 @@ export type PaneFooterElementProps = DistributiveOmit<FlexProps, "as"> & PaneFoo
  * controls spacing and alignment without reaching for a wrapper element.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 export declare function PaneFooter({ children, className, ...restProps }: PaneFooterElementProps): React.JSX.Element;
 export declare namespace PaneFooter {

package/dist/components/pane/PaneFooter.js

@@ -8,7 +8,7 @@ import React__default from 'react';
  * controls spacing and alignment without reaching for a wrapper element.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 function PaneFooter({ children, className, ...restProps }) {
     const combinedClassName = classNames("tds-pane-footer", className);