@bspk/ui 1.2.0 → 1.3.0

package/dist/hooks/useArrowNavigation.d.ts

@@ -0,0 +1,50 @@
+import { KeyboardEvent } from 'react';
+import { KeysCallback } from '-/utils/handleKeyDown';
+import { KeyboardEventCode } from '-/utils/keyboard';
+type ArrowKeyNames = Extract<KeyboardEventCode, `Arrow${string}`>;
+export type ArrowKeyNavigationCallbackParams = {
+    key: ArrowKeyNames;
+    event: KeyboardEvent;
+    activeElementId: string | null;
+    increment: number;
+};
+type UseArrowNavigationProps = {
+    /**
+     * An array of string IDs representing the navigable elements. These IDs should correspond to the `id` attributes of
+     * the elements in the DOM. Ensure the elements are not disabled.
+     */
+    ids: string[];
+    /**
+     * An optional callback function that is invoked when an arrow key is pressed. This function receives the key name,
+     * the keyboard event, and the next active element ID. If the function returns `true`, the default navigation
+     * behavior is prevented; if it returns `false` or is not provided, the default behavior proceeds.
+     */
+    callback?: (params: ArrowKeyNavigationCallbackParams) => boolean;
+    /** Optional configuration to set navigation direction increments. */
+    increments?: Record<ArrowKeyNames, number>;
+    /**
+     * The ID of the element that should be active by default. If not provided, the first ID in the `ids` array will be
+     * used.
+     */
+    defaultActiveId?: string | null;
+};
+/**
+ * A hook to manage arrow key navigation for a list of elements.
+ *
+ * @example
+ *     ```tsx
+ *     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation(['id1', 'id2', 'id3']);
+ *     ```;
+ *
+ * @returns An object containing:
+ *
+ *   - `activeElementId`: The ID of the currently active element.
+ *   - `setActiveElementId`: A function to manually set the active element ID.
+ *   - `arrowKeyCallbacks`: An object with callback functions for arrow key navigation.
+ */
+export declare function useArrowNavigation({ ids, callback, increments, defaultActiveId, }: UseArrowNavigationProps): {
+    activeElementId: string | null;
+    setActiveElementId: (id: string | null) => void;
+    arrowKeyCallbacks: KeysCallback;
+};
+export {};

package/dist/hooks/useArrowNavigation.js

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { getElementById } from '../utils/dom';
+const ARROW_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+/**
+ * A hook to manage arrow key navigation for a list of elements.
+ *
+ * @example
+ *     ```tsx
+ *     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation(['id1', 'id2', 'id3']);
+ *     ```;
+ *
+ * @returns An object containing:
+ *
+ *   - `activeElementId`: The ID of the currently active element.
+ *   - `setActiveElementId`: A function to manually set the active element ID.
+ *   - `arrowKeyCallbacks`: An object with callback functions for arrow key navigation.
+ */
+export function useArrowNavigation({ ids = [], callback, increments = {
+    ArrowLeft: -1,
+    ArrowRight: 1,
+    ArrowUp: -1,
+    ArrowDown: 1,
+}, defaultActiveId, }) {
+    const [activeElementId, setActiveElementIdBase] = useState(defaultActiveId || null);
+    const setActiveElementId = (id) => {
+        setActiveElementIdBase(id);
+        getElementById(id)?.scrollIntoView({
+            block: 'nearest',
+            behavior: 'smooth',
+            inline: 'nearest',
+        });
+    };
+    return {
+        activeElementId,
+        setActiveElementId,
+        arrowKeyCallbacks: Object.fromEntries(ARROW_KEYS.map((key) => [
+            key,
+            (event) => {
+                let nextIndex = 0;
+                let currentIndex = 0;
+                let nextId = ids[nextIndex];
+                const increment = increments[key];
+                if (activeElementId) {
+                    currentIndex = ids.indexOf(activeElementId);
+                    nextIndex = (currentIndex + increment + ids.length) % ids.length;
+                    nextId = ids[nextIndex];
+                }
+                if (typeof callback === 'function' &&
+                    callback({ key, event, activeElementId: nextId, increment }) === false)
+                    return;
+                event.preventDefault();
+                setActiveElementId(nextId);
+            },
+        ])),
+    };
+}
+//# sourceMappingURL=useArrowNavigation.js.map

package/dist/hooks/useArrowNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrowNavigation.js","sourceRoot":"","sources":["../../src/hooks/useArrowNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7C,MAAM,UAAU,GAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;AA8BxF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,GAAG,GAAG,EAAE,EACR,QAAQ,EACR,UAAU,GAAG;IACT,SAAS,EAAE,CAAC,CAAC;IACb,UAAU,EAAE,CAAC;IACb,OAAO,EAAE,CAAC,CAAC;IACX,SAAS,EAAE,CAAC;CACf,EACD,eAAe,GACO;IAKtB,MAAM,CAAC,eAAe,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAgB,eAAe,IAAI,IAAI,CAAC,CAAC;IAEnG,MAAM,kBAAkB,GAAG,CAAC,EAAiB,EAAE,EAAE;QAC7C,sBAAsB,CAAC,EAAE,CAAC,CAAC;QAC3B,cAAc,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC;YAC/B,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,SAAS;SACpB,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,OAAO;QACH,eAAe;QACf,kBAAkB;QAClB,iBAAiB,EAAE,MAAM,CAAC,WAAW,CACjC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC;YACpB,GAAG;YACH,CAAC,KAAoB,EAAE,EAAE;gBACrB,IAAI,SAAS,GAAG,CAAC,CAAC;gBAClB,IAAI,YAAY,GAAG,CAAC,CAAC;gBACrB,IAAI,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC5B,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;gBAElC,IAAI,eAAe,EAAE,CAAC;oBAClB,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;oBAC5C,SAAS,GAAG,CAAC,YAAY,GAAG,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC;oBACjE,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC5B,CAAC;gBAED,IACI,OAAO,QAAQ,KAAK,UAAU;oBAC9B,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK;oBAEtE,OAAO;gBACX,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;SACJ,CAAC,CACW;KACpB,CAAC;AACN,CAAC"}

package/dist/hooks/useCheckboxGroupState.d.ts

@@ -32,6 +32,6 @@ export declare function useCheckboxGroupState(allValues: string[], name: string,
     allCheckboxProps: Pick<CheckboxProps, "name" | "value" | "onChange" | "checked" | "indeterminate">;
     checkboxProps: (value: string) => Pick<CheckboxProps, "checked" | "name" | "onChange" | "value">;
     values: string[];
-    setValues: (next: string[]) => void;
+    setValues: import("react").Dispatch<import("react").SetStateAction<string[]>>;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useContainerWidth.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A hook to get the width of a container element.
+ *
+ * @example
+ *     import { useRef } from 'react';
+ *     import { useContainerWidth } from '@bspk/ui/hooks/useContainerWidth';
+ *     export function Example() {
+ *         const containerRef = useRef<HTMLDivElement>(null);
+ *         const width = useContainerWidth(containerRef);
+ *         return <div ref={containerRef}>Width: {width}px</div>;
+ *     }
+ *
+ * @param ref - A ref to a container element.
+ * @returns The width of the container element.
+ */
+export declare function useContainerWidth(ref: React.RefObject<HTMLDivElement>): number;

package/dist/hooks/useContainerWidth.js

@@ -0,0 +1,35 @@
+import { useState, useLayoutEffect } from 'react';
+/**
+ * A hook to get the width of a container element.
+ *
+ * @example
+ *     import { useRef } from 'react';
+ *     import { useContainerWidth } from '@bspk/ui/hooks/useContainerWidth';
+ *     export function Example() {
+ *         const containerRef = useRef<HTMLDivElement>(null);
+ *         const width = useContainerWidth(containerRef);
+ *         return <div ref={containerRef}>Width: {width}px</div>;
+ *     }
+ *
+ * @param ref - A ref to a container element.
+ * @returns The width of the container element.
+ */
+export function useContainerWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        setWidth(ref.current.offsetWidth);
+        const observer = new window.ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === ref.current) {
+                    setWidth(entry.contentRect.width);
+                }
+            }
+        });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+//# sourceMappingURL=useContainerWidth.js.map

package/dist/hooks/useContainerWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerWidth.js","sourceRoot":"","sources":["../../src/hooks/useContainerWidth.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAoC;IAClE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,eAAe,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAElC,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC1B,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;oBAC/B,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACtC,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAE9B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/hooks/useFloating.d.ts

@@ -45,16 +45,16 @@ export type UseFloatingProps = {
     /**
      * When set to true, the width of the floating element will match the width of the reference element.
      *
-     * @default true
+     * @default false
      */
     refWidth?: boolean;
     /** Whether to hide the floating element. */
     hide?: boolean;
 };
-export type UseFloatingElements<ReferenceElementType extends HTMLElement = HTMLElement> = {
-    reference: ReferenceElementType | null;
+export type UseFloatingElements = {
+    reference: HTMLElement | null;
     floating: HTMLElement | null;
-    setReference: (element: ReferenceElementType | null) => void;
+    setReference: (element: HTMLElement | null) => void;
     setFloating: (element: HTMLElement | null) => void;
 };
 /**
@@ -63,9 +63,10 @@ export type UseFloatingElements<ReferenceElementType extends HTMLElement = HTMLE
  * @param param0
  * @returns
  */
-export declare function useFloating<ReferenceElementType extends HTMLElement = HTMLElement>({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: UseFloatingProps): {
-    elements: UseFloatingElements<ReferenceElementType>;
+export declare function useFloating({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: UseFloatingProps): {
+    elements: UseFloatingElements;
     floatingStyles: React.CSSProperties;
     middlewareData: MiddlewareData;
+    currentPlacement: Placement | undefined;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useFloating.js

@@ -23,7 +23,7 @@ const TRANSITION_DELAY = 250;
  * @param param0
  * @returns
  */
-export function useFloating({ placement = 'bottom-start', arrowRef, strategy = 'fixed', offsetOptions = 0, refWidth = true, hide = false, }) {
+export function useFloating({ placement = 'bottom-start', arrowRef, strategy = 'fixed', offsetOptions = 0, refWidth = false, hide = false, }) {
     const [floatingStyles, setFloatingStylesState] = useState({
         opacity: 0,
         pointerEvents: 'none',
@@ -43,6 +43,7 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
     const compute = useCallback(() => {
         computeDebounce.clear();
         transitionDelay.clear();
+        // console.log('compute', { referenceElement, floatingElement });
         // check if the reference or floating element is null
         if (referenceElement === null || floatingElement === null)
             return;
@@ -50,14 +51,12 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
             if (floatingElement?.style.top)
                 setFloatingStyles((prev) => ({
                     ...prev,
-                    display: undefined,
                     opacity: 0,
                     pointerEvents: 'none',
                 }));
             transitionDelay.set(() => {
                 setFloatingStyles((prev) => ({
                     ...prev,
-                    display: 'none',
                 }));
             }, TRANSITION_DELAY);
             return;
@@ -74,15 +73,13 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
                     arrowRef?.current && arrow({ element: arrowRef.current, padding: 8 }),
                     offset(offsetOptions),
                     flip(),
-                    refWidth &&
-                        size({
-                            apply({ rects, elements }) {
-                                if (refWidth)
-                                    Object.assign(elements.floating.style, {
-                                        width: `${rects.reference.width}px`,
-                                    });
-                            },
-                        }),
+                    size({
+                        apply({ rects, elements }) {
+                            Object.assign(elements.floating.style, {
+                                width: refWidth ? `${rects.reference.width}px` : undefined,
+                            });
+                        },
+                    }),
                 ],
             }).then((value) => {
                 setFloatingStyles(() => ({
@@ -140,6 +137,7 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
         },
         floatingStyles,
         middlewareData,
+        currentPlacement: middlewareData?.offset?.placement,
     };
 }
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useFloating.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloating.js","sourceRoot":"","sources":["../../src/hooks/useFloating.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFloating.js","sourceRoot":"","sources":["../../src/hooks/useFloating.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useSnackbarContext.d.ts

@@ -0,0 +1 @@
+export declare const useSnackbarContext: () => import("-/utils/snackbarContext").SnackbarContextProps;

package/dist/hooks/useSnackbarContext.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-console */
+import { useContext } from 'react';
+import { SnackbarContext } from '../utils/snackbarContext';
+export const useSnackbarContext = () => {
+    const context = useContext(SnackbarContext);
+    if (!context) {
+        console.error('useSnackbarContext must be used within a SnackbarProvider!');
+    }
+    return (context ?? {
+        snackbars: [],
+        sendSnackbar: () => console.error('sendSnackbar must be used within a SnackbarProvider!'),
+        clearSnackbar: () => console.error('clearSnackbar must be used within a SnackbarProvider!'),
+        clearAll: () => console.error('clearAll must be used within a SnackbarProvider!'),
+    });
+};
+//# sourceMappingURL=useSnackbarContext.js.map

package/dist/hooks/useSnackbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarContext.js","sourceRoot":"","sources":["../../src/hooks/useSnackbarContext.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IACD,OAAO,CACH,OAAO,IAAI;QACP,SAAS,EAAE,EAAE;QACb,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,sDAAsD,CAAC;QACzF,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC;QAC3F,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC;KACpF,CACJ,CAAC;AACN,CAAC,CAAC"}

package/dist/hooks/useSwipe.d.ts

@@ -0,0 +1,6 @@
+import { TouchEventHandler } from 'react';
+export declare function useSwipe(onSwipeLeft: () => void, onSwipeRight: () => void): {
+    onTouchStart: TouchEventHandler;
+    onTouchMove: TouchEventHandler;
+    onTouchEnd: TouchEventHandler;
+};

package/dist/hooks/useSwipe.js

@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+const MIN_SWIPE_DISTANCE = 50; // Minimum distance for a swipe to be recognized
+export function useSwipe(onSwipeLeft, onSwipeRight) {
+    const touchStart = useRef(null);
+    const touchEnd = useRef(null);
+    const onTouchStart = (e) => {
+        touchEnd.current = null;
+        touchStart.current = e.targetTouches[0].clientX;
+    };
+    const onTouchMove = (e) => {
+        touchEnd.current = e.targetTouches[0].clientX;
+    };
+    const onTouchEnd = () => {
+        if (!touchStart.current || !touchEnd.current)
+            return;
+        const distance = touchStart.current - touchEnd.current;
+        const isLeftSwipe = distance > MIN_SWIPE_DISTANCE;
+        const isRightSwipe = distance < -MIN_SWIPE_DISTANCE;
+        if (isLeftSwipe) {
+            onSwipeLeft();
+        }
+        else if (isRightSwipe) {
+            onSwipeRight();
+        }
+    };
+    return { onTouchStart, onTouchMove, onTouchEnd };
+}
+//# sourceMappingURL=useSwipe.js.map

package/dist/hooks/useSwipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwipe.js","sourceRoot":"","sources":["../../src/hooks/useSwipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,MAAM,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,kBAAkB,GAAG,EAAE,CAAC,CAAC,gDAAgD;AAE/E,MAAM,UAAU,QAAQ,CAAC,WAAuB,EAAE,YAAwB;IACtE,MAAM,UAAU,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAsB,CAAC,CAAC,EAAE,EAAE;QAC1C,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACpD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAsB,CAAC,CAAC,EAAE,EAAE;QACzC,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAsB,GAAG,EAAE;QACvC,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QACrD,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACvD,MAAM,WAAW,GAAG,QAAQ,GAAG,kBAAkB,CAAC;QAClD,MAAM,YAAY,GAAG,QAAQ,GAAG,CAAC,kBAAkB,CAAC;QAEpD,IAAI,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,CAAC;QAClB,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACtB,YAAY,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACrD,CAAC"}

package/dist/styles/base.css

@@ -94,7 +94,9 @@
 }
 
 :root {
+  --z-index-snackbar: 1200;
   --z-index-focus: 9999;
+  --z-index-button-dock: 1150;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -130,59 +132,83 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]),
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited,
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled],
+body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
 }
-body[data-bspk] a[data-subtle] {
+body[data-bspk] a[data-subtle],
+body[data-bspk] [data-bspk=link][data-subtle] {
   text-decoration: none;
   color: var(--foreground-neutral-on-surface);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):hover,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=hover] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-hovered);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active] {
+body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):active,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=active] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-pressed);
 }
-body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):visited,
+body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=visited] {
   color: var(--foreground-neutral-on-surface);
 }
-body[data-bspk] a[data-subtle][disabled] {
+body[data-bspk] a[data-subtle][disabled],
+body[data-bspk] [data-bspk=link][data-subtle][disabled] {
   pointer-events: none;
   color: var(--foreground-link-text-subtle-disabled);
 }
-body[data-bspk] a[data-subtle-inverse] {
+body[data-bspk] a[data-subtle-inverse],
+body[data-bspk] [data-bspk=link][data-subtle-inverse] {
   text-decoration: none;
   color: var(--foreground-neutral-inverse-on-surface);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):hover,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-inverse-hovered);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):active,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=active] {
   text-decoration: underline;
   color: var(--foreground-link-text-subtle-inverse-pressed);
 }
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited],
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):visited,
+body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
   color: var(--foreground-neutral-on-inverse-surface);
 }
-body[data-bspk] a[data-subtle-inverse][disabled] {
+body[data-bspk] a[data-subtle-inverse][disabled],
+body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
   pointer-events: none;
   color: var(--foreground-link-text-subtle-inversed-disabled);
 }
@@ -312,4 +338,50 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   z-index: 2;
 }
 
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    transform: translateY(-100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+[data-hidden] {
+  display: none !important;
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */