npm - @planningcenter/tapestry - Versions diffs - 4.12.0-rc.0 → 4.12.0 - Mend

@planningcenter/tapestry 4.12.0-rc.0 → 4.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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/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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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/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 CHANGED Viewed

@@ -8,7 +8,7 @@ export type PaneDividerElementProps = HTMLAttributes<HTMLHRElement> & {
  * 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, inset, ...restProps }: PaneDividerElementProps): React.JSX.Element;
 export declare namespace PaneDivider {

package/dist/components/pane/PaneDivider.js CHANGED Viewed

@@ -5,7 +5,7 @@ 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, inset = false, ...restProps }) {
     const combinedClassName = classNames("tds-pane-divider", { "tds-pane-divider--inset": inset }, className);

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

	@@ -1 +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 /** 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/~~unstable~~-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;;;;"}
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 /** 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);

package/dist/components/pane/PaneFooter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaneFooter.js","sources":["../../../src/components/pane/PaneFooter.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport type { DistributiveOmit } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneFooterProps {\n /*\n Action buttons only — per Figma guidance, a footer should be avoided\n * outside the documented exceptions (top-down flows like forms/wizards, or\n * when a primary action can't live in the header). Laid out in a row; pass\n * any `Flex` prop to adjust the layout.\n /\n children: React.ReactNode\n}\n\nexport type PaneFooterElementProps = DistributiveOmit<FlexProps, \"as\"> &\n PaneFooterProps\n\n/\n The footer region of a `Pane`, intended for action buttons. Lays its\n * children out in a `Flex` row and accepts every `Flex` prop, so the caller\n * controls spacing and alignment without reaching for a wrapper element.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/~~unstable~~-pane--docs \| Storybook Documentation}\n */\nexport function PaneFooter({\n children,\n className,\n ...restProps\n}: PaneFooterElementProps) {\n const combinedClassName = classNames(\"tds-pane-footer\", className)\n\n return (\n <Flex\n align=\"center\"\n direction=\"row\"\n gap={2}\n justify=\"end\"\n {...restProps}\n as=\"footer\"\n className={combinedClassName}\n role=\"group\"\n >\n {children}\n </Flex>\n )\n}\n\nPaneFooter.displayName = \"PaneFooter\"\n"],"names":["React"],"mappings":";;;;AAoBA;;;;;;;AAOG;AACG,SAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACW,EAAA;IACvB,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAElE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,KAAK,EAAA,GACT,SAAS,EACb,EAAE,EAAC,QAAQ,EACX,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,IAEX,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"PaneFooter.js","sources":["../../../src/components/pane/PaneFooter.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport type { DistributiveOmit } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneFooterProps {\n /*\n Action buttons only — per Figma guidance, a footer should be avoided\n * outside the documented exceptions (top-down flows like forms/wizards, or\n * when a primary action can't live in the header). Laid out in a row; pass\n * any `Flex` prop to adjust the layout.\n /\n children: React.ReactNode\n}\n\nexport type PaneFooterElementProps = DistributiveOmit<FlexProps, \"as\"> &\n PaneFooterProps\n\n/\n The footer region of a `Pane`, intended for action buttons. Lays its\n * children out in a `Flex` row and accepts every `Flex` prop, so the caller\n * controls spacing and alignment without reaching for a wrapper element.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs \| Storybook Documentation}\n */\nexport function PaneFooter({\n children,\n className,\n ...restProps\n}: PaneFooterElementProps) {\n const combinedClassName = classNames(\"tds-pane-footer\", className)\n\n return (\n <Flex\n align=\"center\"\n direction=\"row\"\n gap={2}\n justify=\"end\"\n {...restProps}\n as=\"footer\"\n className={combinedClassName}\n role=\"group\"\n >\n {children}\n </Flex>\n )\n}\n\nPaneFooter.displayName = \"PaneFooter\"\n"],"names":["React"],"mappings":";;;;AAoBA;;;;;;;AAOG;AACG,SAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACW,EAAA;IACvB,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAElE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,KAAK,EAAA,GACT,SAAS,EACb,EAAE,EAAC,QAAQ,EACX,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,IAEX,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/pane/PaneHeader.d.ts CHANGED Viewed

@@ -41,7 +41,7 @@ export declare function hasRenderableContent(content: React.ReactNode): boolean;
  * `Pane`.
  *
  * @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 PaneHeader({ children, className, helpContent, level, title, ...restProps }: PaneHeaderElementProps): React.JSX.Element;
 export declare namespace PaneHeader {

package/dist/components/pane/PaneHeader.js CHANGED Viewed

@@ -23,7 +23,7 @@ function hasRenderableContent(content) {
  * `Pane`.
  *
  * @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 PaneHeader({ children, className, helpContent, level = 2, title, ...restProps }) {
     const { paneId, titleId } = useContext(PaneContext) ?? {};

package/dist/components/pane/PaneHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaneHeader.js","sources":["../../../src/components/pane/PaneHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex } from \"@components/flex\"\nimport { HelperShelf } from \"@components/internal/helper-shelf\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\n\nexport type PaneHeaderLevel = 2 \| 3\n\nexport interface PaneHeaderProps {\n /*\n Trailing header content, rendered after the title — typically a\n * `PaneHeaderActions` wrapping the buttons that affect the whole pane.\n /\n children?: React.ReactNode\n /\n Content for the collapsible helper shelf. When set, the header renders a\n * \"More info\" trigger after the title and the shelf beneath it. The shelf\n * starts closed.\n /\n helpContent?: React.ReactNode\n /\n Controls which heading element renders (`h2` or `h3`) so the title fits\n * the document outline wherever the Pane is nested. Visual style stays\n * constant at every level. Defaults to `2`; override to `3` when nesting a\n * Pane one level deeper in the heading outline.\n /\n level?: PaneHeaderLevel\n /\n The pane's title. Optional only in the documented exception — e.g. a\n * wizard step whose title already lives in a Stepper component.\n /\n title?: React.ReactNode\n}\n\nexport type PaneHeaderElementProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n keyof PaneHeaderProps\n> &\n PaneHeaderProps\n\n/\n Whether `content` produces visible output — skips `undefined`, `null`, `\"\"`,\n * and booleans (e.g. `isEditing && \"Edit settings\"`). Used for both `title`\n * and `helpContent`, and shared with `Pane` so the root's `role=\"region\"` /\n * `aria-labelledby` stays in sync with whether the heading actually renders.\n /\nexport function hasRenderableContent(content: React.ReactNode): boolean {\n return (\n content !== undefined &&\n content !== null &&\n content !== \"\" &&\n typeof content !== \"boolean\"\n )\n}\n\n/\n The header region of a `Pane` — renders the title, an optional help trigger\n * and shelf (`helpContent`), then any children, which should be a\n * `PaneHeaderActions` when the pane has actions. Must be rendered inside a\n * `Pane`.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/~~unstable~~-pane--docs \| Storybook Documentation}\n */\nexport function PaneHeader({\n children,\n className,\n helpContent,\n level = 2,\n title,\n ...restProps\n}: PaneHeaderElementProps) {\n const { paneId, titleId } = useContext(PaneContext) ?? {}\n const combinedClassName = classNames(\"tds-pane-header\", className)\n const Heading = `h${level}` as \"h2\" \| \"h3\"\n const hasTitle = hasRenderableContent(title)\n const hasHelpContent = hasRenderableContent(helpContent)\n\n return (\n <Flex\n as=\"header\"\n align=\"center\"\n gap={2}\n justify=\"space-between\"\n direction=\"row\"\n wrap=\"wrap\"\n {...restProps}\n className={combinedClassName}\n role=\"group\"\n >\n {hasTitle && (\n <Heading className=\"tds-pane-title\" id={titleId}>\n {title}\n </Heading>\n )}\n {hasHelpContent && (\n <HelperShelf\n id={paneId && `${paneId}-help`}\n labelledById={hasTitle ? titleId : undefined}\n >\n {helpContent}\n </HelperShelf>\n )}\n {children}\n </Flex>\n )\n}\n\nPaneHeader.displayName = \"PaneHeader\"\n"],"names":["React"],"mappings":";;;;;;AA2CA;;;;;AAKG;AACG,SAAU,oBAAoB,CAAC,OAAwB,EAAA;IAC3D,QACE,OAAO,KAAK,SAAS;AACrB,QAAA,OAAO,KAAK,IAAI;AAChB,QAAA,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,OAAO,KAAK,SAAS;AAEhC;AAEA;;;;;;;;AAQG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,GAAG,CAAC,EACT,KAAK,EACL,GAAG,SAAS,EACW,EAAA;AACvB,IAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;IACzD,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,KAAK,EAAiB;AAC1C,IAAA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,WAAW,CAAC;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,MAAM,EAAA,GACP,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,OAAO,EAAA,EAC5C,KAAK,CACE,CACX;QACA,cAAc,KACbA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,MAAM,IAAI,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,EAC9B,YAAY,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAA,EAE3C,WAAW,CACA,CACf;QACA,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"PaneHeader.js","sources":["../../../src/components/pane/PaneHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex } from \"@components/flex\"\nimport { HelperShelf } from \"@components/internal/helper-shelf\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\n\nexport type PaneHeaderLevel = 2 \| 3\n\nexport interface PaneHeaderProps {\n /*\n Trailing header content, rendered after the title — typically a\n * `PaneHeaderActions` wrapping the buttons that affect the whole pane.\n /\n children?: React.ReactNode\n /\n Content for the collapsible helper shelf. When set, the header renders a\n * \"More info\" trigger after the title and the shelf beneath it. The shelf\n * starts closed.\n /\n helpContent?: React.ReactNode\n /\n Controls which heading element renders (`h2` or `h3`) so the title fits\n * the document outline wherever the Pane is nested. Visual style stays\n * constant at every level. Defaults to `2`; override to `3` when nesting a\n * Pane one level deeper in the heading outline.\n /\n level?: PaneHeaderLevel\n /\n The pane's title. Optional only in the documented exception — e.g. a\n * wizard step whose title already lives in a Stepper component.\n /\n title?: React.ReactNode\n}\n\nexport type PaneHeaderElementProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n keyof PaneHeaderProps\n> &\n PaneHeaderProps\n\n/\n Whether `content` produces visible output — skips `undefined`, `null`, `\"\"`,\n * and booleans (e.g. `isEditing && \"Edit settings\"`). Used for both `title`\n * and `helpContent`, and shared with `Pane` so the root's `role=\"region\"` /\n * `aria-labelledby` stays in sync with whether the heading actually renders.\n /\nexport function hasRenderableContent(content: React.ReactNode): boolean {\n return (\n content !== undefined &&\n content !== null &&\n content !== \"\" &&\n typeof content !== \"boolean\"\n )\n}\n\n/\n The header region of a `Pane` — renders the title, an optional help trigger\n * and shelf (`helpContent`), then any children, which should be a\n * `PaneHeaderActions` when the pane has actions. Must be rendered inside a\n * `Pane`.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs \| Storybook Documentation}\n */\nexport function PaneHeader({\n children,\n className,\n helpContent,\n level = 2,\n title,\n ...restProps\n}: PaneHeaderElementProps) {\n const { paneId, titleId } = useContext(PaneContext) ?? {}\n const combinedClassName = classNames(\"tds-pane-header\", className)\n const Heading = `h${level}` as \"h2\" \| \"h3\"\n const hasTitle = hasRenderableContent(title)\n const hasHelpContent = hasRenderableContent(helpContent)\n\n return (\n <Flex\n as=\"header\"\n align=\"center\"\n gap={2}\n justify=\"space-between\"\n direction=\"row\"\n wrap=\"wrap\"\n {...restProps}\n className={combinedClassName}\n role=\"group\"\n >\n {hasTitle && (\n <Heading className=\"tds-pane-title\" id={titleId}>\n {title}\n </Heading>\n )}\n {hasHelpContent && (\n <HelperShelf\n id={paneId && `${paneId}-help`}\n labelledById={hasTitle ? titleId : undefined}\n >\n {helpContent}\n </HelperShelf>\n )}\n {children}\n </Flex>\n )\n}\n\nPaneHeader.displayName = \"PaneHeader\"\n"],"names":["React"],"mappings":";;;;;;AA2CA;;;;;AAKG;AACG,SAAU,oBAAoB,CAAC,OAAwB,EAAA;IAC3D,QACE,OAAO,KAAK,SAAS;AACrB,QAAA,OAAO,KAAK,IAAI;AAChB,QAAA,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,OAAO,KAAK,SAAS;AAEhC;AAEA;;;;;;;;AAQG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,GAAG,CAAC,EACT,KAAK,EACL,GAAG,SAAS,EACW,EAAA;AACvB,IAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;IACzD,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,KAAK,EAAiB;AAC1C,IAAA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,WAAW,CAAC;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,MAAM,EAAA,GACP,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,OAAO,EAAA,EAC5C,KAAK,CACE,CACX;QACA,cAAc,KACbA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,MAAM,IAAI,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,EAC9B,YAAY,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAA,EAE3C,WAAW,CACA,CACf;QACA,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/pane/PaneHeaderActions.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export type PaneHeaderActionsElementProps = FlexProps & PaneHeaderActionsProps;
  * 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 PaneHeaderActions({ children, className, ...restProps }: PaneHeaderActionsElementProps): React.JSX.Element;
 export declare namespace PaneHeaderActions {

package/dist/components/pane/PaneHeaderActions.js CHANGED Viewed

@@ -8,7 +8,7 @@ import React__default from 'react';
  * 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 PaneHeaderActions({ children, className, ...restProps }) {
     const combinedClassName = classNames("tds-pane-header-actions", className);