@allxsmith/bestax-bulma 5.67.10 → 5.67.12

package/dist/types/components/Modal.d.ts

@@ -49,11 +49,15 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     closeOnEscape?: boolean;
     /**
      * Lock page scroll while the modal is active, padding the page by the room
-     * its scrollbar took so the content stays put. An element fixed to the
-     * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by
-     * the scrollbar's width while the page is locked. Ref-counted and shared
-     * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first
-     * does not unlock the page underneath one that is still open.
+     * its scrollbar took so the content stays put. A `fixed` Navbar, the toast
+     * and notification stacks and an Affix stay put too. The padding doesn't
+     * reach an element of your own fixed to the window's edge, which moves by
+     * the scrollbar's width unless it adds
+     * `var(--bulma-scroll-lock-offset-right, 0px)` to its `right` (the `-left`
+     * one to its `left`), which the lock sets on `<html>` while it's on.
+     * Ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so
+     * whichever overlay closes first does not unlock the page underneath one
+     * that is still open.
      * @defaultValue true
      */
     lockScroll?: boolean;

package/dist/types/elements/Notification.d.ts

@@ -15,17 +15,19 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
      *
-     * `dark` takes the dark color's own text and background from bestax's
-     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
-     * notification's text inherits the color around it, which on a light page
-     * is one shade off its background.
+     * `dark` and `light` take their color's own text and background from
+     * bestax's stylesheets, as a dark or light `Button` has. With Bulma's CSS
+     * alone, their text inherits the color around it, which on a light page is
+     * one shade off a dark notification's background, and on a dark page is
+     * hard to read on a light one.
      */
     color?: (typeof validColors)[number];
     /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
     /**
-     * Use the light color variant. The dark color has none, so `color="dark"`
-     * with `isLight` looks the same as without it, as a dark `Button` does.
+     * Use the light color variant. The light and dark colors have none, so
+     * `color="light"` or `color="dark"` with `isLight` looks the same as
+     * without it, as a light or dark `Button` does.
      */
     isLight?: boolean;
     /**
@@ -80,15 +82,17 @@ export interface NotificationOptions {
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
      *
-     * `dark` takes the dark color's own text and background from bestax's
-     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
-     * notification's text inherits the color around it, which on a light page
-     * is one shade off its background.
+     * `dark` and `light` take their color's own text and background from
+     * bestax's stylesheets, as a dark or light `Button` has. With Bulma's CSS
+     * alone, their text inherits the color around it, which on a light page is
+     * one shade off a dark notification's background, and on a dark page is
+     * hard to read on a light one.
      */
     color?: (typeof validColors)[number];
     /**
-     * Use the light color variant. The dark color has none, so `color="dark"`
-     * with `isLight` looks the same as without it, as a dark `Button` does.
+     * Use the light color variant. The light and dark colors have none, so
+     * `color="light"` or `color="dark"` with `isLight` looks the same as
+     * without it, as a light or dark `Button` does.
      */
     isLight?: boolean;
     /** Duration in ms before auto-close. Default 3000. */

package/dist/types/elements/Tag.d.ts

@@ -16,11 +16,20 @@ export type TagSize = (typeof validTagSizes)[number];
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
     /** Additional CSS classes to apply. */
     className?: string;
-    /** Bulma color modifier for the tag. */
+    /**
+     * Bulma color modifier for the tag.
+     *
+     * `light` takes the light color's own text from bestax's stylesheets. With
+     * Bulma's CSS alone, a light tag's text inherits the color around it, which
+     * on a dark page is hard to read.
+     */
     color?: TagColor;
     /** Tag size. */
     size?: TagSize;
-    /** Use the light color variant. */
+    /**
+     * Use the light color variant. The light color has none, so
+     * `color="light"` with `isLight` looks the same as without it.
+     */
     isLight?: boolean;
     /** Renders a rounded tag. */
     isRounded?: boolean;

package/dist/types/helpers/scrollLock.d.ts

@@ -1,3 +1,15 @@
+/** A side of the window the page's scrollbar can take room on. */
+type ScrollLockSide = 'left' | 'right';
+/**
+ * The room the page's scrollbar gave back on one side while a lock is on,
+ * and `0px` otherwise, as a CSS value. An element fixed to that edge of the
+ * window adds it to its offset there, so it stays where it was as the
+ * scrollbar goes.
+ *
+ * @param side - The edge of the window the element is fixed to.
+ * @returns A `var()` with a `0px` fallback.
+ */
+export declare const scrollLockOffset: (side: ScrollLockSide) => string;
 /**
  * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is
  * true. Safe to call from multiple components at once: the page is only
@@ -7,3 +19,4 @@
  * @param active - Whether this caller wants the page's scrolling locked.
  */
 export declare function useScrollLock(active: boolean): void;
+export {};

package/dist/types-cjs/components/Modal.d.ts

@@ -49,11 +49,15 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     closeOnEscape?: boolean;
     /**
      * Lock page scroll while the modal is active, padding the page by the room
-     * its scrollbar took so the content stays put. An element fixed to the
-     * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by
-     * the scrollbar's width while the page is locked. Ref-counted and shared
-     * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first
-     * does not unlock the page underneath one that is still open.
+     * its scrollbar took so the content stays put. A `fixed` Navbar, the toast
+     * and notification stacks and an Affix stay put too. The padding doesn't
+     * reach an element of your own fixed to the window's edge, which moves by
+     * the scrollbar's width unless it adds
+     * `var(--bulma-scroll-lock-offset-right, 0px)` to its `right` (the `-left`
+     * one to its `left`), which the lock sets on `<html>` while it's on.
+     * Ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so
+     * whichever overlay closes first does not unlock the page underneath one
+     * that is still open.
      * @defaultValue true
      */
     lockScroll?: boolean;

package/dist/types-cjs/elements/Notification.d.ts

@@ -15,17 +15,19 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
      *
-     * `dark` takes the dark color's own text and background from bestax's
-     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
-     * notification's text inherits the color around it, which on a light page
-     * is one shade off its background.
+     * `dark` and `light` take their color's own text and background from
+     * bestax's stylesheets, as a dark or light `Button` has. With Bulma's CSS
+     * alone, their text inherits the color around it, which on a light page is
+     * one shade off a dark notification's background, and on a dark page is
+     * hard to read on a light one.
      */
     color?: (typeof validColors)[number];
     /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
     /**
-     * Use the light color variant. The dark color has none, so `color="dark"`
-     * with `isLight` looks the same as without it, as a dark `Button` does.
+     * Use the light color variant. The light and dark colors have none, so
+     * `color="light"` or `color="dark"` with `isLight` looks the same as
+     * without it, as a light or dark `Button` does.
      */
     isLight?: boolean;
     /**
@@ -80,15 +82,17 @@ export interface NotificationOptions {
      * notification renders unstyled; those log a console warning in development
      * and will be removed from this union in the next major version.
      *
-     * `dark` takes the dark color's own text and background from bestax's
-     * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
-     * notification's text inherits the color around it, which on a light page
-     * is one shade off its background.
+     * `dark` and `light` take their color's own text and background from
+     * bestax's stylesheets, as a dark or light `Button` has. With Bulma's CSS
+     * alone, their text inherits the color around it, which on a light page is
+     * one shade off a dark notification's background, and on a dark page is
+     * hard to read on a light one.
      */
     color?: (typeof validColors)[number];
     /**
-     * Use the light color variant. The dark color has none, so `color="dark"`
-     * with `isLight` looks the same as without it, as a dark `Button` does.
+     * Use the light color variant. The light and dark colors have none, so
+     * `color="light"` or `color="dark"` with `isLight` looks the same as
+     * without it, as a light or dark `Button` does.
      */
     isLight?: boolean;
     /** Duration in ms before auto-close. Default 3000. */

package/dist/types-cjs/elements/Tag.d.ts

@@ -16,11 +16,20 @@ export type TagSize = (typeof validTagSizes)[number];
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
     /** Additional CSS classes to apply. */
     className?: string;
-    /** Bulma color modifier for the tag. */
+    /**
+     * Bulma color modifier for the tag.
+     *
+     * `light` takes the light color's own text from bestax's stylesheets. With
+     * Bulma's CSS alone, a light tag's text inherits the color around it, which
+     * on a dark page is hard to read.
+     */
     color?: TagColor;
     /** Tag size. */
     size?: TagSize;
-    /** Use the light color variant. */
+    /**
+     * Use the light color variant. The light color has none, so
+     * `color="light"` with `isLight` looks the same as without it.
+     */
     isLight?: boolean;
     /** Renders a rounded tag. */
     isRounded?: boolean;

package/dist/types-cjs/helpers/scrollLock.d.ts

@@ -1,3 +1,15 @@
+/** A side of the window the page's scrollbar can take room on. */
+type ScrollLockSide = 'left' | 'right';
+/**
+ * The room the page's scrollbar gave back on one side while a lock is on,
+ * and `0px` otherwise, as a CSS value. An element fixed to that edge of the
+ * window adds it to its offset there, so it stays where it was as the
+ * scrollbar goes.
+ *
+ * @param side - The edge of the window the element is fixed to.
+ * @returns A `var()` with a `0px` fallback.
+ */
+export declare const scrollLockOffset: (side: ScrollLockSide) => string;
 /**
  * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is
  * true. Safe to call from multiple components at once: the page is only
@@ -7,3 +19,4 @@
  * @param active - Whether this caller wants the page's scrolling locked.
  */
 export declare function useScrollLock(active: boolean): void;
+export {};