@planningcenter/tapestry 4.2.0-rc.1 → 4.2.0-rc.11

package/dist/components/button/ToggleButton.d.ts

@@ -0,0 +1,52 @@
+import "./btn.css";
+import React from "react";
+import { BaseButtonElementProps } from "./BaseButton";
+type ToggleButtonControlledProps = {
+    /** Not available when `pressed` is provided. */
+    defaultPressed?: never;
+    /** Whether the button is pressed. Maps to `aria-pressed`. */
+    pressed: boolean;
+};
+type ToggleButtonUncontrolledProps = {
+    /** Initial pressed state. Defaults to `false` if omitted. */
+    defaultPressed?: boolean;
+    /** Omit to let the button manage its own pressed state. */
+    pressed?: never;
+};
+export type ToggleButtonProps = (ToggleButtonControlledProps | ToggleButtonUncontrolledProps) & {
+    /** Called with the next pressed state after each click. */
+    onChange?: (pressed: boolean) => void;
+};
+export declare function toggleButtonProps({ pressed }: {
+    pressed: boolean;
+}): {
+    "aria-pressed": boolean;
+};
+/**
+ * Resolves `pressed`/`defaultPressed`/`onChange` into a current
+ * pressed value and a click handler, whether the caller controls `pressed`
+ * or leaves the button to manage it. Always returns a real boolean — a
+ * toggle button must always announce `aria-pressed`, even with no props at
+ * all — starting from `defaultPressed` (or `false`) when uncontrolled.
+ */
+export declare function usePressedState({ defaultPressed, onChange, pressed, }: {
+    defaultPressed?: boolean;
+    onChange?: (pressed: boolean) => void;
+    pressed?: boolean;
+}): [boolean, () => void];
+/**
+ * A button that stays either "on" or "off" after each click — Mute,
+ * Bookmark, a filter chip — rather than firing a one-time action. Maps
+ * `pressed` to the native `aria-pressed` attribute, always present since a
+ * toggle button must announce that state. Manages its own pressed state,
+ * starting from `false`, when `pressed` is omitted — pass `defaultPressed`
+ * and/or `onChange` to seed or observe that uncontrolled state.
+ * Carries no default `kind` or CSS; `kind`/`className` stay exactly as
+ * caller-controlled as they are on plain `Button`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-button--docs | Storybook Documentation}
+ */
+export declare const ToggleButton: React.ForwardRefExoticComponent<(Omit<BaseButtonElementProps, "onChange"> & ToggleButtonProps) & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/components/button/ToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,KAAK,2BAA2B,GAAG;IACjC,gDAAgD;IAChD,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,KAAK,6BAA6B,GAAG;IACnC,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC5B,2BAA2B,GAC3B,6BAA6B,CAChC,GAAG;IACF,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE;;EAElE;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAmBxB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,0IAkCxB,CAAA"}

package/dist/components/button/ToggleButton.js

@@ -0,0 +1,56 @@
+import React__default, { forwardRef, useState } from 'react';
+import { BaseButton } from './BaseButton.js';
+
+function toggleButtonProps({ pressed }) {
+    return { "aria-pressed": pressed };
+}
+/**
+ * Resolves `pressed`/`defaultPressed`/`onChange` into a current
+ * pressed value and a click handler, whether the caller controls `pressed`
+ * or leaves the button to manage it. Always returns a real boolean — a
+ * toggle button must always announce `aria-pressed`, even with no props at
+ * all — starting from `defaultPressed` (or `false`) when uncontrolled.
+ */
+function usePressedState({ defaultPressed, onChange, pressed, }) {
+    const [uncontrolledPressed, setUncontrolledPressed] = useState(defaultPressed ?? false);
+    const isControlled = pressed !== undefined;
+    if (isControlled) {
+        const toggleControlledPressed = () => onChange?.(!pressed);
+        return [pressed, toggleControlledPressed];
+    }
+    const toggleUncontrolledPressed = () => {
+        const nextPressed = !uncontrolledPressed;
+        setUncontrolledPressed(nextPressed);
+        onChange?.(nextPressed);
+    };
+    return [uncontrolledPressed, toggleUncontrolledPressed];
+}
+/**
+ * A button that stays either "on" or "off" after each click — Mute,
+ * Bookmark, a filter chip — rather than firing a one-time action. Maps
+ * `pressed` to the native `aria-pressed` attribute, always present since a
+ * toggle button must announce that state. Manages its own pressed state,
+ * starting from `false`, when `pressed` is omitted — pass `defaultPressed`
+ * and/or `onChange` to seed or observe that uncontrolled state.
+ * Carries no default `kind` or CSS; `kind`/`className` stay exactly as
+ * caller-controlled as they are on plain `Button`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-button--docs | Storybook Documentation}
+ */
+const ToggleButton = forwardRef(({ defaultPressed, onClick, onChange, pressed, ...restProps }, ref) => {
+    const [currentPressed, togglePressed] = usePressedState({
+        defaultPressed,
+        onChange,
+        pressed,
+    });
+    const handleClick = (event) => {
+        togglePressed();
+        onClick?.(event);
+    };
+    return (React__default.createElement(BaseButton, { ref: ref, ...restProps, onClick: handleClick, ...toggleButtonProps({ pressed: currentPressed }) }));
+});
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton, toggleButtonProps, usePressedState };
+//# sourceMappingURL=ToggleButton.js.map

package/dist/components/button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef, useState } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\ntype ToggleButtonControlledProps = {\n  /** Not available when `pressed` is provided. */\n  defaultPressed?: never\n  /** Whether the button is pressed. Maps to `aria-pressed`. */\n  pressed: boolean\n}\n\ntype ToggleButtonUncontrolledProps = {\n  /** Initial pressed state. Defaults to `false` if omitted. */\n  defaultPressed?: boolean\n  /** Omit to let the button manage its own pressed state. */\n  pressed?: never\n}\n\nexport type ToggleButtonProps = (\n  | ToggleButtonControlledProps\n  | ToggleButtonUncontrolledProps\n) & {\n  /** Called with the next pressed state after each click. */\n  onChange?: (pressed: boolean) => void\n}\n\nexport function toggleButtonProps({ pressed }: { pressed: boolean }) {\n  return { \"aria-pressed\": pressed }\n}\n\n/**\n * Resolves `pressed`/`defaultPressed`/`onChange` into a current\n * pressed value and a click handler, whether the caller controls `pressed`\n * or leaves the button to manage it. Always returns a real boolean — a\n * toggle button must always announce `aria-pressed`, even with no props at\n * all — starting from `defaultPressed` (or `false`) when uncontrolled.\n */\nexport function usePressedState({\n  defaultPressed,\n  onChange,\n  pressed,\n}: {\n  defaultPressed?: boolean\n  onChange?: (pressed: boolean) => void\n  pressed?: boolean\n}): [boolean, () => void] {\n  const [uncontrolledPressed, setUncontrolledPressed] = useState(\n    defaultPressed ?? false\n  )\n\n  const isControlled = pressed !== undefined\n\n  if (isControlled) {\n    const toggleControlledPressed = () => onChange?.(!pressed)\n    return [pressed, toggleControlledPressed]\n  }\n\n  const toggleUncontrolledPressed = () => {\n    const nextPressed = !uncontrolledPressed\n    setUncontrolledPressed(nextPressed)\n    onChange?.(nextPressed)\n  }\n\n  return [uncontrolledPressed, toggleUncontrolledPressed]\n}\n\n/**\n * A button that stays either \"on\" or \"off\" after each click — Mute,\n * Bookmark, a filter chip — rather than firing a one-time action. Maps\n * `pressed` to the native `aria-pressed` attribute, always present since a\n * toggle button must announce that state. Manages its own pressed state,\n * starting from `false`, when `pressed` is omitted — pass `defaultPressed`\n * and/or `onChange` to seed or observe that uncontrolled state.\n * Carries no default `kind` or CSS; `kind`/`className` stay exactly as\n * caller-controlled as they are on plain `Button`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-button--docs | Storybook Documentation}\n */\nexport const ToggleButton = forwardRef<\n  HTMLButtonElement,\n  Omit<BaseButtonElementProps, \"onChange\"> & ToggleButtonProps\n>(\n  (\n    {\n      defaultPressed,\n      onClick,\n      onChange,\n      pressed,\n      ...restProps\n    }: Omit<BaseButtonElementProps, \"onChange\"> & ToggleButtonProps,\n    ref\n  ) => {\n    const [currentPressed, togglePressed] = usePressedState({\n      defaultPressed,\n      onChange,\n      pressed,\n    })\n\n    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n      togglePressed()\n      onClick?.(event)\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        {...restProps}\n        onClick={handleClick}\n        {...toggleButtonProps({ pressed: currentPressed })}\n      />\n    )\n  }\n)\n\nToggleButton.displayName = \"ToggleButton\"\n"],"names":["React"],"mappings":";;;AA4BM,SAAU,iBAAiB,CAAC,EAAE,OAAO,EAAwB,EAAA;AACjE,IAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE;AACpC;AAEA;;;;;;AAMG;AACG,SAAU,eAAe,CAAC,EAC9B,cAAc,EACd,QAAQ,EACR,OAAO,GAKR,EAAA;AACC,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,cAAc,IAAI,KAAK,CACxB;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,KAAK,SAAS;IAE1C,IAAI,YAAY,EAAE;QAChB,MAAM,uBAAuB,GAAG,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC1D,QAAA,OAAO,CAAC,OAAO,EAAE,uBAAuB,CAAC;IAC3C;IAEA,MAAM,yBAAyB,GAAG,MAAK;AACrC,QAAA,MAAM,WAAW,GAAG,CAAC,mBAAmB;QACxC,sBAAsB,CAAC,WAAW,CAAC;AACnC,QAAA,QAAQ,GAAG,WAAW,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,OAAO,CAAC,mBAAmB,EAAE,yBAAyB,CAAC;AACzD;AAEA;;;;;;;;;;;;AAYG;MACU,YAAY,GAAG,UAAU,CAIpC,CACE,EACE,cAAc,EACd,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACiD,EAC/D,GAAG,KACD;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,GAAG,eAAe,CAAC;QACtD,cAAc;QACd,QAAQ;QACR,OAAO;AACR,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAA+C,CAAC,KAAK,KAAI;AACxE,QAAA,aAAa,EAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EACb,OAAO,EAAE,WAAW,EAAA,GAChB,iBAAiB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAA,CAClD;AAEN,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/button/ToggleIconButton.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { IconButtonProps } from "./IconButton";
+import { ToggleButtonProps } from "./ToggleButton";
+/**
+ * An icon-only button that stays either "on" or "off" after each click.
+ * Maps `pressed` to the native `aria-pressed` attribute, always present
+ * since a toggle button must announce that state. Manages its own pressed
+ * state, starting from `false`, when `pressed` is omitted — pass
+ * `defaultPressed` and/or `onChange` to seed or observe that
+ * uncontrolled state. Carries no default `kind` or CSS; `kind`/`className`
+ * stay exactly as caller-controlled as they are on plain `IconButton`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-icon-button--docs | Storybook Documentation}
+ */
+export declare const ToggleIconButton: React.ForwardRefExoticComponent<(Omit<IconButtonProps, "onChange"> & ToggleButtonProps) & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleIconButton.d.ts.map

package/dist/components/button/ToggleIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/ToggleIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EACL,iBAAiB,EAGlB,MAAM,gBAAgB,CAAA;AAEvB;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,mIAkC5B,CAAA"}

package/dist/components/button/ToggleIconButton.js

@@ -0,0 +1,32 @@
+import React__default, { forwardRef } from 'react';
+import { IconButton } from './IconButton.js';
+import { usePressedState, toggleButtonProps } from './ToggleButton.js';
+
+/**
+ * An icon-only button that stays either "on" or "off" after each click.
+ * Maps `pressed` to the native `aria-pressed` attribute, always present
+ * since a toggle button must announce that state. Manages its own pressed
+ * state, starting from `false`, when `pressed` is omitted — pass
+ * `defaultPressed` and/or `onChange` to seed or observe that
+ * uncontrolled state. Carries no default `kind` or CSS; `kind`/`className`
+ * stay exactly as caller-controlled as they are on plain `IconButton`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-icon-button--docs | Storybook Documentation}
+ */
+const ToggleIconButton = forwardRef(({ defaultPressed, onClick, onChange, pressed, ...restProps }, ref) => {
+    const [currentPressed, togglePressed] = usePressedState({
+        defaultPressed,
+        onChange,
+        pressed,
+    });
+    const handleClick = (event) => {
+        togglePressed();
+        onClick?.(event);
+    };
+    return (React__default.createElement(IconButton, { ref: ref, ...restProps, onClick: handleClick, ...toggleButtonProps({ pressed: currentPressed }) }));
+});
+ToggleIconButton.displayName = "ToggleIconButton";
+
+export { ToggleIconButton };
+//# sourceMappingURL=ToggleIconButton.js.map

package/dist/components/button/ToggleIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleIconButton.js","sources":["../../../src/components/button/ToggleIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { IconButton, IconButtonProps } from \"./IconButton\"\nimport {\n  ToggleButtonProps,\n  toggleButtonProps,\n  usePressedState,\n} from \"./ToggleButton\"\n\n/**\n * An icon-only button that stays either \"on\" or \"off\" after each click.\n * Maps `pressed` to the native `aria-pressed` attribute, always present\n * since a toggle button must announce that state. Manages its own pressed\n * state, starting from `false`, when `pressed` is omitted — pass\n * `defaultPressed` and/or `onChange` to seed or observe that\n * uncontrolled state. Carries no default `kind` or CSS; `kind`/`className`\n * stay exactly as caller-controlled as they are on plain `IconButton`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-icon-button--docs | Storybook Documentation}\n */\nexport const ToggleIconButton = forwardRef<\n  HTMLButtonElement,\n  Omit<IconButtonProps, \"onChange\"> & ToggleButtonProps\n>(\n  (\n    {\n      defaultPressed,\n      onClick,\n      onChange,\n      pressed,\n      ...restProps\n    }: Omit<IconButtonProps, \"onChange\"> & ToggleButtonProps,\n    ref\n  ) => {\n    const [currentPressed, togglePressed] = usePressedState({\n      defaultPressed,\n      onChange,\n      pressed,\n    })\n\n    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n      togglePressed()\n      onClick?.(event)\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        {...restProps}\n        onClick={handleClick}\n        {...toggleButtonProps({ pressed: currentPressed })}\n      />\n    )\n  }\n)\n\nToggleIconButton.displayName = \"ToggleIconButton\"\n"],"names":["React"],"mappings":";;;;AASA;;;;;;;;;;;AAWG;MACU,gBAAgB,GAAG,UAAU,CAIxC,CACE,EACE,cAAc,EACd,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EAC0C,EACxD,GAAG,KACD;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,GAAG,eAAe,CAAC;QACtD,cAAc;QACd,QAAQ;QACR,OAAO;AACR,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAA+C,CAAC,KAAK,KAAI;AACxE,QAAA,aAAa,EAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EACb,OAAO,EAAE,WAAW,EAAA,GAChB,iBAAiB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAA,CAClD;AAEN,CAAC;AAGH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/components/internal/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAiB,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAA;AActC,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,SAA0B,GAC3B,EAAE,YAAY,qBAyEd;yBA7Ee,OAAO"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAU,MAAM,OAAO,CAAA;AAExD,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAA;AActC,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,SAA0B,GAC3B,EAAE,YAAY,qBAyEd;yBA7Ee,OAAO"}

package/dist/components/internal/tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { tokens } from '@planningcenter/tapestry-tokens/tokens';
-import 'classnames';
 import 'react';
+import 'classnames';
 import 'react-aria/Overlay';
 import 'react-aria/useOverlayPosition';
 import 'react-aria/useTooltipTrigger';

package/dist/components/internal/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, useId, useRef } from \"react\"\nimport { Overlay } from \"react-aria/Overlay\"\nimport {\n  type Placement,\n  useOverlayPosition,\n} from \"react-aria/useOverlayPosition\"\nimport { useTooltip, useTooltipTrigger } from \"react-aria/useTooltipTrigger\"\nimport { useTooltipTriggerState } from \"react-stately/useTooltipTriggerState\"\n\nimport { TooltipTriggerContext } from \"./TooltipTriggerContext\"\n\n// Single source of truth for the arrow's dimensions -- index.css reads these\n// via --tds-tooltip-arrow-size/--tds-tooltip-arrow-depth instead of its own literals.\nconst ARROW_SIZE = 10\nconst ARROW_DEPTH = 5\nconst FOCUS_RING_REACH =\n  parseFloat(tokens[\"--t-focus-ring-offset\"]) +\n  parseFloat(tokens[\"--t-focus-ring-width\"])\n\nexport interface TooltipProps {\n  /**\n   * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to\n   * act as the trigger. Must be exactly one trigger — nothing enforces this\n   * at runtime, so a fragment with more than one child would silently hand\n   * every child the same ref and trigger props.\n   */\n  children: ReactElement\n  /**\n   * The hint text. Best used with information beyond the trigger's accessible name\n   * (e.g. its `aria-label` or visible label).\n   */\n  content: string\n  /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */\n  placement?: Placement\n}\n\n/**\n * Shows a short hover/focus hint next to a trigger. Built from React Aria's\n * tooltip hooks rather than `react-aria-components`'s `<Tooltip>`, because\n * that component unmounts its content entirely while closed, so a screen\n * reader's virtual cursor never gets access to the description unless real\n * DOM focus lands on the trigger. This keeps the tooltip content always\n * mounted and wires `aria-describedby` unconditionally, toggling only CSS\n * visibility.\n */\nexport function Tooltip({\n  children,\n  content,\n  placement = \"bottom start\",\n}: TooltipProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const tooltipId = `tds-tooltip-${useId()}`\n\n  const state = useTooltipTriggerState()\n  const { triggerProps } = useTooltipTrigger({}, state, triggerRef)\n  const { tooltipProps: ariaTooltipProps } = useTooltip(\n    { id: tooltipId },\n    state\n  )\n\n  const {\n    arrowProps,\n    overlayProps,\n    placement: resolvedPlacement,\n  } = useOverlayPosition({\n    arrowSize: ARROW_SIZE,\n    isOpen: state.isOpen,\n    offset: ARROW_DEPTH + FOCUS_RING_REACH,\n    onClose: () => state.close(true),\n    overlayRef,\n    placement,\n    targetRef: triggerRef,\n  })\n\n  const contextValue = {\n    ref: triggerRef,\n    triggerProps: {\n      ...triggerProps,\n      \"aria-describedby\": tooltipId,\n    },\n  }\n\n  return (\n    <>\n      <TooltipTriggerContext.Provider value={contextValue}>\n        {children}\n      </TooltipTriggerContext.Provider>\n      <Overlay disableFocusManagement>\n        <div\n          {...ariaTooltipProps}\n          {...overlayProps}\n          ref={overlayRef}\n          className={classNames(\"tds-tooltip\", {\n            \"tds-tooltip--open\": state.isOpen,\n          })}\n          data-placement={resolvedPlacement}\n          style={\n            {\n              ...overlayProps.style,\n              \"--tds-tooltip-arrow-depth-raw\": `${ARROW_DEPTH}px`,\n              \"--tds-tooltip-arrow-size-raw\": `${ARROW_SIZE}px`,\n            } as React.CSSProperties\n          }\n        >\n          {content}\n          <div className=\"tds-tooltip-arrow\" {...arrowProps}>\n            <svg\n              aria-hidden\n              className=\"tds-tooltip-arrow-icon\"\n              role=\"img\"\n              viewBox={`0 0 ${ARROW_SIZE} ${ARROW_DEPTH}`}\n            >\n              <polygon\n                points={`${ARROW_SIZE / 2},0 0,${ARROW_DEPTH} ${ARROW_SIZE},${ARROW_DEPTH}`}\n              />\n            </svg>\n          </div>\n        </div>\n      </Overlay>\n    </>\n  )\n}\n\nTooltip.displayName = \"Tooltip\"\n"],"names":[],"mappings":";;;;;;;;;AAkBE,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, useRef } from \"react\"\nimport { Overlay } from \"react-aria/Overlay\"\nimport {\n  type Placement,\n  useOverlayPosition,\n} from \"react-aria/useOverlayPosition\"\nimport { useTooltip, useTooltipTrigger } from \"react-aria/useTooltipTrigger\"\nimport { useTooltipTriggerState } from \"react-stately/useTooltipTriggerState\"\n\nimport { TooltipTriggerContext } from \"./TooltipTriggerContext\"\n\n// Single source of truth for the arrow's dimensions -- index.css reads these\n// via --tds-tooltip-arrow-size/--tds-tooltip-arrow-depth instead of its own literals.\nconst ARROW_SIZE = 10\nconst ARROW_DEPTH = 5\nconst FOCUS_RING_REACH =\n  parseFloat(tokens[\"--t-focus-ring-offset\"]) +\n  parseFloat(tokens[\"--t-focus-ring-width\"])\n\nexport interface TooltipProps {\n  /**\n   * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to\n   * act as the trigger. Must be exactly one trigger — nothing enforces this\n   * at runtime, so a fragment with more than one child would silently hand\n   * every child the same ref and trigger props.\n   */\n  children: ReactElement\n  /**\n   * The hint text. Best used with information beyond the trigger's accessible name\n   * (e.g. its `aria-label` or visible label).\n   */\n  content: string\n  /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */\n  placement?: Placement\n}\n\n/**\n * Shows a short hover/focus hint next to a trigger. Built from React Aria's\n * tooltip hooks rather than `react-aria-components`'s `<Tooltip>`, because\n * that component unmounts its content entirely while closed, so a screen\n * reader's virtual cursor never gets access to the description unless real\n * DOM focus lands on the trigger. This keeps the tooltip content always\n * mounted and wires `aria-describedby` unconditionally, toggling only CSS\n * visibility.\n */\nexport function Tooltip({\n  children,\n  content,\n  placement = \"bottom start\",\n}: TooltipProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const tooltipId = `tds-tooltip-${useId()}`\n\n  const state = useTooltipTriggerState()\n  const { triggerProps } = useTooltipTrigger({}, state, triggerRef)\n  const { tooltipProps: ariaTooltipProps } = useTooltip(\n    { id: tooltipId },\n    state\n  )\n\n  const {\n    arrowProps,\n    overlayProps,\n    placement: resolvedPlacement,\n  } = useOverlayPosition({\n    arrowSize: ARROW_SIZE,\n    isOpen: state.isOpen,\n    offset: ARROW_DEPTH + FOCUS_RING_REACH,\n    onClose: () => state.close(true),\n    overlayRef,\n    placement,\n    targetRef: triggerRef,\n  })\n\n  const contextValue = {\n    ref: triggerRef,\n    triggerProps: {\n      ...triggerProps,\n      \"aria-describedby\": tooltipId,\n    },\n  }\n\n  return (\n    <>\n      <TooltipTriggerContext.Provider value={contextValue}>\n        {children}\n      </TooltipTriggerContext.Provider>\n      <Overlay disableFocusManagement>\n        <div\n          {...ariaTooltipProps}\n          {...overlayProps}\n          ref={overlayRef}\n          className={classNames(\"tds-tooltip\", {\n            \"tds-tooltip--open\": state.isOpen,\n          })}\n          data-placement={resolvedPlacement}\n          style={\n            {\n              ...overlayProps.style,\n              \"--tds-tooltip-arrow-depth-raw\": `${ARROW_DEPTH}px`,\n              \"--tds-tooltip-arrow-size-raw\": `${ARROW_SIZE}px`,\n            } as React.CSSProperties\n          }\n        >\n          {content}\n          <div className=\"tds-tooltip-arrow\" {...arrowProps}>\n            <svg\n              aria-hidden\n              className=\"tds-tooltip-arrow-icon\"\n              role=\"img\"\n              viewBox={`0 0 ${ARROW_SIZE} ${ARROW_DEPTH}`}\n            >\n              <polygon\n                points={`${ARROW_SIZE / 2},0 0,${ARROW_DEPTH} ${ARROW_SIZE},${ARROW_DEPTH}`}\n              />\n            </svg>\n          </div>\n        </div>\n      </Overlay>\n    </>\n  )\n}\n\nTooltip.displayName = \"Tooltip\"\n"],"names":[],"mappings":";;;;;;;;;AAmBE,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC"}

package/dist/components/page-header/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA6BA"}

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

@@ -24,8 +24,8 @@ function PageHeader({ children, actions, navigation, className, inactive = false
         React.createElement("div", { className: "tds-page-header__title-bar" },
             React.createElement("div", { className: "tds-page-header__primary" }, children),
             actions && (React.createElement("div", { className: "tds-page-header__actions tds-no-print" }, actions))),
-        navigation && (React.createElement("nav", { className: "tds-page-header__nav tds-no-print" },
-            React.createElement("tds-scroll-to-selected-in-unordered-list", null, navigation)))));
+        navigation && (React.createElement("tds-scroll-to-selected-in-unordered-list", null,
+            React.createElement("nav", { className: "tds-page-header__nav tds-no-print" }, navigation)))));
 }
 
 export { PageHeader };

package/dist/components/page-header/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React from \"react\"\n\n/**\n * A page header lays out the primary title, optional navigation, and\n * action buttons at the top of a page. Use one per page to anchor the\n * page's identity and primary controls.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}\n */\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Actions to be displayed on the right side of the header. Elements\n   * should be styled as buttons.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation links to be displayed on the left side of the header.\n   * Contents should be an unordered list with items being links or\n   * buttons. Specify `selected` for the active link (as well as adding\n   * `aria-current=\"page\"` for accessibility).\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const hasMultiActions = actions\n    ? React.isValidElement(actions) && actions.type === React.Fragment\n      ? React.Children.count(actions.props.children) > 1\n      : React.Children.count(actions) > 1\n    : false\n\n  return (\n    <header\n      className={classNames(\"tds-page-header\", className, {\n        \"has-multi-actions\": hasMultiActions,\n        \"has-nav\": !!navigation,\n        inactive,\n        \"tds-page-header--profile\": profile,\n      })}\n    >\n      <div className=\"tds-page-header__title-bar\">\n        <div className=\"tds-page-header__primary\">{children}</div>\n        {actions && (\n          <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n        )}\n      </div>\n      {navigation && (\n        <nav className=\"tds-page-header__nav tds-no-print\">\n          <tds-scroll-to-selected-in-unordered-list>\n            {navigation}\n          </tds-scroll-to-selected-in-unordered-list>\n        </nav>\n      )}\n    </header>\n  )\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;IAET,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA;AAChD,YAAA,KAAA,CAAA,aAAA,CAAA,0CAAA,EAAA,IAAA,EACG,UAAU,CAC8B,CACvC,CACP,CACM;AAEb;;;;"}
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React from \"react\"\n\n/**\n * A page header lays out the primary title, optional navigation, and\n * action buttons at the top of a page. Use one per page to anchor the\n * page's identity and primary controls.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}\n */\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Actions to be displayed on the right side of the header. Elements\n   * should be styled as buttons.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation links to be displayed on the left side of the header.\n   * Contents should be an unordered list with items being links or\n   * buttons. Specify `selected` for the active link (as well as adding\n   * `aria-current=\"page\"` for accessibility).\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const hasMultiActions = actions\n    ? React.isValidElement(actions) && actions.type === React.Fragment\n      ? React.Children.count(actions.props.children) > 1\n      : React.Children.count(actions) > 1\n    : false\n\n  return (\n    <header\n      className={classNames(\"tds-page-header\", className, {\n        \"has-multi-actions\": hasMultiActions,\n        \"has-nav\": !!navigation,\n        inactive,\n        \"tds-page-header--profile\": profile,\n      })}\n    >\n      <div className=\"tds-page-header__title-bar\">\n        <div className=\"tds-page-header__primary\">{children}</div>\n        {actions && (\n          <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n        )}\n      </div>\n      {navigation && (\n        <tds-scroll-to-selected-in-unordered-list>\n          <nav className=\"tds-page-header__nav tds-no-print\">{navigation}</nav>\n        </tds-scroll-to-selected-in-unordered-list>\n      )}\n    </header>\n  )\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;IAET,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,0CAAA,EAAA,IAAA;YACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,EAAE,UAAU,CAAO,CAC5B,CAC5C,CACM;AAEb;;;;"}

package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsC9B,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,0CAA0C,EAAE,KAAK,CAAC,iBAAiB,CACjE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,EACtD,WAAW,CACZ,CAAA;SACF;KACF;CACF"}
+{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA4C9B,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,0CAA0C,EAAE,KAAK,CAAC,iBAAiB,CACjE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,EACtD,WAAW,CACZ,CAAA;SACF;KACF;CACF"}

package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js

@@ -3,14 +3,19 @@
  *
  * Usage:
  *   <tds-scroll-to-selected-in-unordered-list>
- *     <ul>
- *       <li><a class="selected">Item</a></li>
- *     </ul>
+ *     <nav>
+ *       <ul>
+ *         <li><a class="selected">Item</a></li>
+ *       </ul>
+ *     </nav>
  *   </tds-scroll-to-selected-in-unordered-list>
  */
 if (typeof HTMLElement !== "undefined") {
     class TdsScrollToSelectedInUnorderedList extends HTMLElement {
         connectedCallback() {
+            requestAnimationFrame(() => this.scrollToSelected());
+        }
+        scrollToSelected() {
             const ulElement = this.querySelector("ul");
             if (!ulElement)
                 return;

package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.js","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"sourcesContent":["import type React from \"react\"\n\n/**\n * A custom element that scrolls its child element with the class \"selected\" into view.\n *\n * Usage:\n *   <tds-scroll-to-selected-in-unordered-list>\n *     <ul>\n *       <li><a class=\"selected\">Item</a></li>\n *     </ul>\n *   </tds-scroll-to-selected-in-unordered-list>\n */\nif (typeof HTMLElement !== \"undefined\") {\n  class TdsScrollToSelectedInUnorderedList extends HTMLElement {\n    connectedCallback() {\n      const ulElement = this.querySelector(\"ul\")\n      if (!ulElement) return\n      const selectedItem = ulElement.querySelector(\".selected\")\n      if (selectedItem) {\n        const bounds = selectedItem.getBoundingClientRect()\n        const ulBounds = ulElement.getBoundingClientRect()\n        if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n          ulElement.scrollTo({\n            left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n          })\n        }\n      }\n    }\n  }\n\n  if (!customElements.get(\"tds-scroll-to-selected-in-unordered-list\")) {\n    customElements.define(\n      \"tds-scroll-to-selected-in-unordered-list\",\n      TdsScrollToSelectedInUnorderedList\n    )\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"tds-scroll-to-selected-in-unordered-list\": React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement> & { value?: string },\n        HTMLElement\n      >\n    }\n  }\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASG;AACH,IAAI,OAAO,WAAW,KAAK,WAAW,EAAE;IACtC,MAAM,kCAAmC,SAAQ,WAAW,CAAA;QAC1D,iBAAiB,GAAA;YACf,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1C,YAAA,IAAI,CAAC,SAAS;gBAAE;YAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;YACzD,IAAI,YAAY,EAAE;AAChB,gBAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,gBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,gBAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;oBAChE,SAAS,CAAC,QAAQ,CAAC;wBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,qBAAA,CAAC;gBACJ;YACF;QACF;AACD;IAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,0CAA0C,CAAC,EAAE;AACnE,QAAA,cAAc,CAAC,MAAM,CACnB,0CAA0C,EAC1C,kCAAkC,CACnC;IACH;AACF"}
+{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.js","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"sourcesContent":["import type React from \"react\"\n\n/**\n * A custom element that scrolls its child element with the class \"selected\" into view.\n *\n * Usage:\n *   <tds-scroll-to-selected-in-unordered-list>\n *     <nav>\n *       <ul>\n *         <li><a class=\"selected\">Item</a></li>\n *       </ul>\n *     </nav>\n *   </tds-scroll-to-selected-in-unordered-list>\n */\nif (typeof HTMLElement !== \"undefined\") {\n  class TdsScrollToSelectedInUnorderedList extends HTMLElement {\n    connectedCallback() {\n      requestAnimationFrame(() => this.scrollToSelected())\n    }\n\n    scrollToSelected() {\n      const ulElement = this.querySelector(\"ul\")\n      if (!ulElement) return\n      const selectedItem = ulElement.querySelector(\".selected\")\n      if (selectedItem) {\n        const bounds = selectedItem.getBoundingClientRect()\n        const ulBounds = ulElement.getBoundingClientRect()\n        if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n          ulElement.scrollTo({\n            left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n          })\n        }\n      }\n    }\n  }\n\n  if (!customElements.get(\"tds-scroll-to-selected-in-unordered-list\")) {\n    customElements.define(\n      \"tds-scroll-to-selected-in-unordered-list\",\n      TdsScrollToSelectedInUnorderedList\n    )\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"tds-scroll-to-selected-in-unordered-list\": React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement> & { value?: string },\n        HTMLElement\n      >\n    }\n  }\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;;;AAWG;AACH,IAAI,OAAO,WAAW,KAAK,WAAW,EAAE;IACtC,MAAM,kCAAmC,SAAQ,WAAW,CAAA;QAC1D,iBAAiB,GAAA;YACf,qBAAqB,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtD;QAEA,gBAAgB,GAAA;YACd,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1C,YAAA,IAAI,CAAC,SAAS;gBAAE;YAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;YACzD,IAAI,YAAY,EAAE;AAChB,gBAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,gBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,gBAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;oBAChE,SAAS,CAAC,QAAQ,CAAC;wBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,qBAAA,CAAC;gBACJ;YACF;QACF;AACD;IAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,0CAA0C,CAAC,EAAE;AACnE,QAAA,cAAc,CAAC,MAAM,CACnB,0CAA0C,EAC1C,kCAAkC,CACnC;IACH;AACF"}

package/dist/index.css

@@ -2309,6 +2309,17 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-color:var(--tds-btn-border-color-active);
   }
 
+.tds-btn[aria-pressed="true"]{
+    color:var(--tds-btn-color-active);
+    background-color:var(--tds-btn-bg-active);
+    border-color:var(--tds-btn-border-color-active);
+  }
+
+.tds-btn[aria-pressed="true"]:hover,.tds-btn[aria-pressed="true"]:focus-visible{
+      background-color:hsl(from var(--tds-btn-bg-active) h s calc(l - 5));
+      border-color:hsl(from var(--tds-btn-border-color-active) h s calc(l - 5));
+    }
+
 .tds-btn:disabled,.tds-btn.disabled{
     --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
     --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
@@ -5029,6 +5040,8 @@ a.tds-dropdown-item:is(:hover, :active){
     position:sticky;
     bottom:0;
     background:var(--t-surface-color-card);
+    border-end-start-radius:var(--t-border-radius-lg);
+    border-end-end-radius:var(--t-border-radius-lg);
   }
 }