@bspk/ui 1.1.34 → 1.3.0

package/dist/hooks/useOutsideClick.d.ts

@@ -27,5 +27,9 @@
  * @param callback - The callback to call when a click occurs outside of the ref.
  * @param disabled - Whether the hook should be disabled. Defaults to false.
  */
-export declare function useOutsideClick(elements: (HTMLElement | null)[] | null, callback: (event?: MouseEvent) => void, disabled?: boolean): void;
+export declare function useOutsideClick({ elements, callback, disabled, }: {
+    elements: (HTMLElement | null)[] | null;
+    callback: (event?: MouseEvent) => void;
+    disabled?: boolean;
+}): void;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useOutsideClick.js

@@ -28,7 +28,7 @@ import { useEffect } from 'react';
  * @param callback - The callback to call when a click occurs outside of the ref.
  * @param disabled - Whether the hook should be disabled. Defaults to false.
  */
-export function useOutsideClick(elements, callback, disabled) {
+export function useOutsideClick({ elements, callback, disabled, }) {
     useEffect(() => {
         if (!elements?.length || disabled)
             return;

package/dist/hooks/useOutsideClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideClick.js","sourceRoot":"","sources":["../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,eAAe,CAC3B,QAAuC,EACvC,QAAsC,EACtC,QAAkB;IAElB,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ;YAAE,OAAO;QAE1C,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;gBAAE,OAAO;YACjG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAClE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useOutsideClick.js","sourceRoot":"","sources":["../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,QAAQ,GAKX;IACG,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ;YAAE,OAAO;QAE1C,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;gBAAE,OAAO;YACjG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAClE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC;AAED,sDAAsD"}

package/dist/hooks/usePaginationState.d.ts

@@ -0,0 +1,4 @@
+export declare const usePaginationState: (numPages: number, initialPage?: number) => {
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+};

package/dist/hooks/usePaginationState.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+/*
+    * A hook to manage the state of pagination.
+
+    * @param numPages - The total number of pages.
+    * @param initialPage - The initial page to start on (default is 1).
+    * @returns An object containing the current page and a function to set the current page.
+    */
+export const usePaginationState = (numPages, initialPage) => {
+    const [currentPage, setCurrentPage] = useState(initialPage || 1);
+    const setPage = (page) => {
+        if (page < 1 || page > numPages) {
+            return;
+        }
+        setCurrentPage(page);
+    };
+    return {
+        currentPage,
+        setCurrentPage: setPage,
+    };
+};
+//# sourceMappingURL=usePaginationState.js.map

package/dist/hooks/usePaginationState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationState.js","sourceRoot":"","sources":["../../src/hooks/usePaginationState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;MAMM;AACN,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAE,WAAoB,EAAE,EAAE;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE;QAC7B,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,EAAE,CAAC;YAC9B,OAAO;QACX,CAAC;QACD,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO;QACH,WAAW;QACX,cAAc,EAAE,OAAO;KAC1B,CAAC;AACN,CAAC,CAAC"}

package/dist/hooks/useRadioState.d.ts

@@ -1,4 +1,4 @@
-import { RadioProps } from '../components/Radio';
+import { RadioProps } from '-/components/Radio';
 /**
  * A hook to manage the state of a single radio. Used alongside the Radio component.
  *
@@ -18,6 +18,6 @@ import { RadioProps } from '../components/Radio';
 export declare function useRadioState(name: string, externalState?: [value: string | undefined, onChange: (next: string) => void]): {
     radioProps: (radioValue: string) => Pick<RadioProps, "checked" | "name" | "onChange" | "value">;
     value: string | undefined;
-    setValue: (next: string) => void;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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/hooks/useTimeout.d.ts

@@ -1,3 +1,8 @@
+type TimeoutHook = {
+    clear: () => void;
+    set: (callback: () => void, ms?: number) => void;
+    ref: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+};
 /**
  * A hook that creates a timeout that is automatically cleared when the component is unmounted.
  *
@@ -17,9 +22,7 @@
  *
  * @returns A ref object that can be used to store a timeout id.
  */
-export declare function useTimeout(): {
-    clear: () => void;
-    set: (callback: () => void, durationMs: number) => void;
-    ref: import("react").MutableRefObject<NodeJS.Timeout | null>;
-};
+export declare function useTimeout(): TimeoutHook;
+export declare function useTimeout(initialCallback: () => void, durationMs: number): TimeoutHook;
+export {};
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useTimeout.js

@@ -1,41 +1,25 @@
 import { useRef, useEffect, useMemo } from 'react';
-/**
- * A hook that creates a timeout that is automatically cleared when the component is unmounted.
- *
- * @example
- *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
- *     import { useEffect } from 'react';
- *
- *     export function MyComponent() {
- *     const timeout = useTimeout();
- *
- *     const handleClick = () => {
- *     timeout.set(() => console.log('Timeout triggered'), 1000);
- *     };
- *
- *     return <Button onClick={handleClick}>Click here then check the console.</Button>;
- *     }
- *
- * @returns A ref object that can be used to store a timeout id.
- */
-export function useTimeout() {
+export function useTimeout(initialCallback, durationMs = 1000) {
     const timeoutRef = useRef(null);
     useEffect(() => {
         if (timeoutRef.current)
             clearTimeout(timeoutRef.current);
+        if (initialCallback)
+            timeoutRef.current = setTimeout(initialCallback, durationMs);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only run at mount
     }, []);
     return useMemo(() => ({
         clear: () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         },
-        set: (callback, durationMs) => {
+        set: (callback, ms = durationMs) => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
-            timeoutRef.current = setTimeout(callback, durationMs);
+            timeoutRef.current = setTimeout(callback, ms);
         },
         ref: timeoutRef,
-    }), []);
+    }), [durationMs]);
 }
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=useTimeout.js.map

package/dist/hooks/useTimeout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU;IACtB,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CACV,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,GAAG,EAAE;YACR,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,GAAG,EAAE,CAAC,QAAoB,EAAE,UAAkB,EAAE,EAAE;YAC9C,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAC1D,CAAC;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,EAAE,CACL,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AA6BnD,MAAM,UAAU,UAAU,CAAC,eAA4B,EAAE,UAAU,GAAG,IAAI;IACtE,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,eAAe;YAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;QAClF,4EAA4E;IAChF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CACV,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,GAAG,EAAE;YACR,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,GAAG,EAAE,CAAC,QAAoB,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE;YAC3C,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/dist/hooks/useUIContext.d.ts

@@ -1 +1 @@
-export declare const useUIContext: () => import("../utils/uiContext").UIContextProps;
+export declare const useUIContext: () => import("-/utils/uiContext").UIContextProps;

package/dist/styles/anywhere.css

@@ -604,17 +604,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - Anywhere */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Anywhere */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Anywhere */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Anywhere */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -624,7 +624,7 @@ body {
     --interaction-primary-hover-opacity: #1559ea1a;
     /* Interaction/primary-press-opacity - Theme - 3.0 */
     --interaction-primary-press-opacity: #1559ea33;
-    /* Interactions/disabled-opacity - Theme - 3.0 */
+    /* Interactions/disabled-opacity - Theme - Anywhere */
     --interactions-disabled-opacity: #0000000f;
     /* Interactions/opacity-black-10 - Global (primitives) */
     --interactions-opacity-black-10: #0000001a;
@@ -870,17 +870,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Anywhere */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Anywhere */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Anywhere */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Anywhere */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Anywhere */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Anywhere */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -894,7 +894,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Anywhere */
     --surface-neutral-transparent: #ffffff00;
     /* Colors/Brands/Anywhere/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #030330;

package/dist/styles/anywhere.css.js

@@ -607,17 +607,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - Anywhere */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Anywhere */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Anywhere */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Anywhere */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -627,7 +627,7 @@ body {
     --interaction-primary-hover-opacity: #1559ea1a;
     /* Interaction/primary-press-opacity - Theme - 3.0 */
     --interaction-primary-press-opacity: #1559ea33;
-    /* Interactions/disabled-opacity - Theme - 3.0 */
+    /* Interactions/disabled-opacity - Theme - Anywhere */
     --interactions-disabled-opacity: #0000000f;
     /* Interactions/opacity-black-10 - Global (primitives) */
     --interactions-opacity-black-10: #0000001a;
@@ -873,17 +873,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Anywhere */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Anywhere */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Anywhere */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Anywhere */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Anywhere */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Anywhere */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -897,7 +897,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Anywhere */
     --surface-neutral-transparent: #ffffff00;
     /* Colors/Brands/Anywhere/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #030330;
@@ -1890,4 +1890,3 @@ body {
 }
 `));
 document.head.appendChild(style);
-

package/dist/{base.css → styles/base.css}

@@ -94,6 +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;
@@ -129,59 +132,83 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a {
+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([disabled]):hover, body[data-bspk] a: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([disabled]):active, body[data-bspk] a: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([disabled]):visited, body[data-bspk] a: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[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);
 }
@@ -208,15 +235,11 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 }
 
 [data-sr-only] {
-  position: absolute;
-  width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  position: absolute !important;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 
 [data-touch-target] ~ * {
@@ -297,4 +320,68 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   border-radius: var(--radius-sm);
 }
 
+[data-attachment-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-attachment-wrapper] [data-attachment] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  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 */