@allxsmith/bestax-bulma 5.56.0 → 5.57.1

package/dist/esm/components/Reveal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reveal.js","sources":["../../../src/components/Reveal.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport type { PolymorphicComponentWithoutRef } from '../helpers/polymorphic';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\n\n/**\n * Animation styles available for the Reveal component.\n */\nexport type RevealAnimation =\n  | 'fade'\n  | 'fade-up'\n  | 'fade-down'\n  | 'slide-left'\n  | 'slide-right'\n  | 'zoom'\n  | 'flip';\n\n/**\n * The Reveal component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface RevealOwnProps extends BulmaClassesProps {\n  /** Animation style applied when the element enters the viewport. */\n  animation?: RevealAnimation;\n  /** Delay in milliseconds before the animation starts. Default: 0. */\n  delay?: number;\n  /** Animation duration in milliseconds. Default: 600. */\n  duration?: number;\n  /** Fraction (0-1) of the element that must be visible to trigger the reveal. Clamped to the 0-1 range; non-finite values fall back to `0.15`. */\n  threshold?: number;\n  /** Animate only the first time the element enters the viewport. If `false`, it re-animates on every entry/exit. */\n  once?: boolean;\n  /** Stagger direct children with an incrementing delay instead of animating this element as a single block. */\n  cascade?: boolean;\n  /** Milliseconds added to each successive child's delay when `cascade` is set. Default: 80. */\n  cascadeInterval?: number;\n  /** Content to reveal. */\n  children?: React.ReactNode;\n  /** Additional CSS classes. Applied to the observed element (the wrapper `div` when `as` is a component). */\n  className?: string;\n  /** Inline styles, merged after the animation's own. Applied to the observed element. */\n  style?: React.CSSProperties;\n}\n\n/**\n * Props for the Reveal component. The DOM attributes follow `as`.\n *\n * Reveal forwards no `ref`: it owns the node it observes for scroll\n * intersection, and when `as` is a component that node is a wrapper `div`\n * rather than the element `as` names — so a ref derived from `as` would point\n * at the wrong thing.\n */\nexport type RevealProps<T extends React.ElementType = 'div'> = RevealOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof RevealOwnProps | 'as'> & {\n    /** Element or component to render as. Default: 'div'. When `as` is a plain intrinsic tag (e.g. `'section'`), your `className`, `style`, and Bulma helper classes plus everything in `...rest` all land on that single element. When `as` is a component (e.g. `Section`, `Card`), scroll detection needs a real DOM node with a ref, so `Reveal` wraps it in an observed `div`: `className`/`style`/helper classes go on that wrapper `div`, while `...rest` (`id`, `aria-*`, `data-*`, event handlers) is forwarded to the inner component. */\n    as?: T;\n  };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `RevealProps<T>` above — the body cannot see through `T`.\n */\ntype RevealImplProps = RevealOwnProps & { as?: React.ElementType };\n\n/**\n * Detects the user's `prefers-reduced-motion` preference. Always `false` on\n * the server and on the very first client render, so SSR output and the\n * initial hydration pass always agree.\n *\n * @function\n * @returns {boolean} Whether the user has requested reduced motion.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !window.matchMedia) return undefined;\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- reads the live media query on mount\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * The `Reveal` component animates its content into view as it scrolls into the viewport, backed by `IntersectionObserver`.\n *\n * @function\n * @param {RevealProps} props - Props for the Reveal component.\n * @returns {JSX.Element} The rendered reveal wrapper.\n *\n * @example\n * // Fade a section up into view\n * <Reveal animation=\"fade-up\" as={Section}>\n *   <Title>Why Grass Doctor</Title>\n * </Reveal>\n *\n * @example\n * // Stagger a set of cards as they enter the viewport\n * <Reveal animation=\"fade-up\" cascade cascadeInterval={80}>\n *   {services.map(service => (\n *     <Card key={service.name}>{service.name}</Card>\n *   ))}\n * </Reveal>\n */\nfunction RevealImpl(revealProps: RevealProps) {\n  const {\n    animation = 'fade-up',\n    delay = 0,\n    duration = 600,\n    threshold = 0.15,\n    once = true,\n    as: Component = 'div',\n    cascade = false,\n    cascadeInterval = 80,\n    className,\n    style,\n    children,\n    ...props\n  } = revealProps as RevealImplProps;\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const classPrefix = useClassPrefix();\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const [isMounted, setIsMounted] = useState(false);\n  const [isRevealed, setIsRevealed] = useState(false);\n\n  // IntersectionObserver throws a RangeError for NaN or thresholds outside\n  // 0-1, so clamp valid numbers and fall back to the default for anything else.\n  const observerThreshold = Number.isFinite(threshold)\n    ? Math.min(Math.max(threshold, 0), 1)\n    : 0.15;\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- flips to true once mounted on the client so SSR/first-paint markup matches the server\n    setIsMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (prefersReducedMotion) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reduced motion skips straight to the revealed state\n      setIsRevealed(true);\n      return undefined;\n    }\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setIsRevealed(true);\n      return undefined;\n    }\n\n    // The ref callback attaches after this effect's first pass; it re-runs\n    // once `node` becomes available since it's a dependency.\n    if (!node) return undefined;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsRevealed(true);\n          if (once) observer.unobserve(node);\n        } else if (!once) {\n          setIsRevealed(false);\n        }\n      },\n      { threshold: observerThreshold }\n    );\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [node, prefersReducedMotion, once, observerThreshold]);\n\n  // Only apply the hidden/animating state once mounted on the client with\n  // motion allowed; otherwise render the final, visible state (SSR-safe).\n  const isAnimated = isMounted && !prefersReducedMotion;\n  const revealed = !isAnimated || isRevealed;\n\n  const itemAnimationClasses = prefixedClassNames(classPrefix, {\n    [`reveal-${animation}`]: isAnimated,\n    'is-revealed': revealed,\n  });\n\n  const combinedClasses = classNames(\n    usePrefixedClassNames('reveal', { 'is-cascade': cascade }),\n    !cascade && itemAnimationClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  const wrapperStyle: React.CSSProperties = cascade\n    ? { ...style }\n    : {\n        ...style,\n        transitionDelay: `${delay}ms`,\n        transitionDuration: `${duration}ms`,\n      };\n\n  const content = cascade\n    ? Children.toArray(children).map((child, index) => {\n        const itemStyle: React.CSSProperties = {\n          transitionDelay: `${delay + index * cascadeInterval}ms`,\n          transitionDuration: `${duration}ms`,\n        };\n\n        if (\n          isValidElement<{ className?: string; style?: React.CSSProperties }>(\n            child\n          )\n        ) {\n          return cloneElement(child, {\n            // Children.toArray always assigns a key, generating one from\n            // the position when the element doesn't already have one.\n            key: child.key,\n            className: classNames(itemAnimationClasses, child.props.className),\n            style: { ...itemStyle, ...child.props.style },\n          });\n        }\n\n        return (\n          <span key={index} className={itemAnimationClasses} style={itemStyle}>\n            {child}\n          </span>\n        );\n      })\n    : children;\n\n  // Scroll observation needs a DOM node this component OWNS — the observer and\n  // the animation classes both key off it. An intrinsic tag is that node, so\n  // the ref goes straight on it. A component passed via `as` is not: whatever\n  // it renders is its own business, and it may render several elements or\n  // none. So it gets wrapped in an observed `div`.\n  //\n  // Not a statement about ref forwarding. Several components in this library\n  // forward refs (#641 added four more), and that changes nothing here — a\n  // forwarded ref would still point at the target's node rather than at one\n  // this component controls.\n  if (typeof Component === 'string') {\n    // A plain createElement call sidesteps the combinatorial JSX prop types\n    // for `ref` across every possible intrinsic tag `as` could be.\n    return React.createElement(\n      Component,\n      {\n        ...rest,\n        ref: setNode,\n        className: combinedClasses,\n        style: wrapperStyle,\n      },\n      content\n    );\n  }\n\n  return (\n    <div ref={setNode} className={combinedClasses} style={wrapperStyle}>\n      <Component {...rest}>{content}</Component>\n    </div>\n  );\n}\n\nexport const Reveal = RevealImpl as PolymorphicComponentWithoutRef<\n  RevealOwnProps,\n  'div'\n>;\n\nReveal.displayName = 'Reveal';\n\nexport default Reveal;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Reveal.js","sources":["../../../src/components/Reveal.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport type { PolymorphicComponentWithoutRef } from '../helpers/polymorphic';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\n\n/**\n * Animation styles available for the Reveal component.\n */\nexport type RevealAnimation =\n  | 'fade'\n  | 'fade-up'\n  | 'fade-down'\n  | 'slide-left'\n  | 'slide-right'\n  | 'zoom'\n  | 'flip';\n\n/**\n * The Reveal component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface RevealOwnProps extends BulmaClassesProps {\n  /** Animation style applied when the element enters the viewport. */\n  animation?: RevealAnimation;\n  /** Delay in milliseconds before the animation starts. Default: 0. */\n  delay?: number;\n  /** Animation duration in milliseconds. Default: 600. */\n  duration?: number;\n  /** Fraction (0-1) of the element that must be visible to trigger the reveal. Clamped to the 0-1 range; non-finite values fall back to `0.15`. */\n  threshold?: number;\n  /** Animate only the first time the element enters the viewport. If `false`, it re-animates on every entry/exit. */\n  once?: boolean;\n  /** Stagger direct children with an incrementing delay instead of animating this element as a single block. */\n  cascade?: boolean;\n  /** Milliseconds added to each successive child's delay when `cascade` is set. Default: 80. */\n  cascadeInterval?: number;\n  /** Content to reveal. */\n  children?: React.ReactNode;\n  /** Additional CSS classes. Applied to the observed element (the wrapper `div` when `as` is a component). */\n  className?: string;\n  /** Inline styles, merged after the animation's own. Applied to the observed element. */\n  style?: React.CSSProperties;\n}\n\n/**\n * Props for the Reveal component. The DOM attributes follow `as`.\n *\n * Reveal forwards no `ref`: it owns the node it observes for scroll\n * intersection, and when `as` is a component that node is a wrapper `div`\n * rather than the element `as` names — so a ref derived from `as` would point\n * at the wrong thing.\n */\nexport type RevealProps<T extends React.ElementType = 'div'> = RevealOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof RevealOwnProps | 'as'> & {\n    /** Element or component to render as. Default: 'div'. When `as` is a plain intrinsic tag (e.g. `'section'`), your `className`, `style`, and Bulma helper classes plus everything in `...rest` all land on that single element. When `as` is a component (e.g. `Section`, `Card`), scroll detection needs a real DOM node with a ref, so `Reveal` wraps it in an observed `div`: `className`/`style`/helper classes go on that wrapper `div`, while `...rest` (`id`, `aria-*`, `data-*`, event handlers) is forwarded to the inner component. */\n    as?: T;\n  };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `RevealProps<T>` above — the body cannot see through `T`.\n */\ntype RevealImplProps = RevealOwnProps & { as?: React.ElementType };\n\n/**\n * Detects the user's `prefers-reduced-motion` preference. Always `false` on\n * the server and on the very first client render, so SSR output and the\n * initial hydration pass always agree.\n *\n * @function\n * @returns {boolean} Whether the user has requested reduced motion.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !window.matchMedia) return undefined;\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- reads the live media query on mount\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * The `Reveal` component animates its content into view as it scrolls into the viewport, backed by `IntersectionObserver`.\n *\n * @function\n * @param {RevealProps} props - Props for the Reveal component.\n * @returns {JSX.Element} The rendered reveal wrapper.\n *\n * @example\n * // Fade a section up into view\n * <Reveal animation=\"fade-up\" as={Section}>\n *   <Title>Why Grass Doctor</Title>\n * </Reveal>\n *\n * @example\n * // Stagger a set of cards as they enter the viewport\n * <Reveal animation=\"fade-up\" cascade cascadeInterval={80}>\n *   {services.map(service => (\n *     <Card key={service.name}>{service.name}</Card>\n *   ))}\n * </Reveal>\n */\nfunction RevealImpl(revealProps: RevealProps) {\n  const {\n    animation = 'fade-up',\n    delay = 0,\n    duration = 600,\n    threshold = 0.15,\n    once = true,\n    as: Component = 'div',\n    cascade = false,\n    cascadeInterval = 80,\n    className,\n    style,\n    children,\n    ...props\n  } = revealProps as RevealImplProps;\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const classPrefix = useClassPrefix();\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const [isMounted, setIsMounted] = useState(false);\n  const [isRevealed, setIsRevealed] = useState(false);\n\n  // IntersectionObserver throws a RangeError for NaN or thresholds outside\n  // 0-1, so clamp valid numbers and fall back to the default for anything else.\n  const observerThreshold = Number.isFinite(threshold)\n    ? Math.min(Math.max(threshold, 0), 1)\n    : 0.15;\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- flips to true once mounted on the client so SSR/first-paint markup matches the server\n    setIsMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (prefersReducedMotion) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reduced motion skips straight to the revealed state\n      setIsRevealed(true);\n      return undefined;\n    }\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setIsRevealed(true);\n      return undefined;\n    }\n\n    // The ref callback attaches after this effect's first pass; it re-runs\n    // once `node` becomes available since it's a dependency.\n    if (!node) return undefined;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsRevealed(true);\n          if (once) observer.unobserve(node);\n        } else if (!once) {\n          setIsRevealed(false);\n        }\n      },\n      { threshold: observerThreshold }\n    );\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [node, prefersReducedMotion, once, observerThreshold]);\n\n  // Only apply the hidden/animating state once mounted on the client with\n  // motion allowed; otherwise render the final, visible state (SSR-safe).\n  const isAnimated = isMounted && !prefersReducedMotion;\n  const revealed = !isAnimated || isRevealed;\n\n  const itemAnimationClasses = prefixedClassNames(classPrefix, {\n    [`reveal-${animation}`]: isAnimated,\n    'is-revealed': revealed,\n  });\n\n  const combinedClasses = classNames(\n    usePrefixedClassNames('reveal', { 'is-cascade': cascade }),\n    !cascade && itemAnimationClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  const wrapperStyle: React.CSSProperties = cascade\n    ? { ...style }\n    : {\n        ...style,\n        transitionDelay: `${delay}ms`,\n        transitionDuration: `${duration}ms`,\n      };\n\n  const content = cascade\n    ? Children.toArray(children).map((child, index) => {\n        const itemStyle: React.CSSProperties = {\n          transitionDelay: `${delay + index * cascadeInterval}ms`,\n          transitionDuration: `${duration}ms`,\n        };\n\n        if (\n          isValidElement<{ className?: string; style?: React.CSSProperties }>(\n            child\n          )\n        ) {\n          return cloneElement(child, {\n            // Children.toArray always assigns a key, generating one from\n            // the position when the element doesn't already have one.\n            key: child.key,\n            className: classNames(itemAnimationClasses, child.props.className),\n            style: { ...itemStyle, ...child.props.style },\n          });\n        }\n\n        return (\n          <span key={index} className={itemAnimationClasses} style={itemStyle}>\n            {child}\n          </span>\n        );\n      })\n    : children;\n\n  // Scroll observation needs a DOM node this component OWNS — the observer and\n  // the animation classes both key off it. An intrinsic tag is that node, so\n  // the ref goes straight on it. A component passed via `as` is not: whatever\n  // it renders is its own business, and it may render several elements or\n  // none. So it gets wrapped in an observed `div`.\n  //\n  // Not a statement about ref forwarding. Several components in this library\n  // forward refs (#641 added four more), and that changes nothing here — a\n  // forwarded ref would still point at the target's node rather than at one\n  // this component controls.\n  if (typeof Component === 'string') {\n    // A plain createElement call sidesteps the combinatorial JSX prop types\n    // for `ref` across every possible intrinsic tag `as` could be.\n    return React.createElement(\n      Component,\n      {\n        ...rest,\n        ref: setNode,\n        className: combinedClasses,\n        style: wrapperStyle,\n      },\n      content\n    );\n  }\n\n  return (\n    <div ref={setNode} className={combinedClasses} style={wrapperStyle}>\n      <Component {...rest}>{content}</Component>\n    </div>\n  );\n}\n\nexport const Reveal = RevealImpl as PolymorphicComponentWithoutRef<\n  RevealOwnProps,\n  'div'\n>;\n\nReveal.displayName = 'Reveal';\n\nexport default Reveal;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/ScrollArea.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useRef, useCallback, useState } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';

package/dist/esm/components/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { warnOnce } from '../helpers/devWarnings';\n\n/** Which way the content scrolls. */\nexport type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';\n\n/** When the scrollbars show. */\nexport type ScrollAreaScrollbars = 'auto' | 'hover' | 'always';\n\n/** An edge of the content: the block's top and bottom, the line's start and end. */\nexport type ScrollAreaEdge = 'top' | 'bottom' | 'start' | 'end';\n\nconst EDGES: readonly ScrollAreaEdge[] = ['top', 'bottom', 'start', 'end'];\n\n// Layout can land a fraction of a pixel short of an edge, so anything closer\n// than this counts as there.\nconst SLACK = 1;\n\n/**\n * Props for the ScrollArea component.\n *\n * @helperProps The helper props go on the outer `<div>`, the `.scroll-area`\n * frame, with `className` and `style`. The `ref`, the name, `onScroll` and\n * the other attributes go on the `<div>` inside it, the viewport that\n * scrolls.\n *\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the viewport, the element that scrolls, for `scrollTo` and the like.\n * @extraProp {string} [aria-label] - Names the region, such as \"Release notes\". It needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither. The name is rendered with the region's role, while the content overflows, since ARIA doesn't allow naming a plain `div`.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading that names the region, in place of `aria-label`.\n * @extraProp {React.UIEventHandler<HTMLDivElement>} [onScroll] - Called as the viewport scrolls.\n */\nexport interface ScrollAreaProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role' | 'tabIndex'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes for the outer frame. */\n  className?: string;\n  /** Inline styles for the outer frame. */\n  style?: React.CSSProperties;\n  /** What scrolls. */\n  children?: React.ReactNode;\n  /**\n   * The area's height. A number is pixels, and a string is any CSS length\n   * (`\"20rem\"`, `\"50vh\"`, `\"100%\"`).\n   */\n  height?: number | string;\n  /**\n   * The height it grows to with its content, then scrolls past. A number is\n   * pixels. Use it in place of `height` for an area that's only as tall as\n   * it needs to be.\n   */\n  maxHeight?: number | string;\n  /**\n   * Which way it scrolls. `vertical` and `horizontal` clip the other axis,\n   * and `both` scrolls whichever overflows.\n   */\n  orientation?: ScrollAreaOrientation;\n  /**\n   * When the scrollbars show. `auto`: whenever the content overflows, the\n   * way the system shows them. `hover`: colorless until the pointer is over\n   * the area or focus is in it, which hides that the area scrolls until\n   * then, so keep it for places where the layout makes that plain.\n   * `always`: on every axis it scrolls, even when the content fits. Where the\n   * system draws its bars over the content (macOS by default, phones and\n   * tablets), they still show only while you scroll, and in forced colors\n   * they always show.\n   */\n  showScrollbars?: ScrollAreaScrollbars;\n  /**\n   * Keeps room for the vertical scrollbar whether or not it shows, so the\n   * content doesn't shift when it starts to overflow. It does nothing where\n   * the system draws its bars over the content.\n   */\n  hasStableGutter?: boolean;\n  /**\n   * Fades the content out toward each edge that has more past it, without\n   * fading the scrollbar. It's off in forced colors and when the user asks\n   * for more contrast.\n   */\n  hasFade?: boolean;\n  /**\n   * Called with the edge when scrolling reaches it, once each time it\n   * arrives, such as to load older messages at the top. It isn't called for\n   * the edge the area starts at, or when the content changes size.\n   */\n  onEdgeReach?: (edge: ScrollAreaEdge) => void;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/** What a measurement of the viewport found. */\ninterface Measured {\n  /** Overflows on an axis it scrolls. */\n  overflowing: boolean;\n  /** Each edge that has more content past it. */\n  edges: Record<ScrollAreaEdge, boolean>;\n  /** The vertical scrollbar's width, and the horizontal one's height. */\n  barInline: number;\n  barBlock: number;\n}\n\nconst sameMeasure = (a: Measured | null, b: Measured): boolean =>\n  !!a &&\n  a.overflowing === b.overflowing &&\n  a.barInline === b.barInline &&\n  a.barBlock === b.barBlock &&\n  EDGES.every(edge => a.edges[edge] === b.edges[edge]);\n\n/**\n * The `ScrollArea` component renders a box whose content scrolls inside it, on the browser's own scrollbars in Bulma's colors.\n *\n * The bars are the system's, made thin and colored from Bulma's tokens, so\n * they follow dark mode and keep the system's own settings. While the\n * content overflows, the viewport is a region you can tab to and scroll by\n * keyboard, Safari included, named by `aria-label` or `aria-labelledby`.\n * While it fits, it's a plain box. Setting the bars' colors turns off any\n * `::-webkit-scrollbar` styles inside it.\n *\n * @function\n * @param {ScrollAreaProps} props - Props for the ScrollArea component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the viewport.\n * @returns {JSX.Element} The rendered scroll area.\n *\n * @example\n * <ScrollArea height={240} aria-label=\"Release notes\">\n *   <Content>…</Content>\n * </ScrollArea>\n *\n * @example\n * <ScrollArea maxHeight=\"20rem\" aria-label=\"Messages\" hasFade>\n *   …\n * </ScrollArea>\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      style,\n      textColor,\n      bgColor,\n      height,\n      maxHeight,\n      orientation = 'both',\n      showScrollbars = 'auto',\n      hasStableGutter,\n      hasFade,\n      onEdgeReach,\n      onScroll,\n      onFocus,\n      onBlur,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n\n    const frameClass = usePrefixedClassNames('scroll-area', {\n      'is-vertical': orientation === 'vertical',\n      'is-horizontal': orientation === 'horizontal',\n      'has-hover-scrollbars': showScrollbars === 'hover',\n      'has-visible-scrollbars': showScrollbars === 'always',\n      'has-stable-gutter': !!hasStableGutter,\n      'has-fade': !!hasFade,\n    });\n    const viewportClass = usePrefixedClassNames('scroll-area-viewport');\n\n    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'ScrollArea:unnamed',\n          '[bestax-bulma] <ScrollArea> has no accessible name. Pass ' +\n            'aria-label or aria-labelledby, so a screen reader can say what ' +\n            'took focus when the area overflows.'\n        );\n      }\n    }, [named]);\n\n    const viewportRef = useRef<HTMLDivElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLDivElement | null) => {\n        viewportRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // Nothing is known about the overflow until the client measures it, so\n    // the server renders a plain scroller and hydrates as one.\n    const [measured, setMeasured] = useState<Measured | null>(null);\n    const [focused, setFocused] = useState(false);\n    // The last measurement, read by the scroll handler to see which edges\n    // it just reached, and the direction and bar sizes, which only change\n    // with layout, so a scroll doesn't read computed styles.\n    const lastRef = useRef<Measured | null>(null);\n    const layoutRef = useRef({ rtl: false, barInline: 0, barBlock: 0 });\n    const onEdgeReachRef = useLatestRef(onEdgeReach);\n\n    const measure = useCallback(\n      (fromScroll: boolean) => {\n        const el = viewportRef.current;\n        /* istanbul ignore next: measuring only runs while it's mounted */\n        if (!el) return;\n        const scrollsY = orientation !== 'horizontal';\n        const scrollsX = orientation !== 'vertical';\n        const maxTop = el.scrollHeight - el.clientHeight;\n        const maxLeft = el.scrollWidth - el.clientWidth;\n        const overflowY = scrollsY && maxTop > SLACK;\n        const overflowX = scrollsX && maxLeft > SLACK;\n        // Right to left, scrollLeft runs from 0 at the start to negative.\n        const fromStart = layoutRef.current.rtl\n          ? -el.scrollLeft\n          : el.scrollLeft;\n        const next: Measured = {\n          overflowing: overflowY || overflowX,\n          edges: {\n            top: overflowY && el.scrollTop > SLACK,\n            bottom: overflowY && maxTop - el.scrollTop > SLACK,\n            start: overflowX && fromStart > SLACK,\n            end: overflowX && maxLeft - fromStart > SLACK,\n          },\n          barInline: layoutRef.current.barInline,\n          barBlock: layoutRef.current.barBlock,\n        };\n        const last = lastRef.current;\n        lastRef.current = next;\n        if (fromScroll && last) {\n          for (const edge of EDGES) {\n            if (last.edges[edge] && !next.edges[edge]) {\n              onEdgeReachRef.current?.(edge);\n            }\n          }\n        }\n        setMeasured(prev => (sameMeasure(prev, next) ? prev : next));\n      },\n      [orientation, onEdgeReachRef]\n    );\n\n    // Layout: the direction and the bars' sizes, then the overflow. It runs\n    // before paint, and again whenever the viewport or anything in it\n    // changes size, or the children change.\n    useClientLayoutEffect(() => {\n      const el = viewportRef.current;\n      /* istanbul ignore next: the effect only runs once it's mounted */\n      if (!el) return;\n      const relayout = () => {\n        const cs = getComputedStyle(el);\n        const px = (value: string) => parseFloat(value) || 0;\n        layoutRef.current = {\n          rtl: cs.direction === 'rtl',\n          barInline: Math.max(\n            0,\n            el.offsetWidth -\n              el.clientWidth -\n              px(cs.borderLeftWidth) -\n              px(cs.borderRightWidth)\n          ),\n          barBlock: Math.max(\n            0,\n            el.offsetHeight -\n              el.clientHeight -\n              px(cs.borderTopWidth) -\n              px(cs.borderBottomWidth)\n          ),\n        };\n        measure(false);\n      };\n      relayout();\n      if (typeof ResizeObserver === 'undefined') return;\n      const resizes = new ResizeObserver(relayout);\n      const observeAll = () => {\n        resizes.disconnect();\n        resizes.observe(el);\n        for (const child of Array.from(el.children)) resizes.observe(child);\n      };\n      observeAll();\n      // Content that changes can overflow before any size is reported: a\n      // child added or taken away, or text React rewrites in place, which\n      // resizes no element when the area's height is fixed, and inline\n      // children, which a ResizeObserver doesn't report at all.\n      const mutations =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(records => {\n              if (\n                records.some(\n                  record => record.target === el && record.type === 'childList'\n                )\n              ) {\n                observeAll();\n              }\n              relayout();\n            });\n      mutations?.observe(el, {\n        childList: true,\n        characterData: true,\n        subtree: true,\n      });\n      return () => {\n        resizes.disconnect();\n        mutations?.disconnect();\n      };\n    }, [measure]);\n\n    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n      onScroll?.(event);\n      measure(true);\n    };\n    const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n      if (event.target === event.currentTarget) setFocused(true);\n    };\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      if (event.target === event.currentTarget) setFocused(false);\n    };\n\n    // A tab stop while it overflows. Taking tabIndex off the focused element\n    // would drop focus to the page, so a viewport that stops overflowing\n    // keeps it until focus leaves.\n    const isRegion = !!measured?.overflowing || focused;\n    // The name goes with the role: ARIA prohibits naming a plain div.\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      ...viewportRest\n    } = rest;\n    const edgeAttributes: Record<string, string> = {};\n    if (measured) {\n      for (const edge of EDGES) {\n        if (measured.edges[edge]) edgeAttributes[`data-overflow-${edge}`] = '';\n      }\n    }\n    const viewportStyle = measured\n      ? ({\n          '--scroll-area-bar-inline-size': `${measured.barInline}px`,\n          '--scroll-area-bar-block-size': `${measured.barBlock}px`,\n        } as React.CSSProperties)\n      : undefined;\n\n    return (\n      <div\n        className={classNames(frameClass, bulmaHelperClasses, className)}\n        style={\n          height !== undefined || maxHeight !== undefined\n            ? {\n                ...style,\n                // Only what's given, so `maxHeight` alone keeps a height\n                // the style sets.\n                ...(height !== undefined && { height }),\n                ...(maxHeight !== undefined && { maxHeight }),\n              }\n            : style\n        }\n      >\n        <div\n          ref={setRefs}\n          className={viewportClass}\n          style={viewportStyle}\n          {...viewportRest}\n          {...edgeAttributes}\n          role={isRegion ? 'region' : undefined}\n          aria-label={isRegion ? ariaLabel : undefined}\n          aria-labelledby={isRegion ? ariaLabelledby : undefined}\n          tabIndex={isRegion ? 0 : undefined}\n          onScroll={handleScroll}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n\nScrollArea.displayName = 'ScrollArea';\n\nexport default ScrollArea;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { warnOnce } from '../helpers/devWarnings';\n\n/** Which way the content scrolls. */\nexport type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';\n\n/** When the scrollbars show. */\nexport type ScrollAreaScrollbars = 'auto' | 'hover' | 'always';\n\n/** An edge of the content: the block's top and bottom, the line's start and end. */\nexport type ScrollAreaEdge = 'top' | 'bottom' | 'start' | 'end';\n\nconst EDGES: readonly ScrollAreaEdge[] = ['top', 'bottom', 'start', 'end'];\n\n// Layout can land a fraction of a pixel short of an edge, so anything closer\n// than this counts as there.\nconst SLACK = 1;\n\n/**\n * Props for the ScrollArea component.\n *\n * @helperProps The helper props go on the outer `<div>`, the `.scroll-area`\n * frame, with `className` and `style`. The `ref`, the name, `onScroll` and\n * the other attributes go on the `<div>` inside it, the viewport that\n * scrolls.\n *\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the viewport, the element that scrolls, for `scrollTo` and the like.\n * @extraProp {string} [aria-label] - Names the region, such as \"Release notes\". It needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither. The name is rendered with the region's role, while the content overflows, since ARIA doesn't allow naming a plain `div`.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading that names the region, in place of `aria-label`.\n * @extraProp {React.UIEventHandler<HTMLDivElement>} [onScroll] - Called as the viewport scrolls.\n */\nexport interface ScrollAreaProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role' | 'tabIndex'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes for the outer frame. */\n  className?: string;\n  /** Inline styles for the outer frame. */\n  style?: React.CSSProperties;\n  /** What scrolls. */\n  children?: React.ReactNode;\n  /**\n   * The area's height. A number is pixels, and a string is any CSS length\n   * (`\"20rem\"`, `\"50vh\"`, `\"100%\"`).\n   */\n  height?: number | string;\n  /**\n   * The height it grows to with its content, then scrolls past. A number is\n   * pixels. Use it in place of `height` for an area that's only as tall as\n   * it needs to be.\n   */\n  maxHeight?: number | string;\n  /**\n   * Which way it scrolls. `vertical` and `horizontal` clip the other axis,\n   * and `both` scrolls whichever overflows.\n   */\n  orientation?: ScrollAreaOrientation;\n  /**\n   * When the scrollbars show. `auto`: whenever the content overflows, the\n   * way the system shows them. `hover`: colorless until the pointer is over\n   * the area or focus is in it, which hides that the area scrolls until\n   * then, so keep it for places where the layout makes that plain.\n   * `always`: on every axis it scrolls, even when the content fits. Where the\n   * system draws its bars over the content (macOS by default, phones and\n   * tablets), they still show only while you scroll, and in forced colors\n   * they always show.\n   */\n  showScrollbars?: ScrollAreaScrollbars;\n  /**\n   * Keeps room for the vertical scrollbar whether or not it shows, so the\n   * content doesn't shift when it starts to overflow. It does nothing where\n   * the system draws its bars over the content.\n   */\n  hasStableGutter?: boolean;\n  /**\n   * Fades the content out toward each edge that has more past it, without\n   * fading the scrollbar. It's off in forced colors and when the user asks\n   * for more contrast.\n   */\n  hasFade?: boolean;\n  /**\n   * Called with the edge when scrolling reaches it, once each time it\n   * arrives, such as to load older messages at the top. It isn't called for\n   * the edge the area starts at, or when the content changes size.\n   */\n  onEdgeReach?: (edge: ScrollAreaEdge) => void;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/** What a measurement of the viewport found. */\ninterface Measured {\n  /** Overflows on an axis it scrolls. */\n  overflowing: boolean;\n  /** Each edge that has more content past it. */\n  edges: Record<ScrollAreaEdge, boolean>;\n  /** The vertical scrollbar's width, and the horizontal one's height. */\n  barInline: number;\n  barBlock: number;\n}\n\nconst sameMeasure = (a: Measured | null, b: Measured): boolean =>\n  !!a &&\n  a.overflowing === b.overflowing &&\n  a.barInline === b.barInline &&\n  a.barBlock === b.barBlock &&\n  EDGES.every(edge => a.edges[edge] === b.edges[edge]);\n\n/**\n * The `ScrollArea` component renders a box whose content scrolls inside it, on the browser's own scrollbars in Bulma's colors.\n *\n * The bars are the system's, made thin and colored from Bulma's tokens, so\n * they follow dark mode and keep the system's own settings. While the\n * content overflows, the viewport is a region you can tab to and scroll by\n * keyboard, Safari included, named by `aria-label` or `aria-labelledby`.\n * While it fits, it's a plain box. Setting the bars' colors turns off any\n * `::-webkit-scrollbar` styles inside it.\n *\n * @function\n * @param {ScrollAreaProps} props - Props for the ScrollArea component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the viewport.\n * @returns {JSX.Element} The rendered scroll area.\n *\n * @example\n * <ScrollArea height={240} aria-label=\"Release notes\">\n *   <Content>…</Content>\n * </ScrollArea>\n *\n * @example\n * <ScrollArea maxHeight=\"20rem\" aria-label=\"Messages\" hasFade>\n *   …\n * </ScrollArea>\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      style,\n      textColor,\n      bgColor,\n      height,\n      maxHeight,\n      orientation = 'both',\n      showScrollbars = 'auto',\n      hasStableGutter,\n      hasFade,\n      onEdgeReach,\n      onScroll,\n      onFocus,\n      onBlur,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n\n    const frameClass = usePrefixedClassNames('scroll-area', {\n      'is-vertical': orientation === 'vertical',\n      'is-horizontal': orientation === 'horizontal',\n      'has-hover-scrollbars': showScrollbars === 'hover',\n      'has-visible-scrollbars': showScrollbars === 'always',\n      'has-stable-gutter': !!hasStableGutter,\n      'has-fade': !!hasFade,\n    });\n    const viewportClass = usePrefixedClassNames('scroll-area-viewport');\n\n    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'ScrollArea:unnamed',\n          '[bestax-bulma] <ScrollArea> has no accessible name. Pass ' +\n            'aria-label or aria-labelledby, so a screen reader can say what ' +\n            'took focus when the area overflows.'\n        );\n      }\n    }, [named]);\n\n    const viewportRef = useRef<HTMLDivElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLDivElement | null) => {\n        viewportRef.current = node;\n        if (typeof ref === 'function') return ref(node);\n        if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    // Nothing is known about the overflow until the client measures it, so\n    // the server renders a plain scroller and hydrates as one.\n    const [measured, setMeasured] = useState<Measured | null>(null);\n    const [focused, setFocused] = useState(false);\n    // The last measurement, read by the scroll handler to see which edges\n    // it just reached, and the direction and bar sizes, which only change\n    // with layout, so a scroll doesn't read computed styles.\n    const lastRef = useRef<Measured | null>(null);\n    const layoutRef = useRef({ rtl: false, barInline: 0, barBlock: 0 });\n    const onEdgeReachRef = useLatestRef(onEdgeReach);\n\n    const measure = useCallback(\n      (fromScroll: boolean) => {\n        const el = viewportRef.current;\n        /* istanbul ignore next: measuring only runs while it's mounted */\n        if (!el) return;\n        const scrollsY = orientation !== 'horizontal';\n        const scrollsX = orientation !== 'vertical';\n        const maxTop = el.scrollHeight - el.clientHeight;\n        const maxLeft = el.scrollWidth - el.clientWidth;\n        const overflowY = scrollsY && maxTop > SLACK;\n        const overflowX = scrollsX && maxLeft > SLACK;\n        // Right to left, scrollLeft runs from 0 at the start to negative.\n        const fromStart = layoutRef.current.rtl\n          ? -el.scrollLeft\n          : el.scrollLeft;\n        const next: Measured = {\n          overflowing: overflowY || overflowX,\n          edges: {\n            top: overflowY && el.scrollTop > SLACK,\n            bottom: overflowY && maxTop - el.scrollTop > SLACK,\n            start: overflowX && fromStart > SLACK,\n            end: overflowX && maxLeft - fromStart > SLACK,\n          },\n          barInline: layoutRef.current.barInline,\n          barBlock: layoutRef.current.barBlock,\n        };\n        const last = lastRef.current;\n        lastRef.current = next;\n        if (fromScroll && last) {\n          for (const edge of EDGES) {\n            if (last.edges[edge] && !next.edges[edge]) {\n              onEdgeReachRef.current?.(edge);\n            }\n          }\n        }\n        setMeasured(prev => (sameMeasure(prev, next) ? prev : next));\n      },\n      [orientation, onEdgeReachRef]\n    );\n\n    // Layout: the direction and the bars' sizes, then the overflow. It runs\n    // before paint, and again whenever the viewport or anything in it\n    // changes size, or the children change.\n    useClientLayoutEffect(() => {\n      const el = viewportRef.current;\n      /* istanbul ignore next: the effect only runs once it's mounted */\n      if (!el) return;\n      const relayout = () => {\n        const cs = getComputedStyle(el);\n        const px = (value: string) => parseFloat(value) || 0;\n        layoutRef.current = {\n          rtl: cs.direction === 'rtl',\n          barInline: Math.max(\n            0,\n            el.offsetWidth -\n              el.clientWidth -\n              px(cs.borderLeftWidth) -\n              px(cs.borderRightWidth)\n          ),\n          barBlock: Math.max(\n            0,\n            el.offsetHeight -\n              el.clientHeight -\n              px(cs.borderTopWidth) -\n              px(cs.borderBottomWidth)\n          ),\n        };\n        measure(false);\n      };\n      relayout();\n      if (typeof ResizeObserver === 'undefined') return;\n      const resizes = new ResizeObserver(relayout);\n      const observeAll = () => {\n        resizes.disconnect();\n        resizes.observe(el);\n        for (const child of Array.from(el.children)) resizes.observe(child);\n      };\n      observeAll();\n      // Content that changes can overflow before any size is reported: a\n      // child added or taken away, or text React rewrites in place, which\n      // resizes no element when the area's height is fixed, and inline\n      // children, which a ResizeObserver doesn't report at all.\n      const mutations =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(records => {\n              if (\n                records.some(\n                  record => record.target === el && record.type === 'childList'\n                )\n              ) {\n                observeAll();\n              }\n              relayout();\n            });\n      mutations?.observe(el, {\n        childList: true,\n        characterData: true,\n        subtree: true,\n      });\n      return () => {\n        resizes.disconnect();\n        mutations?.disconnect();\n      };\n    }, [measure]);\n\n    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n      onScroll?.(event);\n      measure(true);\n    };\n    const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n      if (event.target === event.currentTarget) setFocused(true);\n    };\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      if (event.target === event.currentTarget) setFocused(false);\n    };\n\n    // A tab stop while it overflows. Taking tabIndex off the focused element\n    // would drop focus to the page, so a viewport that stops overflowing\n    // keeps it until focus leaves.\n    const isRegion = !!measured?.overflowing || focused;\n    // The name goes with the role: ARIA prohibits naming a plain div.\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      ...viewportRest\n    } = rest;\n    const edgeAttributes: Record<string, string> = {};\n    if (measured) {\n      for (const edge of EDGES) {\n        if (measured.edges[edge]) edgeAttributes[`data-overflow-${edge}`] = '';\n      }\n    }\n    const viewportStyle = measured\n      ? ({\n          '--scroll-area-bar-inline-size': `${measured.barInline}px`,\n          '--scroll-area-bar-block-size': `${measured.barBlock}px`,\n        } as React.CSSProperties)\n      : undefined;\n\n    return (\n      <div\n        className={classNames(frameClass, bulmaHelperClasses, className)}\n        style={\n          height !== undefined || maxHeight !== undefined\n            ? {\n                ...style,\n                // Only what's given, so `maxHeight` alone keeps a height\n                // the style sets.\n                ...(height !== undefined && { height }),\n                ...(maxHeight !== undefined && { maxHeight }),\n              }\n            : style\n        }\n      >\n        <div\n          ref={setRefs}\n          className={viewportClass}\n          style={viewportStyle}\n          {...viewportRest}\n          {...edgeAttributes}\n          role={isRegion ? 'region' : undefined}\n          aria-label={isRegion ? ariaLabel : undefined}\n          aria-labelledby={isRegion ? ariaLabelledby : undefined}\n          tabIndex={isRegion ? 0 : undefined}\n          onScroll={handleScroll}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n\nScrollArea.displayName = 'ScrollArea';\n\nexport default ScrollArea;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/SegmentedControl.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, useState, useCallback, useEffect, useContext, useRef } from 'react';
 import { Button } from '../elements/Button.js';

package/dist/esm/components/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, type ButtonOwnProps } from '../elements/Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\n\n// Spelled out so the API page can list the values. The tests hold it to\n// ToggleButton's, since the checked segment fills the way a pressed toggle\n// does and for the same reasons.\n/**\n * The fills the checked segment takes: `Button`'s colors, minus `text` and\n * `ghost`, which don't fill, and `white`, `light`, `dark` and `black`, which in\n * one theme or the other fill about as light or dark as an unchecked segment\n * already is. The same set `ToggleButton` takes.\n */\nexport type SegmentedControlColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n/** A mounted segment, as the group needs to know it for the tab stop. */\ninterface SegmentRecord {\n  value: string;\n  disabled: boolean;\n  node: HTMLButtonElement;\n}\n\ninterface SegmentedControlContextValue {\n  /** The checked segment's value, or `undefined` while none is. */\n  checked: string | undefined;\n  /** The segment that holds `tabIndex={0}`, or `undefined` for none. */\n  tabStop: string | undefined;\n  /** The fill the checked segment takes. */\n  color: SegmentedControlColor;\n  /** Checks a segment, unless it's checked already. */\n  select: (value: string) => void;\n  /** Records which segment has focus, so the tab stop can follow it. */\n  setFocused: (value: string | undefined) => void;\n  register: (record: SegmentRecord) => () => void;\n}\n\n// Not exported, so it stays out of the public API that `index.ts` re-exports.\nconst SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\n/** Sorts mounted segments into the order they sit in the page. */\nconst inDocumentOrder = (a: SegmentRecord, b: SegmentRecord) =>\n  a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING\n    ? -1\n    : 1;\n\n/** How far each arrow key moves along the row. */\nconst STEPS: Record<string, number> = {\n  ArrowRight: 1,\n  ArrowDown: 1,\n  ArrowLeft: -1,\n  ArrowUp: -1,\n};\n\n/**\n * The segment a key moves to, found among the segments of the same group in\n * DOM order, skipping disabled ones and wrapping at either end. `undefined`\n * for a key the group leaves alone, when no enabled segment is left, or when\n * the segment isn't inside its row in the page, as a portaled one isn't.\n */\nfunction segmentFor(\n  current: HTMLButtonElement,\n  key: string\n): HTMLButtonElement | undefined {\n  const group = current.closest('[role=\"radiogroup\"]');\n  if (!group) return undefined;\n  const segments = Array.from(\n    group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')\n  );\n  const enabled = segments.filter(segment => !segment.disabled);\n\n  if (key === 'Home') return enabled[0];\n  if (key === 'End') return enabled[enabled.length - 1];\n\n  const step = STEPS[key];\n  if (!step) return undefined;\n  const at = segments.indexOf(current);\n  for (let i = 1; i <= segments.length; i += 1) {\n    const candidate =\n      segments[(at + step * i + segments.length) % segments.length];\n    if (!candidate.disabled) return candidate;\n  }\n  return undefined;\n}\n\n// ---------------------------------------------------------------------------\n// SegmentedControl (root)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the SegmentedControl component. The helper props, the other `<div>`\n * attributes and the `ref` all land on the row.\n *\n * @extraProp {string} [aria-label] - Names the group for a screen reader, such as \"Text alignment\". A radio group needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading or label that names the group, in place of `aria-label`.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the row's `<div>`.\n */\nexport interface SegmentedControlProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | 'color' | 'role'\n    >,\n    Omit<\n      BulmaClassesProps,\n      'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'\n    > {\n  /**\n   * The checked segment's `value`, when you hold the state. Setting it makes\n   * the group controlled: picking a segment only calls `onChange`, and nothing\n   * changes until you pass the new value. `null` checks nothing, with the\n   * tab stop `defaultValue` describes for that. Pick this or `defaultValue`\n   * for the group's lifetime.\n   */\n  value?: string | null;\n  /**\n   * The segment checked to begin with, when the group holds its own state.\n   * Leave it out and nothing is checked until someone picks one, and Tab\n   * lands on the first enabled segment meanwhile. That fallback takes hold\n   * once the row has rendered in the browser: server markup with nothing\n   * checked has no tab stop until then, while a checked segment is the stop\n   * from the server markup on.\n   */\n  defaultValue?: string;\n  /**\n   * Called with the newly checked segment's `value`, whether or not `value`\n   * is set. The arrow keys, Home and End check the segment they move to, so\n   * each of those calls it too: the check follows focus, as in a native radio\n   * group. Pressing the checked segment again doesn't call it, since a\n   * segmented control can't be cleared: one stays checked once one is.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The checked segment's fill. The others are plain buttons, so the fill is\n   * the difference people see. Takes the same colors as `ToggleButton`, for\n   * the same reason: `white`, `light`, `dark` and `black` fill about as light\n   * or dark as a plain button already is in one theme or the other.\n   */\n  color?: SegmentedControlColor;\n  /** Size of every segment, through Bulma's `are-<size>` on the row. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Joins the segments into one row with no gap between them, Bulma's\n   * `has-addons`. Set it to `false` for separate buttons.\n   */\n  hasAddons?: boolean;\n  /** Centers the row. */\n  isCentered?: boolean;\n  /** Aligns the row to the right. */\n  isRight?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** The `SegmentedControl.Segment`s, each with a `value` of its own. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.\n *\n * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and\n * marked `is-selected`, the way Bulma's button docs show it. To a screen\n * reader it's `role=\"radiogroup\"`, with `role=\"radio\"` and `aria-checked` on\n * each segment, which is how the APG toolbar example marks its alignment\n * buttons. The keys follow the APG radio group: the row is one tab stop, the\n * arrow keys move to the next or previous enabled segment and check it,\n * wrapping at either end, Home and End go to the first and last, and Space\n * checks the focused segment. Once a segment is checked, one always is.\n *\n * It carries no form value. A choice that's sent with a form is `Radios`.\n *\n * @function\n * @param {SegmentedControlProps} props - Props for the SegmentedControl component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.\n * @returns {JSX.Element} The rendered segmented control.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}\n * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}\n *\n * @example\n * <SegmentedControl aria-label=\"Text alignment\" defaultValue=\"left\">\n *   <SegmentedControl.Segment value=\"left\">Left</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"center\">Center</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"right\">Right</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      value,\n      defaultValue,\n      onChange,\n      color = 'link',\n      size,\n      hasAddons = true,\n      isCentered,\n      isRight,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n    // Controlled vs uncontrolled, as in Tabs and Collapses.\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const checked = isControlled ? (value ?? undefined) : internalValue;\n\n    const select = (next: string) => {\n      if (next === checked) return;\n      if (!isControlled) setInternalValue(next);\n      onChange?.(next);\n    };\n\n    // The segments mount and register from an effect, so the group knows\n    // which can hold the tab stop wherever in the tree they sit.\n    const [segments, setSegments] = useState<SegmentRecord[]>([]);\n    const register = useCallback((record: SegmentRecord) => {\n      setSegments(prev => [...prev, record]);\n      return () => setSegments(prev => prev.filter(r => r !== record));\n    }, []);\n    const [focused, setFocused] = useState<string | undefined>();\n\n    // The first enabled segment in the page, sorted when it's read rather\n    // than when a segment registers, so reordered segments are seen too. It's\n    // read after the commit: a render runs before React moves the nodes, so\n    // sorting there would find the old order.\n    const [firstEnabled, setFirstEnabled] = useState<string | undefined>();\n    useClientLayoutEffect(() => {\n      const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);\n      setFirstEnabled(inPage[0]?.value);\n    }, [segments, children]);\n\n    // One tab stop for the row (roving tabindex). While focus is in the row\n    // the stop follows it, so Tab leaves from wherever focus is even when a\n    // controlled group hasn't taken the new value. Otherwise it's the checked\n    // segment, or the first enabled one when none is checked or the checked\n    // one is disabled. Before the segments register (the server render and\n    // the first client render) the checked one holds it, so a row with\n    // nothing checked has no stop until the client has rendered.\n    const canHoldStop = (candidate: string | undefined) =>\n      segments.some(s => !s.disabled && s.value === candidate);\n    let tabStop: string | undefined;\n    if (canHoldStop(focused)) tabStop = focused;\n    else if (segments.length === 0 || canHoldStop(checked)) tabStop = checked;\n    else tabStop = firstEnabled;\n\n    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'SegmentedControl:unnamed',\n          '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +\n            'aria-label or aria-labelledby, so a screen reader can say what ' +\n            'the choice is.'\n        );\n      }\n    }, [named]);\n\n    const rowClasses = usePrefixedClassNames('buttons', {\n      'has-addons': hasAddons,\n      'is-centered': isCentered,\n      'is-right': isRight,\n      [`are-${size}`]: size,\n    });\n\n    // The props are spread first, so the role a screen reader relies on wins\n    // over anything a JavaScript caller or a spread object passes along.\n    return (\n      <SegmentedControlContext.Provider\n        value={{ checked, tabStop, color, select, setFocused, register }}\n      >\n        <div\n          {...rest}\n          ref={ref}\n          role=\"radiogroup\"\n          className={classNames(rowClasses, bulmaHelperClasses, className)}\n        >\n          {children}\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  }\n);\n\n// ---------------------------------------------------------------------------\n// SegmentedControl.Segment\n// ---------------------------------------------------------------------------\n\n/**\n * Props for SegmentedControl.Segment. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, `type`, `role` and\n * `tabIndex`, since a segment is always a `<button type=\"button\" role=\"radio\">`\n * and the group decides which segment Tab reaches. `color`, which the group\n * sets for the checked segment, and the props that change the fill\n * (`isActive`, `isLight`, `isOutlined`, `isInverted`, `textColor`, `bgColor`\n * and their shades), since each would color it whether checked or not. `size`\n * and the width and shape props, which the row sets for every segment. And\n * `isStatic` and `isLoading`, a segment you couldn't pick.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface SegmentedControlSegmentProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'size'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLoading'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'isRounded'\n      | 'isFullwidth'\n      | 'isFullWidth'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      | keyof ButtonOwnProps\n      | 'type'\n      | 'value'\n      | 'role'\n      | 'tabIndex'\n      | 'aria-checked'\n      | 'aria-pressed'\n    > {\n  /**\n   * **Required.** What `onChange` reports when this segment is checked, and\n   * what the group's `value` and `defaultValue` name it by. Unique within the\n   * group.\n   */\n  value: string;\n  /**\n   * The label. An icon on its own needs an `aria-label`, so a screen reader\n   * has something to say.\n   */\n  children?: React.ReactNode;\n  /**\n   * Disables the segment, the same as `disabled`: it can't be clicked, the\n   * arrow keys, Home and End skip it, and it never holds the row's tab stop.\n   * A checked one keeps its fill under Bulma's disabled look.\n   */\n  isDisabled?: boolean;\n  /**\n   * Not accepted: `aria-checked` follows the group's value. Declared because\n   * JSX lets a hyphenated attribute through when the props don't name it.\n   * @internal\n   */\n  'aria-checked'?: never;\n  /**\n   * Not accepted: a segment is a radio, which says checked, not pressed.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * One option in the row: a `<button role=\"radio\">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.\n *\n * @function\n * @param {SegmentedControlSegmentProps} props - Props for the segment.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered segment.\n */\nconst Segment = forwardRef<HTMLButtonElement, SegmentedControlSegmentProps>(\n  function Segment(\n    {\n      value,\n      isDisabled,\n      disabled,\n      className,\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) {\n    const ctx = useContext(SegmentedControlContext);\n    const checked = ctx !== null && ctx.checked === value;\n    const off = Boolean(isDisabled || disabled);\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });\n\n    const nodeRef = useRef<HTMLButtonElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLButtonElement | null) => {\n        nodeRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    const register = ctx?.register;\n    useEffect(() => {\n      if (!register) {\n        warnOnce(\n          'SegmentedControl.Segment:outside',\n          '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +\n            '<SegmentedControl>, so nothing can check it. Put it inside one.'\n        );\n        return undefined;\n      }\n      return register({\n        value,\n        disabled: off,\n        node: nodeRef.current as HTMLButtonElement,\n      });\n    }, [register, value, off]);\n\n    // The caller's onClick runs first, so a `preventDefault()` there keeps\n    // the segment from being checked. A disabled button gets no click.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      ctx?.select(value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      if (\n        !ctx ||\n        event.defaultPrevented ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey\n      ) {\n        return;\n      }\n      const target = segmentFor(event.currentTarget, event.key);\n      if (!target) return;\n      event.preventDefault();\n      // The row has taken this key, so nothing above it acts on it too: a\n      // Carousel moves its slide on the arrows from a document listener that\n      // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.\n      event.stopPropagation();\n      target.focus();\n      // The check follows focus, APG's rule for a radio group outside a\n      // toolbar. It goes through a click on the segment, as a native radio's\n      // does, so its onClick sees it. Inside a toolbar the arrows would move\n      // focus alone; that is the line a toolbar would change.\n      target.click();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event);\n      ctx?.setFocused(value);\n    };\n\n    // The segment focus moves to, if any, records itself straight after.\n    const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onBlur?.(event);\n      ctx?.setFocused(undefined);\n    };\n\n    // The props are spread first, so what a radio depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports whether it's checked, and the group\n    // decides whether Tab reaches it.\n    return (\n      <Button\n        {...props}\n        ref={setRefs}\n        as=\"button\"\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        tabIndex={ctx ? (ctx.tabStop === value ? 0 : -1) : undefined}\n        isDisabled={off}\n        color={checked ? ctx.color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n    );\n  }\n);\n\nSegment.displayName = 'SegmentedControl.Segment';\n\nexport const SegmentedControl = withSubComponents(\n  SegmentedControlRoot,\n  { Segment },\n  'SegmentedControl'\n);\n\nexport default SegmentedControl;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, type ButtonOwnProps } from '../elements/Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\n\n// Spelled out so the API page can list the values. The tests hold it to\n// ToggleButton's, since the checked segment fills the way a pressed toggle\n// does and for the same reasons.\n/**\n * The fills the checked segment takes: `Button`'s colors, minus `text` and\n * `ghost`, which don't fill, and `white`, `light`, `dark` and `black`, which in\n * one theme or the other fill about as light or dark as an unchecked segment\n * already is. The same set `ToggleButton` takes.\n */\nexport type SegmentedControlColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n/** A mounted segment, as the group needs to know it for the tab stop. */\ninterface SegmentRecord {\n  value: string;\n  disabled: boolean;\n  node: HTMLButtonElement;\n}\n\ninterface SegmentedControlContextValue {\n  /** The checked segment's value, or `undefined` while none is. */\n  checked: string | undefined;\n  /** The segment that holds `tabIndex={0}`, or `undefined` for none. */\n  tabStop: string | undefined;\n  /** The fill the checked segment takes. */\n  color: SegmentedControlColor;\n  /** Checks a segment, unless it's checked already. */\n  select: (value: string) => void;\n  /** Records which segment has focus, so the tab stop can follow it. */\n  setFocused: (value: string | undefined) => void;\n  register: (record: SegmentRecord) => () => void;\n}\n\n// Not exported, so it stays out of the public API that `index.ts` re-exports.\nconst SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\n/** Sorts mounted segments into the order they sit in the page. */\nconst inDocumentOrder = (a: SegmentRecord, b: SegmentRecord) =>\n  a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING\n    ? -1\n    : 1;\n\n/** How far each arrow key moves along the row. */\nconst STEPS: Record<string, number> = {\n  ArrowRight: 1,\n  ArrowDown: 1,\n  ArrowLeft: -1,\n  ArrowUp: -1,\n};\n\n/**\n * The segment a key moves to, found among the segments of the same group in\n * DOM order, skipping disabled ones and wrapping at either end. `undefined`\n * for a key the group leaves alone, when no enabled segment is left, or when\n * the segment isn't inside its row in the page, as a portaled one isn't.\n */\nfunction segmentFor(\n  current: HTMLButtonElement,\n  key: string\n): HTMLButtonElement | undefined {\n  const group = current.closest('[role=\"radiogroup\"]');\n  if (!group) return undefined;\n  const segments = Array.from(\n    group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')\n  );\n  const enabled = segments.filter(segment => !segment.disabled);\n\n  if (key === 'Home') return enabled[0];\n  if (key === 'End') return enabled[enabled.length - 1];\n\n  const step = STEPS[key];\n  if (!step) return undefined;\n  const at = segments.indexOf(current);\n  for (let i = 1; i <= segments.length; i += 1) {\n    const candidate =\n      segments[(at + step * i + segments.length) % segments.length];\n    if (!candidate.disabled) return candidate;\n  }\n  return undefined;\n}\n\n// ---------------------------------------------------------------------------\n// SegmentedControl (root)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the SegmentedControl component. The helper props, the other `<div>`\n * attributes and the `ref` all land on the row.\n *\n * @extraProp {string} [aria-label] - Names the group for a screen reader, such as \"Text alignment\". A radio group needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading or label that names the group, in place of `aria-label`.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the row's `<div>`.\n */\nexport interface SegmentedControlProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | 'color' | 'role'\n    >,\n    Omit<\n      BulmaClassesProps,\n      'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'\n    > {\n  /**\n   * The checked segment's `value`, when you hold the state. Setting it makes\n   * the group controlled: picking a segment only calls `onChange`, and nothing\n   * changes until you pass the new value. `null` checks nothing, with the\n   * tab stop `defaultValue` describes for that. Pick this or `defaultValue`\n   * for the group's lifetime.\n   */\n  value?: string | null;\n  /**\n   * The segment checked to begin with, when the group holds its own state.\n   * Leave it out and nothing is checked until someone picks one, and Tab\n   * lands on the first enabled segment meanwhile. That fallback takes hold\n   * once the row has rendered in the browser: server markup with nothing\n   * checked has no tab stop until then, while a checked segment is the stop\n   * from the server markup on.\n   */\n  defaultValue?: string;\n  /**\n   * Called with the newly checked segment's `value`, whether or not `value`\n   * is set. The arrow keys, Home and End check the segment they move to, so\n   * each of those calls it too: the check follows focus, as in a native radio\n   * group. Pressing the checked segment again doesn't call it, since a\n   * segmented control can't be cleared: one stays checked once one is.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The checked segment's fill. The others are plain buttons, so the fill is\n   * the difference people see. Takes the same colors as `ToggleButton`, for\n   * the same reason: `white`, `light`, `dark` and `black` fill about as light\n   * or dark as a plain button already is in one theme or the other.\n   */\n  color?: SegmentedControlColor;\n  /** Size of every segment, through Bulma's `are-<size>` on the row. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Joins the segments into one row with no gap between them, Bulma's\n   * `has-addons`. Set it to `false` for separate buttons.\n   */\n  hasAddons?: boolean;\n  /** Centers the row. */\n  isCentered?: boolean;\n  /** Aligns the row to the right. */\n  isRight?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** The `SegmentedControl.Segment`s, each with a `value` of its own. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.\n *\n * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and\n * marked `is-selected`, the way Bulma's button docs show it. To a screen\n * reader it's `role=\"radiogroup\"`, with `role=\"radio\"` and `aria-checked` on\n * each segment, which is how the APG toolbar example marks its alignment\n * buttons. The keys follow the APG radio group: the row is one tab stop, the\n * arrow keys move to the next or previous enabled segment and check it,\n * wrapping at either end, Home and End go to the first and last, and Space\n * checks the focused segment. Once a segment is checked, one always is.\n *\n * It carries no form value. A choice that's sent with a form is `Radios`.\n *\n * @function\n * @param {SegmentedControlProps} props - Props for the SegmentedControl component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.\n * @returns {JSX.Element} The rendered segmented control.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}\n * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}\n *\n * @example\n * <SegmentedControl aria-label=\"Text alignment\" defaultValue=\"left\">\n *   <SegmentedControl.Segment value=\"left\">Left</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"center\">Center</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"right\">Right</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      value,\n      defaultValue,\n      onChange,\n      color = 'link',\n      size,\n      hasAddons = true,\n      isCentered,\n      isRight,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n    // Controlled vs uncontrolled, as in Tabs and Collapses.\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const checked = isControlled ? (value ?? undefined) : internalValue;\n\n    const select = (next: string) => {\n      if (next === checked) return;\n      if (!isControlled) setInternalValue(next);\n      onChange?.(next);\n    };\n\n    // The segments mount and register from an effect, so the group knows\n    // which can hold the tab stop wherever in the tree they sit.\n    const [segments, setSegments] = useState<SegmentRecord[]>([]);\n    const register = useCallback((record: SegmentRecord) => {\n      setSegments(prev => [...prev, record]);\n      return () => setSegments(prev => prev.filter(r => r !== record));\n    }, []);\n    const [focused, setFocused] = useState<string | undefined>();\n\n    // The first enabled segment in the page, sorted when it's read rather\n    // than when a segment registers, so reordered segments are seen too. It's\n    // read after the commit: a render runs before React moves the nodes, so\n    // sorting there would find the old order.\n    const [firstEnabled, setFirstEnabled] = useState<string | undefined>();\n    useClientLayoutEffect(() => {\n      const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);\n      setFirstEnabled(inPage[0]?.value);\n    }, [segments, children]);\n\n    // One tab stop for the row (roving tabindex). While focus is in the row\n    // the stop follows it, so Tab leaves from wherever focus is even when a\n    // controlled group hasn't taken the new value. Otherwise it's the checked\n    // segment, or the first enabled one when none is checked or the checked\n    // one is disabled. Before the segments register (the server render and\n    // the first client render) the checked one holds it, so a row with\n    // nothing checked has no stop until the client has rendered.\n    const canHoldStop = (candidate: string | undefined) =>\n      segments.some(s => !s.disabled && s.value === candidate);\n    let tabStop: string | undefined;\n    if (canHoldStop(focused)) tabStop = focused;\n    else if (segments.length === 0 || canHoldStop(checked)) tabStop = checked;\n    else tabStop = firstEnabled;\n\n    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'SegmentedControl:unnamed',\n          '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +\n            'aria-label or aria-labelledby, so a screen reader can say what ' +\n            'the choice is.'\n        );\n      }\n    }, [named]);\n\n    const rowClasses = usePrefixedClassNames('buttons', {\n      'has-addons': hasAddons,\n      'is-centered': isCentered,\n      'is-right': isRight,\n      [`are-${size}`]: size,\n    });\n\n    // The props are spread first, so the role a screen reader relies on wins\n    // over anything a JavaScript caller or a spread object passes along.\n    return (\n      <SegmentedControlContext.Provider\n        value={{ checked, tabStop, color, select, setFocused, register }}\n      >\n        <div\n          {...rest}\n          ref={ref}\n          role=\"radiogroup\"\n          className={classNames(rowClasses, bulmaHelperClasses, className)}\n        >\n          {children}\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  }\n);\n\n// ---------------------------------------------------------------------------\n// SegmentedControl.Segment\n// ---------------------------------------------------------------------------\n\n/**\n * Props for SegmentedControl.Segment. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, `type`, `role` and\n * `tabIndex`, since a segment is always a `<button type=\"button\" role=\"radio\">`\n * and the group decides which segment Tab reaches. `color`, which the group\n * sets for the checked segment, and the props that change the fill\n * (`isActive`, `isLight`, `isOutlined`, `isInverted`, `textColor`, `bgColor`\n * and their shades), since each would color it whether checked or not. `size`\n * and the width and shape props, which the row sets for every segment. And\n * `isStatic` and `isLoading`, a segment you couldn't pick.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface SegmentedControlSegmentProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'size'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLoading'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'isRounded'\n      | 'isFullwidth'\n      | 'isFullWidth'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      | keyof ButtonOwnProps\n      | 'type'\n      | 'value'\n      | 'role'\n      | 'tabIndex'\n      | 'aria-checked'\n      | 'aria-pressed'\n    > {\n  /**\n   * **Required.** What `onChange` reports when this segment is checked, and\n   * what the group's `value` and `defaultValue` name it by. Unique within the\n   * group.\n   */\n  value: string;\n  /**\n   * The label. An icon on its own needs an `aria-label`, so a screen reader\n   * has something to say.\n   */\n  children?: React.ReactNode;\n  /**\n   * Disables the segment, the same as `disabled`: it can't be clicked, the\n   * arrow keys, Home and End skip it, and it never holds the row's tab stop.\n   * A checked one keeps its fill under Bulma's disabled look.\n   */\n  isDisabled?: boolean;\n  /**\n   * Not accepted: `aria-checked` follows the group's value. Declared because\n   * JSX lets a hyphenated attribute through when the props don't name it.\n   * @internal\n   */\n  'aria-checked'?: never;\n  /**\n   * Not accepted: a segment is a radio, which says checked, not pressed.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * One option in the row: a `<button role=\"radio\">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.\n *\n * @function\n * @param {SegmentedControlSegmentProps} props - Props for the segment.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered segment.\n */\nconst Segment = forwardRef<HTMLButtonElement, SegmentedControlSegmentProps>(\n  function Segment(\n    {\n      value,\n      isDisabled,\n      disabled,\n      className,\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) {\n    const ctx = useContext(SegmentedControlContext);\n    const checked = ctx !== null && ctx.checked === value;\n    const off = Boolean(isDisabled || disabled);\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });\n\n    const nodeRef = useRef<HTMLButtonElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLButtonElement | null) => {\n        nodeRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    const register = ctx?.register;\n    useEffect(() => {\n      if (!register) {\n        warnOnce(\n          'SegmentedControl.Segment:outside',\n          '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +\n            '<SegmentedControl>, so nothing can check it. Put it inside one.'\n        );\n        return undefined;\n      }\n      return register({\n        value,\n        disabled: off,\n        node: nodeRef.current as HTMLButtonElement,\n      });\n    }, [register, value, off]);\n\n    // The caller's onClick runs first, so a `preventDefault()` there keeps\n    // the segment from being checked. A disabled button gets no click.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      ctx?.select(value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      if (\n        !ctx ||\n        event.defaultPrevented ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey\n      ) {\n        return;\n      }\n      const target = segmentFor(event.currentTarget, event.key);\n      if (!target) return;\n      event.preventDefault();\n      // The row has taken this key, so nothing above it acts on it too: a\n      // Carousel moves its slide on the arrows from a document listener that\n      // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.\n      event.stopPropagation();\n      target.focus();\n      // The check follows focus, APG's rule for a radio group outside a\n      // toolbar. It goes through a click on the segment, as a native radio's\n      // does, so its onClick sees it. Inside a toolbar the arrows would move\n      // focus alone; that is the line a toolbar would change.\n      target.click();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event);\n      ctx?.setFocused(value);\n    };\n\n    // The segment focus moves to, if any, records itself straight after.\n    const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onBlur?.(event);\n      ctx?.setFocused(undefined);\n    };\n\n    // The props are spread first, so what a radio depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports whether it's checked, and the group\n    // decides whether Tab reaches it.\n    return (\n      <Button\n        {...props}\n        ref={setRefs}\n        as=\"button\"\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        tabIndex={ctx ? (ctx.tabStop === value ? 0 : -1) : undefined}\n        isDisabled={off}\n        color={checked ? ctx.color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n    );\n  }\n);\n\nSegment.displayName = 'SegmentedControl.Segment';\n\nexport const SegmentedControl = withSubComponents(\n  SegmentedControlRoot,\n  { Segment },\n  'SegmentedControl'\n);\n\nexport default SegmentedControl;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/Sidebar.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';

package/dist/esm/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { useConfig } from '../helpers/Config';\nimport { buttonType } from '../helpers/buttonType';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { isModalOverlayOpen, useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\nimport { inertProps } from '../helpers/inertProps';\nimport {\n  getActiveElementInTree,\n  getDeepestActiveElement,\n} from '../helpers/shadowDom';\n\n/** Position of the sidebar relative to the viewport. */\nexport type SidebarPosition = 'left' | 'right';\n\n/**\n * Props for the Sidebar component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.\n */\nexport interface SidebarProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>,\n    BulmaClassesProps {\n  /**\n   * Whether the sidebar is open (required). Opening moves focus into the\n   * sidebar, to its first tab stop or the sidebar itself, except for a sidebar\n   * without an overlay opened while a modal overlay, such as a Modal, is open:\n   * that one leaves focus where it is. That's decided as it opens, and\n   * changing `overlay` while it's open doesn't move focus. Closing hands\n   * focus back to whatever had it when the sidebar opened, unless focus has\n   * already left the sidebar, as it does for an overlay opened over it. A\n   * closed sidebar stays in the page, so it can slide out, and is `inert` and\n   * `aria-hidden` there: Tab passes over its content and assistive\n   * technology doesn't read it.\n   */\n  isOpen: boolean;\n  /** Callback when sidebar should close. */\n  onClose?: () => void;\n  /** Which side the sidebar appears from. Default: 'left'. */\n  position?: SidebarPosition;\n  /** Custom width of the sidebar. */\n  width?: string;\n  /** Sidebar takes full width (mobile-style). */\n  isFullwidth?: boolean;\n  /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  fullWidth?: boolean;\n  /**\n   * Show an overlay behind the sidebar, which makes it modal: it gets\n   * `aria-modal=\"true\"`, locks body scroll, and keeps Tab and Shift+Tab\n   * inside it while it is the topmost modal overlay. A Modal or Dialog opened\n   * over it, even one rendered inside it, holds Tab until it closes. Without\n   * an overlay the sidebar isn't modal and holds no Tab: on the page, Tab\n   * moves in and out of it freely, and opened over a Modal, it leaves the\n   * Modal holding Tab, and focus, while still taking Escape first. Whether\n   * the sidebar takes focus is decided as it opens: changing this while it's\n   * open moves the Tab trap, not focus. Default: true.\n   */\n  overlay?: boolean;\n  /** Close sidebar when overlay is clicked. Default: true. */\n  overlayClose?: boolean;\n  /**\n   * Close sidebar on Escape key. Only the topmost open overlay responds,\n   * whichever Modal, Dialog, Sidebar or full-page Loading opened last, so\n   * Escape closes one layer at a time. The sidebar marks the Escape it closes\n   * on as used with `preventDefault()`, and a Toast waits until no overlay is\n   * open. Turned off, a sidebar on top still keeps Escape from the layers\n   * under it. A popup inside it, such as a Dropdown's menu or a date picker's\n   * calendar, takes its own Escape first, and so does content that calls\n   * `preventDefault()` on it. Default: true.\n   */\n  escapeClose?: boolean;\n  /** Allow closing the sidebar. Default: true. */\n  canCancel?: boolean;\n  /** Content to display in the sidebar. */\n  children?: React.ReactNode;\n  /** Renders inline instead of using a portal. */\n  inline?: boolean;\n}\n\n/**\n * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.\n *\n * @function\n * @param {SidebarProps} props - Props for the Sidebar component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.\n * @returns {JSX.Element | null} The rendered sidebar component.\n *\n * @example\n * // Basic sidebar\n * const [isOpen, setIsOpen] = useState(false);\n * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <Menu>...</Menu>\n * </Sidebar>\n *\n * @example\n * // Right-side sidebar with custom width\n * <Sidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   position=\"right\"\n *   width=\"320px\"\n * >\n *   <div>Panel content</div>\n * </Sidebar>\n */\nconst SidebarComponent = forwardRef<HTMLElement, SidebarProps>(\n  (\n    {\n      isOpen,\n      onClose,\n      position = 'left',\n      width = '260px',\n      isFullwidth,\n      fullWidth,\n      overlay = true,\n      overlayClose = true,\n      escapeClose = true,\n      canCancel = true,\n      children,\n      inline = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const resolveContainer = usePortalContainer();\n    const { portalContainer } = useConfig();\n    // Where the configured default puts the sidebar. An `inline` one doesn't\n    // portal, so a change to the default moves nothing.\n    const defaultTarget = inline ? undefined : portalContainer;\n    const sidebarRef = useRef<HTMLElement>(null);\n    // Cleanup returned by a consumer's callback ref on attach, held until detach.\n    const consumerCleanupRef = useRef<(() => void) | null>(null);\n    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;\n\n    // Close handler\n    const handleClose = useCallback(() => {\n      if (canCancel && onClose) {\n        onClose();\n      }\n    }, [canCancel, onClose]);\n\n    // Handle overlay click\n    const handleOverlayClick = useCallback(() => {\n      if (overlayClose) {\n        handleClose();\n      }\n    }, [overlayClose, handleClose]);\n\n    // Read when Escape arrives, so the key listener stays put while\n    // `onClose` changes identity, as an inline one does on every render of\n    // the parent.\n    const handleCloseRef = useLatestRef(handleClose);\n\n    // Joins the stack of open overlays, so the sidebar answers Escape only\n    // while it's the topmost overlay, and keeps it from those under it. It's\n    // modal with an overlay: without one it leaves Tab to a modal overlay\n    // under it.\n    const isTopmost = useOverlayStack(isOpen, overlay);\n    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);\n\n    // Handle escape key. On `window`, as in `Modal`, so everything inside the\n    // sidebar has had the key first, and an Escape it used is left to it. One\n    // the sidebar closes on is marked used, so nothing under it acts on it.\n    useEffect(() => {\n      if (!isOpen || !closesOnEscape) return;\n\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost()) return;\n        e.preventDefault();\n        handleCloseRef.current();\n      };\n\n      window.addEventListener('keydown', handleKeyDown);\n      return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);\n\n    // Keep Tab inside while there's an overlay, as `Modal` does:\n    // `aria-modal` hides the rest of the page from assistive technology, so\n    // the keyboard order has to agree. Only while it's the topmost modal\n    // overlay, so a Modal or Dialog opened over the sidebar, even one\n    // rendered inside it, holds Tab instead until it closes, and a sidebar\n    // without an overlay opened over it doesn't. On `window` for the same\n    // reason as Escape: a trap inside, such as a portaled popup's, has had\n    // the Tab first, and one it used is left where it put focus. It's the trap\n    // `useFocusTrap` sets, so a Tab the browser still takes out, as Safari\n    // does past links, is sent back in. It reads the aside as each key\n    // arrives, so one remounted while the sidebar is open, by a new portal\n    // target or by switching `inline`, stays trapped.\n    useEffect(() => {\n      if (!isOpen || !overlay) return undefined;\n      return trapTab(\n        () => sidebarRef.current,\n        window,\n        () => isTopmost('modal')\n      );\n    }, [isOpen, overlay, isTopmost]);\n\n    // Prevent body scroll when sidebar is open. Ref-counted through the shared\n    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.\n    useScrollLock(isOpen && overlay);\n\n    // Move focus into the sidebar on open, to the first stop Tab wraps to or\n    // the sidebar itself, and hand it back on close, as `Modal` does. A\n    // different `defaultTarget` remounts the portaled sidebar: the cleanup\n    // hands focus back from the old nodes, which left it on <body>, and the\n    // re-run records the same opener and focuses the new nodes. Whether it\n    // takes focus is decided as it opens, so `overlay` changing while it's\n    // open leaves focus where the user has it.\n    useEffect(() => {\n      if (!isOpen) return undefined;\n      const element = sidebarRef.current;\n      /* istanbul ignore if: the aside renders whenever the sidebar is open, so its ref is set before this runs */\n      if (!element) return undefined;\n\n      // The element that had focus, wherever it sits: a portaled sidebar\n      // renders under `document.body` while its opener can be inside a\n      // shadow root.\n      const opener = getDeepestActiveElement() as HTMLElement | null;\n      // Without an overlay the sidebar holds no Tab, so with a modal overlay\n      // open under it, the first Tab would take focus back there and leave\n      // the sidebar's other controls out of reach. It leaves focus alone\n      // then, and the cleanup below finds focus outside and leaves it too.\n      if (overlay || !isModalOverlayOpen()) {\n        focusTabStop(element);\n      }\n\n      return () => {\n        // Only while the sidebar still holds focus: closing one under another\n        // overlay mustn't pull focus out of the one on top, and focus moved\n        // out to the page stays there. A removed subtree leaves focus on\n        // <body>, which still counts as held.\n        const active = getActiveElementInTree(element);\n        if (active === document.body || element.contains(active)) {\n          opener?.focus();\n        }\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- `overlay` is read as the sidebar opens, on purpose\n    }, [isOpen, defaultTarget]);\n\n    // Use combined ref\n    const combinedRef = useCallback(\n      (node: HTMLElement | null) => {\n        (sidebarRef as React.MutableRefObject<HTMLElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          // React 19 lets a callback ref return a cleanup function and detaches by\n          // running it instead of calling the ref with `null`; React 18 discards the\n          // return value entirely. Returning it from here would be a React-19-only\n          // contract, so we hold the cleanup and run it ourselves on detach — the\n          // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.\n          // The form controls that merge a forwarded ref still discard the cleanup\n          // and detach with `ref(null)`, so this is not yet library-wide — grep\n          // `typeof ref === 'function'` for the current split.\n          if (node === null) {\n            const consumerCleanup = consumerCleanupRef.current;\n            consumerCleanupRef.current = null;\n            if (consumerCleanup) {\n              consumerCleanup();\n            } else {\n              ref(null);\n            }\n            return;\n          }\n          const cleanup: unknown = ref(node);\n          consumerCleanupRef.current =\n            typeof cleanup === 'function' ? (cleanup as () => void) : null;\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Generate classes\n    const sidebarClasses = usePrefixedClassNames('sidebar', {\n      'is-active': isOpen,\n      [`is-${position}`]: position,\n      'is-fullwidth': resolvedFullwidth,\n    });\n    const backgroundClass = usePrefixedClassNames('sidebar-background', {\n      'is-active': isOpen,\n    });\n    const contentClass = usePrefixedClassNames('sidebar-content');\n\n    const combinedClasses = classNames(\n      sidebarClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    // Custom style for width\n    const sidebarStyle: React.CSSProperties = {\n      ...style,\n      '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,\n    } as React.CSSProperties;\n\n    const sidebarContent = (\n      <>\n        {overlay && (\n          <div\n            className={backgroundClass}\n            onClick={handleOverlayClick}\n            aria-hidden=\"true\"\n          />\n        )}\n        <aside\n          ref={combinedRef}\n          className={combinedClasses}\n          style={sidebarStyle}\n          role=\"dialog\"\n          aria-modal={overlay ? 'true' : undefined}\n          aria-hidden={!isOpen}\n          // React commits this before the effect that moves focus in runs, so\n          // an opening sidebar is no longer inert by then.\n          {...inertProps(!isOpen)}\n          tabIndex={-1}\n          {...rest}\n        >\n          <div className={contentClass}>{children}</div>\n        </aside>\n      </>\n    );\n\n    if (inline) {\n      return sidebarContent;\n    }\n\n    // Render to portal for proper stacking\n    if (typeof document !== 'undefined') {\n      const target = resolveContainer();\n      return createPortal(\n        <LocalePortalScope target={target}>{sidebarContent}</LocalePortalScope>,\n        target\n      );\n    }\n\n    return null;\n  }\n);\n\n// Sub-components\n\n/**\n * Props for the SidebarHeader component.\n */\ninterface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Header content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Container for the sidebar header.\n *\n * @function\n * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.\n * @returns {JSX.Element} The rendered sidebar header.\n */\nconst SidebarHeader: React.FC<SidebarHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const headerClass = usePrefixedClassNames('sidebar-header');\n  return (\n    <div className={classNames(headerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarTitle component.\n */\ninterface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Title content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Title text inside the header.\n *\n * @function\n * @param {SidebarTitleProps} props - Props for the SidebarTitle component.\n * @returns {JSX.Element} The rendered sidebar title.\n */\nconst SidebarTitle: React.FC<SidebarTitleProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const titleClass = usePrefixedClassNames('sidebar-title');\n  return (\n    <p className={classNames(titleClass, className)} {...props}>\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the SidebarClose component.\n * Extends standard button attributes.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\ntype SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for the sidebar.\n *\n * @function\n * @param {SidebarCloseProps} props - Props for the SidebarClose component.\n * @returns {JSX.Element} The rendered close button.\n */\nconst SidebarClose: React.FC<SidebarCloseProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const closeClass = usePrefixedClassNames('sidebar-close');\n  return (\n    <button\n      className={classNames(closeClass, className)}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'Close'}\n      type={buttonType(props.type)}\n    >\n      {children}\n    </button>\n  );\n};\n\n/**\n * Props for the SidebarBody component.\n */\ninterface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Main content area of the sidebar.\n *\n * @function\n * @param {SidebarBodyProps} props - Props for the SidebarBody component.\n * @returns {JSX.Element} The rendered sidebar body.\n */\nconst SidebarBody: React.FC<SidebarBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const bodyClass = usePrefixedClassNames('sidebar-body');\n  return (\n    <div className={classNames(bodyClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarFooter component.\n */\ninterface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Footer area of the sidebar.\n *\n * @function\n * @param {SidebarFooterProps} props - Props for the SidebarFooter component.\n * @returns {JSX.Element} The rendered sidebar footer.\n */\nconst SidebarFooter: React.FC<SidebarFooterProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const footerClass = usePrefixedClassNames('sidebar-footer');\n  return (\n    <div className={classNames(footerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// Attach static subcomponents\nexport const Sidebar = withSubComponents(\n  SidebarComponent,\n  {\n    Header: SidebarHeader,\n    Title: SidebarTitle,\n    Close: SidebarClose,\n    Body: SidebarBody,\n    Footer: SidebarFooter,\n  },\n  'Sidebar'\n);\n\nexport default Sidebar;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { useConfig } from '../helpers/Config';\nimport { buttonType } from '../helpers/buttonType';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { isModalOverlayOpen, useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\nimport { inertProps } from '../helpers/inertProps';\nimport {\n  getActiveElementInTree,\n  getDeepestActiveElement,\n} from '../helpers/shadowDom';\n\n/** Position of the sidebar relative to the viewport. */\nexport type SidebarPosition = 'left' | 'right';\n\n/**\n * Props for the Sidebar component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the sidebar element.\n */\nexport interface SidebarProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>,\n    BulmaClassesProps {\n  /**\n   * Whether the sidebar is open (required). Opening moves focus into the\n   * sidebar, to its first tab stop or the sidebar itself, except for a sidebar\n   * without an overlay opened while a modal overlay, such as a Modal, is open:\n   * that one leaves focus where it is. That's decided as it opens, and\n   * changing `overlay` while it's open doesn't move focus. Closing hands\n   * focus back to whatever had it when the sidebar opened, unless focus has\n   * already left the sidebar, as it does for an overlay opened over it. A\n   * closed sidebar stays in the page, so it can slide out, and is `inert` and\n   * `aria-hidden` there: Tab passes over its content and assistive\n   * technology doesn't read it.\n   */\n  isOpen: boolean;\n  /** Callback when sidebar should close. */\n  onClose?: () => void;\n  /** Which side the sidebar appears from. Default: 'left'. */\n  position?: SidebarPosition;\n  /** Custom width of the sidebar. */\n  width?: string;\n  /** Sidebar takes full width (mobile-style). */\n  isFullwidth?: boolean;\n  /** Sidebar takes full width (mobile-style). @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  fullWidth?: boolean;\n  /**\n   * Show an overlay behind the sidebar, which makes it modal: it gets\n   * `aria-modal=\"true\"`, locks body scroll, and keeps Tab and Shift+Tab\n   * inside it while it is the topmost modal overlay. A Modal or Dialog opened\n   * over it, even one rendered inside it, holds Tab until it closes. Without\n   * an overlay the sidebar isn't modal and holds no Tab: on the page, Tab\n   * moves in and out of it freely, and opened over a Modal, it leaves the\n   * Modal holding Tab, and focus, while still taking Escape first. Whether\n   * the sidebar takes focus is decided as it opens: changing this while it's\n   * open moves the Tab trap, not focus. Default: true.\n   */\n  overlay?: boolean;\n  /** Close sidebar when overlay is clicked. Default: true. */\n  overlayClose?: boolean;\n  /**\n   * Close sidebar on Escape key. Only the topmost open overlay responds,\n   * whichever Modal, Dialog, Sidebar or full-page Loading opened last, so\n   * Escape closes one layer at a time. The sidebar marks the Escape it closes\n   * on as used with `preventDefault()`, and a Toast waits until no overlay is\n   * open. Turned off, a sidebar on top still keeps Escape from the layers\n   * under it. A popup inside it, such as a Dropdown's menu or a date picker's\n   * calendar, takes its own Escape first, and so does content that calls\n   * `preventDefault()` on it. Default: true.\n   */\n  escapeClose?: boolean;\n  /** Allow closing the sidebar. Default: true. */\n  canCancel?: boolean;\n  /** Content to display in the sidebar. */\n  children?: React.ReactNode;\n  /** Renders inline instead of using a portal. */\n  inline?: boolean;\n}\n\n/**\n * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.\n *\n * @function\n * @param {SidebarProps} props - Props for the Sidebar component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.\n * @returns {JSX.Element | null} The rendered sidebar component.\n *\n * @example\n * // Basic sidebar\n * const [isOpen, setIsOpen] = useState(false);\n * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <Menu>...</Menu>\n * </Sidebar>\n *\n * @example\n * // Right-side sidebar with custom width\n * <Sidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   position=\"right\"\n *   width=\"320px\"\n * >\n *   <div>Panel content</div>\n * </Sidebar>\n */\nconst SidebarComponent = forwardRef<HTMLElement, SidebarProps>(\n  (\n    {\n      isOpen,\n      onClose,\n      position = 'left',\n      width = '260px',\n      isFullwidth,\n      fullWidth,\n      overlay = true,\n      overlayClose = true,\n      escapeClose = true,\n      canCancel = true,\n      children,\n      inline = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const resolveContainer = usePortalContainer();\n    const { portalContainer } = useConfig();\n    // Where the configured default puts the sidebar. An `inline` one doesn't\n    // portal, so a change to the default moves nothing.\n    const defaultTarget = inline ? undefined : portalContainer;\n    const sidebarRef = useRef<HTMLElement>(null);\n    // Cleanup returned by a consumer's callback ref on attach, held until detach.\n    const consumerCleanupRef = useRef<(() => void) | null>(null);\n    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;\n\n    // Close handler\n    const handleClose = useCallback(() => {\n      if (canCancel && onClose) {\n        onClose();\n      }\n    }, [canCancel, onClose]);\n\n    // Handle overlay click\n    const handleOverlayClick = useCallback(() => {\n      if (overlayClose) {\n        handleClose();\n      }\n    }, [overlayClose, handleClose]);\n\n    // Read when Escape arrives, so the key listener stays put while\n    // `onClose` changes identity, as an inline one does on every render of\n    // the parent.\n    const handleCloseRef = useLatestRef(handleClose);\n\n    // Joins the stack of open overlays, so the sidebar answers Escape only\n    // while it's the topmost overlay, and keeps it from those under it. It's\n    // modal with an overlay: without one it leaves Tab to a modal overlay\n    // under it.\n    const isTopmost = useOverlayStack(isOpen, overlay);\n    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);\n\n    // Handle escape key. On `window`, as in `Modal`, so everything inside the\n    // sidebar has had the key first, and an Escape it used is left to it. One\n    // the sidebar closes on is marked used, so nothing under it acts on it.\n    useEffect(() => {\n      if (!isOpen || !closesOnEscape) return;\n\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost()) return;\n        e.preventDefault();\n        handleCloseRef.current();\n      };\n\n      window.addEventListener('keydown', handleKeyDown);\n      return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);\n\n    // Keep Tab inside while there's an overlay, as `Modal` does:\n    // `aria-modal` hides the rest of the page from assistive technology, so\n    // the keyboard order has to agree. Only while it's the topmost modal\n    // overlay, so a Modal or Dialog opened over the sidebar, even one\n    // rendered inside it, holds Tab instead until it closes, and a sidebar\n    // without an overlay opened over it doesn't. On `window` for the same\n    // reason as Escape: a trap inside, such as a portaled popup's, has had\n    // the Tab first, and one it used is left where it put focus. It's the trap\n    // `useFocusTrap` sets, so a Tab the browser still takes out, as Safari\n    // does past links, is sent back in. It reads the aside as each key\n    // arrives, so one remounted while the sidebar is open, by a new portal\n    // target or by switching `inline`, stays trapped.\n    useEffect(() => {\n      if (!isOpen || !overlay) return undefined;\n      return trapTab(\n        () => sidebarRef.current,\n        window,\n        () => isTopmost('modal')\n      );\n    }, [isOpen, overlay, isTopmost]);\n\n    // Prevent body scroll when sidebar is open. Ref-counted through the shared\n    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.\n    useScrollLock(isOpen && overlay);\n\n    // Move focus into the sidebar on open, to the first stop Tab wraps to or\n    // the sidebar itself, and hand it back on close, as `Modal` does. A\n    // different `defaultTarget` remounts the portaled sidebar: the cleanup\n    // hands focus back from the old nodes, which left it on <body>, and the\n    // re-run records the same opener and focuses the new nodes. Whether it\n    // takes focus is decided as it opens, so `overlay` changing while it's\n    // open leaves focus where the user has it.\n    useEffect(() => {\n      if (!isOpen) return undefined;\n      const element = sidebarRef.current;\n      /* istanbul ignore if: the aside renders whenever the sidebar is open, so its ref is set before this runs */\n      if (!element) return undefined;\n\n      // The element that had focus, wherever it sits: a portaled sidebar\n      // renders under `document.body` while its opener can be inside a\n      // shadow root.\n      const opener = getDeepestActiveElement() as HTMLElement | null;\n      // Without an overlay the sidebar holds no Tab, so with a modal overlay\n      // open under it, the first Tab would take focus back there and leave\n      // the sidebar's other controls out of reach. It leaves focus alone\n      // then, and the cleanup below finds focus outside and leaves it too.\n      if (overlay || !isModalOverlayOpen()) {\n        focusTabStop(element);\n      }\n\n      return () => {\n        // Only while the sidebar still holds focus: closing one under another\n        // overlay mustn't pull focus out of the one on top, and focus moved\n        // out to the page stays there. A removed subtree leaves focus on\n        // <body>, which still counts as held.\n        const active = getActiveElementInTree(element);\n        if (active === document.body || element.contains(active)) {\n          opener?.focus();\n        }\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- `overlay` is read as the sidebar opens, on purpose\n    }, [isOpen, defaultTarget]);\n\n    // Use combined ref\n    const combinedRef = useCallback(\n      (node: HTMLElement | null) => {\n        (sidebarRef as React.MutableRefObject<HTMLElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          // React 19 lets a callback ref return a cleanup function and detaches by\n          // running it instead of calling the ref with `null`; React 18 discards the\n          // return value entirely. Returning it from here would be a React-19-only\n          // contract, so we hold the cleanup and run it ourselves on detach — the\n          // same shape as `Dropdown`, `Modal`, `Dialog`, `Toast` and `Carousel`.\n          // The form controls that merge a forwarded ref still discard the cleanup\n          // and detach with `ref(null)`, so this is not yet library-wide — grep\n          // `typeof ref === 'function'` for the current split.\n          if (node === null) {\n            const consumerCleanup = consumerCleanupRef.current;\n            consumerCleanupRef.current = null;\n            if (consumerCleanup) {\n              consumerCleanup();\n            } else {\n              ref(null);\n            }\n            return;\n          }\n          const cleanup: unknown = ref(node);\n          consumerCleanupRef.current =\n            typeof cleanup === 'function' ? (cleanup as () => void) : null;\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Generate classes\n    const sidebarClasses = usePrefixedClassNames('sidebar', {\n      'is-active': isOpen,\n      [`is-${position}`]: position,\n      'is-fullwidth': resolvedFullwidth,\n    });\n    const backgroundClass = usePrefixedClassNames('sidebar-background', {\n      'is-active': isOpen,\n    });\n    const contentClass = usePrefixedClassNames('sidebar-content');\n\n    const combinedClasses = classNames(\n      sidebarClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    // Custom style for width\n    const sidebarStyle: React.CSSProperties = {\n      ...style,\n      '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,\n    } as React.CSSProperties;\n\n    const sidebarContent = (\n      <>\n        {overlay && (\n          <div\n            className={backgroundClass}\n            onClick={handleOverlayClick}\n            aria-hidden=\"true\"\n          />\n        )}\n        <aside\n          ref={combinedRef}\n          className={combinedClasses}\n          style={sidebarStyle}\n          role=\"dialog\"\n          aria-modal={overlay ? 'true' : undefined}\n          aria-hidden={!isOpen}\n          // React commits this before the effect that moves focus in runs, so\n          // an opening sidebar is no longer inert by then.\n          {...inertProps(!isOpen)}\n          tabIndex={-1}\n          {...rest}\n        >\n          <div className={contentClass}>{children}</div>\n        </aside>\n      </>\n    );\n\n    if (inline) {\n      return sidebarContent;\n    }\n\n    // Render to portal for proper stacking\n    if (typeof document !== 'undefined') {\n      const target = resolveContainer();\n      return createPortal(\n        <LocalePortalScope target={target}>{sidebarContent}</LocalePortalScope>,\n        target\n      );\n    }\n\n    return null;\n  }\n);\n\n// Sub-components\n\n/**\n * Props for the SidebarHeader component.\n */\ninterface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Header content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Container for the sidebar header.\n *\n * @function\n * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.\n * @returns {JSX.Element} The rendered sidebar header.\n */\nconst SidebarHeader: React.FC<SidebarHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const headerClass = usePrefixedClassNames('sidebar-header');\n  return (\n    <div className={classNames(headerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarTitle component.\n */\ninterface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Title content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Title text inside the header.\n *\n * @function\n * @param {SidebarTitleProps} props - Props for the SidebarTitle component.\n * @returns {JSX.Element} The rendered sidebar title.\n */\nconst SidebarTitle: React.FC<SidebarTitleProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const titleClass = usePrefixedClassNames('sidebar-title');\n  return (\n    <p className={classNames(titleClass, className)} {...props}>\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the SidebarClose component.\n * Extends standard button attributes.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n */\ntype SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for the sidebar.\n *\n * @function\n * @param {SidebarCloseProps} props - Props for the SidebarClose component.\n * @returns {JSX.Element} The rendered close button.\n */\nconst SidebarClose: React.FC<SidebarCloseProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const closeClass = usePrefixedClassNames('sidebar-close');\n  return (\n    <button\n      className={classNames(closeClass, className)}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'Close'}\n      type={buttonType(props.type)}\n    >\n      {children}\n    </button>\n  );\n};\n\n/**\n * Props for the SidebarBody component.\n */\ninterface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Main content area of the sidebar.\n *\n * @function\n * @param {SidebarBodyProps} props - Props for the SidebarBody component.\n * @returns {JSX.Element} The rendered sidebar body.\n */\nconst SidebarBody: React.FC<SidebarBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const bodyClass = usePrefixedClassNames('sidebar-body');\n  return (\n    <div className={classNames(bodyClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the SidebarFooter component.\n */\ninterface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Footer area of the sidebar.\n *\n * @function\n * @param {SidebarFooterProps} props - Props for the SidebarFooter component.\n * @returns {JSX.Element} The rendered sidebar footer.\n */\nconst SidebarFooter: React.FC<SidebarFooterProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const footerClass = usePrefixedClassNames('sidebar-footer');\n  return (\n    <div className={classNames(footerClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// Attach static subcomponents\nexport const Sidebar = withSubComponents(\n  SidebarComponent,\n  {\n    Header: SidebarHeader,\n    Title: SidebarTitle,\n    Close: SidebarClose,\n    Body: SidebarBody,\n    Footer: SidebarFooter,\n  },\n  'Sidebar'\n);\n\nexport default Sidebar;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAuFA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,MAAM,EACjB,KAAK,GAAG,OAAO,EACf,WAAW,EACX,SAAS,EACT,OAAO,GAAG,IAAI,EACd,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,IAAI,EAClB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,EAAE;AAC7C,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;;;IAGvC,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,eAAe;AAC1D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC;;AAE5C,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAsB,IAAI,CAAC;AAC5D,IAAA,MAAM,iBAAiB,GAAG,WAAW,IAAI,SAAS,IAAI,KAAK;;AAG3D,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,IAAI,SAAS,IAAI,OAAO,EAAE;AACxB,YAAA,OAAO,EAAE;QACX;AACF,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;;AAGxB,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;QAC1C,IAAI,YAAY,EAAE;AAChB,YAAA,WAAW,EAAE;QACf;AACF,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;;;;AAK/B,IAAA,MAAM,cAAc,GAAG,YAAY,CAAC,WAAW,CAAC;;;;;IAMhD,MAAM,SAAS,GAAG,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC;IAClD,MAAM,cAAc,GAAG,WAAW,IAAI,SAAS,IAAI,OAAO,CAAC,OAAO,CAAC;;;;IAKnE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,cAAc;YAAE;AAEhC,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,SAAS,EAAE;gBAAE;YAC9D,CAAC,CAAC,cAAc,EAAE;YAClB,cAAc,CAAC,OAAO,EAAE;AAC1B,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;QACjD,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;IACnE,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;;;;;;;;;;;;;IAcvD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,SAAS;AACzC,QAAA,OAAO,OAAO,CACZ,MAAM,UAAU,CAAC,OAAO,EACxB,MAAM,EACN,MAAM,SAAS,CAAC,OAAO,CAAC,CACzB;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;;;AAIhC,IAAA,aAAa,CAAC,MAAM,IAAI,OAAO,CAAC;;;;;;;;IAShC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO;;AAElC,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,SAAS;;;;AAK9B,QAAA,MAAM,MAAM,GAAG,uBAAuB,EAAwB;;;;;AAK9D,QAAA,IAAI,OAAO,IAAI,CAAC,kBAAkB,EAAE,EAAE;YACpC,YAAY,CAAC,OAAO,CAAC;QACvB;AAEA,QAAA,OAAO,MAAK;;;;;AAKV,YAAA,MAAM,MAAM,GAAG,sBAAsB,CAAC,OAAO,CAAC;AAC9C,YAAA,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;gBACxD,MAAM,EAAE,KAAK,EAAE;YACjB;AACF,QAAA,CAAC;;AAEH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;;AAG3B,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAwB,KAAI;AAC1B,QAAA,UAAyD,CAAC,OAAO;AAChE,YAAA,IAAI;AACN,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;;;;;;;;;AAS7B,YAAA,IAAI,IAAI,KAAK,IAAI,EAAE;AACjB,gBAAA,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO;AAClD,gBAAA,kBAAkB,CAAC,OAAO,GAAG,IAAI;gBACjC,IAAI,eAAe,EAAE;AACnB,oBAAA,eAAe,EAAE;gBACnB;qBAAO;oBACL,GAAG,CAAC,IAAI,CAAC;gBACX;gBACA;YACF;AACA,YAAA,MAAM,OAAO,GAAY,GAAG,CAAC,IAAI,CAAC;AAClC,YAAA,kBAAkB,CAAC,OAAO;gBACxB,OAAO,OAAO,KAAK,UAAU,GAAI,OAAsB,GAAG,IAAI;QAClE;aAAO,IAAI,GAAG,EAAE;AACb,YAAA,GAAkD,CAAC,OAAO,GAAG,IAAI;QACpE;AACF,IAAA,CAAC,EACD,CAAC,GAAG,CAAC,CACN;;AAGD,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,SAAS,EAAE;AACtD,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,CAAC,CAAA,GAAA,EAAM,QAAQ,CAAA,CAAE,GAAG,QAAQ;AAC5B,QAAA,cAAc,EAAE,iBAAiB;AAClC,KAAA,CAAC;AACF,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,oBAAoB,EAAE;AAClE,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA,CAAC;AACF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,iBAAiB,CAAC;IAE7D,MAAM,eAAe,GAAG,UAAU,CAChC,cAAc,EACd,kBAAkB,EAClB,SAAS,CACV;;AAGD,IAAA,MAAM,YAAY,GAAwB;AACxC,QAAA,GAAG,KAAK;QACR,uBAAuB,EAAE,iBAAiB,GAAG,MAAM,GAAG,KAAK;KACrC;AAExB,IAAA,MAAM,cAAc,IAClBA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,OAAO,KACNC,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,EAC1B,OAAO,EAAE,kBAAkB,EAAA,aAAA,EACf,MAAM,EAAA,CAClB,CACH,EACDA,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,YAAY,EACnB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,aAAA,EAC3B,CAAC,MAAM,EAAA,GAGhB,UAAU,CAAC,CAAC,MAAM,CAAC,EACvB,QAAQ,EAAE,EAAE,EAAA,GACR,IAAI,YAERA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,YAAG,QAAQ,EAAA,CAAO,EAAA,CACxC,CAAA,EAAA,CACP,CACJ;IAED,IAAI,MAAM,EAAE;AACV,QAAA,OAAO,cAAc;IACvB;;AAGA,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,MAAM,MAAM,GAAG,gBAAgB,EAAE;AACjC,QAAA,OAAO,YAAY,CACjBA,GAAA,CAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EAAG,cAAc,EAAA,CAAqB,EACvE,MAAM,CACP;IACH;AAEA,IAAA,OAAO,IAAI;AACb,CAAC,CACF;AAYD;;;;;;AAMG;AACH,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;AAC3D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACL;AAEV,CAAC;AAUD;;;;;;AAMG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,eAAe,CAAC;AACzD,IAAA,QACEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EACvD,QAAQ,EAAA,CACP;AAER,CAAC;AAUD;;;;;;AAMG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,eAAe,CAAC;AACzD,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GACxC,KAAK,EAAA,YAAA,EAMG,KAAK,CAAC,YAAY,CAAC,IAAI,OAAO,EAC1C,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAAA,QAAA,EAE3B,QAAQ,EAAA,CACF;AAEb,CAAC;AAUD;;;;;;AAMG;AACH,MAAM,WAAW,GAA+B,CAAC,EAC/C,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,cAAc,CAAC;AACvD,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EACxD,QAAQ,EAAA,CACL;AAEV,CAAC;AAUD;;;;;;AAMG;AACH,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;AAC3D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACL;AAEV,CAAC;AAED;AACO,MAAM,OAAO,GAAG,iBAAiB,CACtC,gBAAgB,EAChB;AACE,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,MAAM,EAAE,aAAa;CACtB,EACD,SAAS;;"}

package/dist/esm/components/Steps.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { classNames, usePrefixedClassNames } from '../helpers/classNames.js';

package/dist/esm/components/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","sources":["../../../src/components/Steps.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useNumberFormat } from '../helpers/localeFormat';\n\n/** Available size modifiers for the Steps component. */\nexport type StepsSize = 'small' | 'medium' | 'large';\n/** Available color variants for the Steps component. */\nexport type StepsColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for individual Step items.\n */\nexport interface StepItemProps {\n  /**\n   * Step label/title. On a `clickable` step it's rendered inside the step's\n   * `<button>`, so it has to be phrasing content, like text, a `<span>` or an\n   * icon, with no link, button or other control in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside its list item, which calls\n   * `onStepClick`, and the current step's `aria-current` goes on that button.\n   */\n  clickable?: boolean;\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for the Steps component.\n * @extraProp {React.ReactNode} [children] - Step children (alternative to items).\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface StepsProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Current active step (0-indexed). */\n  value?: number;\n  /** Array of step items. */\n  items?: StepItemProps[];\n  /** Size of the steps. */\n  size?: StepsSize;\n  /** Color variant. */\n  color?: StepsColor;\n  /** Show step markers. Default: true. */\n  hasMarker?: boolean;\n  /** Enable animations. Default: true. */\n  animated?: boolean;\n  /** Use rounded markers. Default: true. */\n  rounded?: boolean;\n  /** Vertical layout. */\n  vertical?: boolean;\n  /**\n   * Position of labels. `right` and `left` mean the end and the start of the\n   * line, so in a right-to-left page `right` puts each label to the left of\n   * its marker, and `left` to the right.\n   */\n  labelPosition?: 'bottom' | 'right' | 'left';\n  /** Mobile display mode. */\n  mobileMode?: 'minimal' | 'compact' | 'right';\n  /** Displays step numbers in the markers. */\n  showStepNumbers?: boolean;\n  /**\n   * Shows previous/next navigation buttons. They render `type=\"button\"`, so a\n   * multi-step form wrapped around the steps is not submitted by moving\n   * between them.\n   */\n  hasNavigation?: boolean;\n  /** Label for the previous button. */\n  prevLabel?: string;\n  /** Label for the next button. */\n  nextLabel?: string;\n  /** Callback when previous button is clicked. */\n  onPrev?: () => void;\n  /** Callback when next button is clicked. */\n  onNext?: () => void;\n  /** Callback when a step is clicked. */\n  onStepClick?: (step: number) => void;\n}\n\n/**\n * Props for the Step subcomponent.\n */\nexport interface StepProps\n  extends\n    Omit<React.LiHTMLAttributes<HTMLLIElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether this step is active */\n  isActive?: boolean;\n  /** Whether this step is completed */\n  isCompleted?: boolean;\n  /**\n   * Step label/title, or pass it as `children`. On a `clickable` step it's\n   * rendered inside the step's `<button>`, so it has to be phrasing content,\n   * like text, a `<span>` or an icon, with no link, button or other control\n   * in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside the `<li>`, which calls\n   * `onClick`, and `aria-current` goes on that button. The `<li>` keeps the\n   * rest of the props.\n   */\n  clickable?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /**\n   * Step number to display in marker (1-indexed), written the way the\n   * `locale` of a `LocaleProvider` around it writes numbers.\n   */\n  stepNumber?: number;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n}\n\n/**\n * Individual Step component for use inside Steps.\n *\n * @function\n * @param {StepProps} props - Props for the Step component.\n * @returns {JSX.Element} The rendered step segment.\n */\nexport const Step: React.FC<StepProps> = ({\n  isActive = false,\n  isCompleted = false,\n  label,\n  icon,\n  clickable = false,\n  onClick,\n  stepNumber,\n  completedIcon,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const formatNumber = useNumberFormat();\n\n  const stepClasses = classNames(\n    usePrefixedClassNames('steps-segment', {\n      'is-active': isActive,\n      'is-completed': isCompleted,\n    }),\n    bulmaHelperClasses,\n    className\n  );\n  const stepsLinkClass = usePrefixedClassNames('steps-link');\n  const stepsMarkerClass = usePrefixedClassNames('steps-marker');\n  const stepsContentClass = usePrefixedClassNames('steps-content');\n  const stepsTitleClass = usePrefixedClassNames('steps-title');\n\n  const resolvedCompletedIcon =\n    completedIcon === undefined ? '\\u2713' : completedIcon;\n  const markerContent =\n    icon ||\n    (isCompleted && resolvedCompletedIcon\n      ? resolvedCompletedIcon\n      : stepNumber == null || !formatNumber\n        ? (stepNumber ?? null)\n        : formatNumber(stepNumber));\n  const title = label || children;\n  const current = isActive ? 'step' : undefined;\n\n  // The step stays a list item, and a real button inside it does the\n  // clicking, so the list keeps its items and the button brings Enter, Space\n  // and focus with it. A button holds only phrasing content, so its parts\n  // are spans.\n  if (clickable) {\n    return (\n      <li className={stepClasses} {...rest}>\n        <button\n          type=\"button\"\n          className={stepsLinkClass}\n          onClick={() => onClick?.()}\n          aria-current={current}\n        >\n          <span className={stepsMarkerClass}>{markerContent}</span>\n          {title && (\n            <span className={stepsContentClass}>\n              <span className={stepsTitleClass}>{title}</span>\n            </span>\n          )}\n        </button>\n      </li>\n    );\n  }\n\n  return (\n    <li className={stepClasses} aria-current={current} {...rest}>\n      <div className={stepsLinkClass}>\n        <span className={stepsMarkerClass}>{markerContent}</span>\n        {title && (\n          <div className={stepsContentClass}>\n            <p className={stepsTitleClass}>{title}</p>\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n\n/**\n * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.\n *\n * @function\n * @param {StepsProps} props - Props for the Steps component.\n * @returns {JSX.Element} The rendered steps component.\n *\n * @example\n * // Basic steps with items\n * <Steps\n *   value={1}\n *   items={[\n *     { label: 'Account' },\n *     { label: 'Profile' },\n *     { label: 'Complete' },\n *   ]}\n * />\n *\n * @example\n * // Clickable steps with navigation\n * <Steps\n *   value={currentStep}\n *   onStepClick={(step) => setCurrentStep(step)}\n *   hasNavigation\n *   items={[\n *     { label: 'Step 1', clickable: true },\n *     { label: 'Step 2', clickable: true },\n *     { label: 'Step 3', clickable: true },\n *   ]}\n * />\n */\nconst StepsComponent: React.FC<StepsProps> = ({\n  value = 0,\n  items,\n  size,\n  color,\n  hasMarker = true,\n  animated = true,\n  rounded = true,\n  vertical = false,\n  labelPosition = 'bottom',\n  mobileMode,\n  showStepNumbers = true,\n  hasNavigation = false,\n  prevLabel,\n  nextLabel,\n  onPrev,\n  onNext,\n  onStepClick,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate classes for the wrapper div\n  const stepsClasses = usePrefixedClassNames('steps', {\n    [`is-${size}`]: size,\n    [`is-${color}`]: color,\n    'has-marker': hasMarker,\n    'is-animated': animated,\n    'is-rounded': rounded,\n    'is-vertical': vertical,\n    [`has-label-${labelPosition}`]:\n      labelPosition && (labelPosition !== 'bottom' || vertical),\n    [`is-${mobileMode}`]: mobileMode,\n  });\n\n  const combinedClasses = classNames(\n    stepsClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Generate classes for the ul (list)\n  const listClasses = usePrefixedClassNames('steps-list', {\n    'is-vertical': vertical,\n  });\n  const stepsNavigationClass = usePrefixedClassNames('steps-navigation');\n  const prevButtonClass = usePrefixedClassNames('button');\n  const nextButtonClass = usePrefixedClassNames('button', {\n    'is-primary': true,\n  });\n\n  // Count total steps for navigation\n  const totalSteps = items ? items.length : React.Children.count(children);\n\n  // Render items if provided\n  const renderSteps = () => {\n    if (items && items.length > 0) {\n      return items.map((item, index) => (\n        <Step\n          key={index}\n          isActive={index === value}\n          isCompleted={index < value}\n          label={item.label}\n          icon={item.icon}\n          completedIcon={item.completedIcon}\n          clickable={item.clickable}\n          stepNumber={showStepNumbers ? index + 1 : undefined}\n          onClick={\n            item.clickable && onStepClick ? () => onStepClick(index) : undefined\n          }\n          className={item.className}\n        />\n      ));\n    }\n\n    // If children are provided, clone them with active/completed states\n    if (children) {\n      return React.Children.map(children, (child, index) => {\n        if (React.isValidElement<StepProps>(child)) {\n          return React.cloneElement(child, {\n            isActive: index === value,\n            isCompleted: index < value,\n            stepNumber: showStepNumbers ? index + 1 : undefined,\n            onClick:\n              child.props.clickable && onStepClick\n                ? () => onStepClick(index)\n                : child.props.onClick,\n          });\n        }\n        return child;\n      });\n    }\n\n    return null;\n  };\n\n  // role=\"list\" restates the <ul>'s own role, for Safari: WebKit stops\n  // exposing a list as one once its markers are hidden, as they are here,\n  // unless the role is set explicitly.\n  return (\n    <div className={combinedClasses} {...rest}>\n      <ul className={listClasses} role=\"list\">\n        {renderSteps()}\n      </ul>\n      {hasNavigation && (\n        <div className={stepsNavigationClass}>\n          <button\n            type=\"button\"\n            className={prevButtonClass}\n            disabled={value === 0}\n            onClick={onPrev ?? (() => onStepClick?.(value - 1))}\n          >\n            {prevLabel ?? 'Previous'}\n          </button>\n          <button\n            type=\"button\"\n            className={nextButtonClass}\n            disabled={value === totalSteps - 1}\n            onClick={onNext ?? (() => onStepClick?.(value + 1))}\n          >\n            {nextLabel ?? 'Next'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Attach Step as static property\nexport const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');\n\nexport default Steps;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;AAqIA;;;;;;AAMG;AACI,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,UAAU,EACV,aAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AAEtC,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,eAAe,EAAE;AACrC,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,cAAc,EAAE,WAAW;AAC5B,KAAA,CAAC,EACF,kBAAkB,EAClB,SAAS,CACV;AACD,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,YAAY,CAAC;AAC1D,IAAA,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,cAAc,CAAC;AAC9D,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,eAAe,CAAC;AAChE,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,aAAa,CAAC;AAE5D,IAAA,MAAM,qBAAqB,GACzB,aAAa,KAAK,SAAS,GAAG,QAAQ,GAAG,aAAa;IACxD,MAAM,aAAa,GACjB,IAAI;SACH,WAAW,IAAI;AACd,cAAE;AACF,cAAE,UAAU,IAAI,IAAI,IAAI,CAAC;AACvB,mBAAG,UAAU,IAAI,IAAI;AACrB,kBAAE,YAAY,CAAC,UAAU,CAAC,CAAC;AACjC,IAAA,MAAM,KAAK,GAAG,KAAK,IAAI,QAAQ;IAC/B,MAAM,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS;;;;;IAM7C,IAAI,SAAS,EAAE;QACb,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,EAAA,GAAM,IAAI,EAAA,QAAA,EAClCC,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,MAAM,OAAO,IAAI,EAAA,cAAA,EACZ,OAAO,EAAA,QAAA,EAAA,CAErBD,cAAM,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAAG,aAAa,EAAA,CAAQ,EACxD,KAAK,KACJA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,iBAAiB,YAChCA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,EAAA,CAC3C,CACR,CAAA,EAAA,CACM,EAAA,CACN;IAET;AAEA,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,EAAA,cAAA,EAAgB,OAAO,EAAA,GAAM,IAAI,YACzDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAC5BD,cAAM,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAAG,aAAa,GAAQ,EACxD,KAAK,KACJA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,YAC/BA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,eAAe,EAAA,QAAA,EAAG,KAAK,EAAA,CAAK,EAAA,CACtC,CACP,CAAA,EAAA,CACG,EAAA,CACH;AAET;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACH,MAAM,cAAc,GAAyB,CAAC,EAC5C,KAAK,GAAG,CAAC,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,QAAQ,EACxB,UAAU,EACV,eAAe,GAAG,IAAI,EACtB,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,SAAS,EACT,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;;AAG3D,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAClD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACpB,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,YAAY,EAAE,OAAO;AACrB,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,CAAC,CAAA,UAAA,EAAa,aAAa,CAAA,CAAE,GAC3B,aAAa,KAAK,aAAa,KAAK,QAAQ,IAAI,QAAQ,CAAC;AAC3D,QAAA,CAAC,CAAA,GAAA,EAAM,UAAU,CAAA,CAAE,GAAG,UAAU;AACjC,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;;AAGD,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,YAAY,EAAE;AACtD,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA,CAAC;AACF,IAAA,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC;AACtE,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,QAAQ,CAAC;AACvD,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AACtD,QAAA,YAAY,EAAE,IAAI;AACnB,KAAA,CAAC;;IAGF,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;;IAGxE,MAAM,WAAW,GAAG,MAAK;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3BA,GAAA,CAAC,IAAI,EAAA,EAEH,QAAQ,EAAE,KAAK,KAAK,KAAK,EACzB,WAAW,EAAE,KAAK,GAAG,KAAK,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,eAAe,GAAG,KAAK,GAAG,CAAC,GAAG,SAAS,EACnD,OAAO,EACL,IAAI,CAAC,SAAS,IAAI,WAAW,GAAG,MAAM,WAAW,CAAC,KAAK,CAAC,GAAG,SAAS,EAEtE,SAAS,EAAE,IAAI,CAAC,SAAS,IAXpB,KAAK,CAYV,CACH,CAAC;QACJ;;QAGA,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAI;AACnD,gBAAA,IAAI,KAAK,CAAC,cAAc,CAAY,KAAK,CAAC,EAAE;AAC1C,oBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBAC/B,QAAQ,EAAE,KAAK,KAAK,KAAK;wBACzB,WAAW,EAAE,KAAK,GAAG,KAAK;wBAC1B,UAAU,EAAE,eAAe,GAAG,KAAK,GAAG,CAAC,GAAG,SAAS;AACnD,wBAAA,OAAO,EACL,KAAK,CAAC,KAAK,CAAC,SAAS,IAAI;AACvB,8BAAE,MAAM,WAAW,CAAC,KAAK;AACzB,8BAAE,KAAK,CAAC,KAAK,CAAC,OAAO;AAC1B,qBAAA,CAAC;gBACJ;AACA,gBAAA,OAAO,KAAK;AACd,YAAA,CAAC,CAAC;QACJ;AAEA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;;;;IAKD,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,KAAM,IAAI,EAAA,QAAA,EAAA,CACvCD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,EAAE,IAAI,EAAC,MAAM,EAAA,QAAA,EACpC,WAAW,EAAE,GACX,EACJ,aAAa,KACZC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAClCD,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,KAAK,KAAK,CAAC,EACrB,OAAO,EAAE,MAAM,KAAK,MAAM,WAAW,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAA,QAAA,EAElD,SAAS,IAAI,UAAU,EAAA,CACjB,EACTA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,KAAK,KAAK,UAAU,GAAG,CAAC,EAClC,OAAO,EAAE,MAAM,KAAK,MAAM,WAAW,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAA,QAAA,EAElD,SAAS,IAAI,MAAM,GACb,CAAA,EAAA,CACL,CACP,CAAA,EAAA,CACG;AAEV,CAAC;AAED;AACO,MAAM,KAAK,GAAG,iBAAiB,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO;;"}
+{"version":3,"file":"Steps.js","sources":["../../../src/components/Steps.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useNumberFormat } from '../helpers/localeFormat';\n\n/** Available size modifiers for the Steps component. */\nexport type StepsSize = 'small' | 'medium' | 'large';\n/** Available color variants for the Steps component. */\nexport type StepsColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for individual Step items.\n */\nexport interface StepItemProps {\n  /**\n   * Step label/title. On a `clickable` step it's rendered inside the step's\n   * `<button>`, so it has to be phrasing content, like text, a `<span>` or an\n   * icon, with no link, button or other control in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside its list item, which calls\n   * `onStepClick`, and the current step's `aria-current` goes on that button.\n   */\n  clickable?: boolean;\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for the Steps component.\n * @extraProp {React.ReactNode} [children] - Step children (alternative to items).\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface StepsProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Current active step (0-indexed). */\n  value?: number;\n  /** Array of step items. */\n  items?: StepItemProps[];\n  /** Size of the steps. */\n  size?: StepsSize;\n  /** Color variant. */\n  color?: StepsColor;\n  /** Show step markers. Default: true. */\n  hasMarker?: boolean;\n  /** Enable animations. Default: true. */\n  animated?: boolean;\n  /** Use rounded markers. Default: true. */\n  rounded?: boolean;\n  /** Vertical layout. */\n  vertical?: boolean;\n  /**\n   * Position of labels. `right` and `left` mean the end and the start of the\n   * line, so in a right-to-left page `right` puts each label to the left of\n   * its marker, and `left` to the right.\n   */\n  labelPosition?: 'bottom' | 'right' | 'left';\n  /** Mobile display mode. */\n  mobileMode?: 'minimal' | 'compact' | 'right';\n  /** Displays step numbers in the markers. */\n  showStepNumbers?: boolean;\n  /**\n   * Shows previous/next navigation buttons. They render `type=\"button\"`, so a\n   * multi-step form wrapped around the steps is not submitted by moving\n   * between them.\n   */\n  hasNavigation?: boolean;\n  /** Label for the previous button. */\n  prevLabel?: string;\n  /** Label for the next button. */\n  nextLabel?: string;\n  /** Callback when previous button is clicked. */\n  onPrev?: () => void;\n  /** Callback when next button is clicked. */\n  onNext?: () => void;\n  /** Callback when a step is clicked. */\n  onStepClick?: (step: number) => void;\n}\n\n/**\n * Props for the Step subcomponent.\n */\nexport interface StepProps\n  extends\n    Omit<React.LiHTMLAttributes<HTMLLIElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether this step is active */\n  isActive?: boolean;\n  /** Whether this step is completed */\n  isCompleted?: boolean;\n  /**\n   * Step label/title, or pass it as `children`. On a `clickable` step it's\n   * rendered inside the step's `<button>`, so it has to be phrasing content,\n   * like text, a `<span>` or an icon, with no link, button or other control\n   * in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside the `<li>`, which calls\n   * `onClick`, and `aria-current` goes on that button. The `<li>` keeps the\n   * rest of the props.\n   */\n  clickable?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /**\n   * Step number to display in marker (1-indexed), written the way the\n   * `locale` of a `LocaleProvider` around it writes numbers.\n   */\n  stepNumber?: number;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n}\n\n/**\n * Individual Step component for use inside Steps.\n *\n * @function\n * @param {StepProps} props - Props for the Step component.\n * @returns {JSX.Element} The rendered step segment.\n */\nexport const Step: React.FC<StepProps> = ({\n  isActive = false,\n  isCompleted = false,\n  label,\n  icon,\n  clickable = false,\n  onClick,\n  stepNumber,\n  completedIcon,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const formatNumber = useNumberFormat();\n\n  const stepClasses = classNames(\n    usePrefixedClassNames('steps-segment', {\n      'is-active': isActive,\n      'is-completed': isCompleted,\n    }),\n    bulmaHelperClasses,\n    className\n  );\n  const stepsLinkClass = usePrefixedClassNames('steps-link');\n  const stepsMarkerClass = usePrefixedClassNames('steps-marker');\n  const stepsContentClass = usePrefixedClassNames('steps-content');\n  const stepsTitleClass = usePrefixedClassNames('steps-title');\n\n  const resolvedCompletedIcon =\n    completedIcon === undefined ? '\\u2713' : completedIcon;\n  const markerContent =\n    icon ||\n    (isCompleted && resolvedCompletedIcon\n      ? resolvedCompletedIcon\n      : stepNumber == null || !formatNumber\n        ? (stepNumber ?? null)\n        : formatNumber(stepNumber));\n  const title = label || children;\n  const current = isActive ? 'step' : undefined;\n\n  // The step stays a list item, and a real button inside it does the\n  // clicking, so the list keeps its items and the button brings Enter, Space\n  // and focus with it. A button holds only phrasing content, so its parts\n  // are spans.\n  if (clickable) {\n    return (\n      <li className={stepClasses} {...rest}>\n        <button\n          type=\"button\"\n          className={stepsLinkClass}\n          onClick={() => onClick?.()}\n          aria-current={current}\n        >\n          <span className={stepsMarkerClass}>{markerContent}</span>\n          {title && (\n            <span className={stepsContentClass}>\n              <span className={stepsTitleClass}>{title}</span>\n            </span>\n          )}\n        </button>\n      </li>\n    );\n  }\n\n  return (\n    <li className={stepClasses} aria-current={current} {...rest}>\n      <div className={stepsLinkClass}>\n        <span className={stepsMarkerClass}>{markerContent}</span>\n        {title && (\n          <div className={stepsContentClass}>\n            <p className={stepsTitleClass}>{title}</p>\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n\n/**\n * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.\n *\n * @function\n * @param {StepsProps} props - Props for the Steps component.\n * @returns {JSX.Element} The rendered steps component.\n *\n * @example\n * // Basic steps with items\n * <Steps\n *   value={1}\n *   items={[\n *     { label: 'Account' },\n *     { label: 'Profile' },\n *     { label: 'Complete' },\n *   ]}\n * />\n *\n * @example\n * // Clickable steps with navigation\n * <Steps\n *   value={currentStep}\n *   onStepClick={(step) => setCurrentStep(step)}\n *   hasNavigation\n *   items={[\n *     { label: 'Step 1', clickable: true },\n *     { label: 'Step 2', clickable: true },\n *     { label: 'Step 3', clickable: true },\n *   ]}\n * />\n */\nconst StepsComponent: React.FC<StepsProps> = ({\n  value = 0,\n  items,\n  size,\n  color,\n  hasMarker = true,\n  animated = true,\n  rounded = true,\n  vertical = false,\n  labelPosition = 'bottom',\n  mobileMode,\n  showStepNumbers = true,\n  hasNavigation = false,\n  prevLabel,\n  nextLabel,\n  onPrev,\n  onNext,\n  onStepClick,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate classes for the wrapper div\n  const stepsClasses = usePrefixedClassNames('steps', {\n    [`is-${size}`]: size,\n    [`is-${color}`]: color,\n    'has-marker': hasMarker,\n    'is-animated': animated,\n    'is-rounded': rounded,\n    'is-vertical': vertical,\n    [`has-label-${labelPosition}`]:\n      labelPosition && (labelPosition !== 'bottom' || vertical),\n    [`is-${mobileMode}`]: mobileMode,\n  });\n\n  const combinedClasses = classNames(\n    stepsClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Generate classes for the ul (list)\n  const listClasses = usePrefixedClassNames('steps-list', {\n    'is-vertical': vertical,\n  });\n  const stepsNavigationClass = usePrefixedClassNames('steps-navigation');\n  const prevButtonClass = usePrefixedClassNames('button');\n  const nextButtonClass = usePrefixedClassNames('button', {\n    'is-primary': true,\n  });\n\n  // Count total steps for navigation\n  const totalSteps = items ? items.length : React.Children.count(children);\n\n  // Render items if provided\n  const renderSteps = () => {\n    if (items && items.length > 0) {\n      return items.map((item, index) => (\n        <Step\n          key={index}\n          isActive={index === value}\n          isCompleted={index < value}\n          label={item.label}\n          icon={item.icon}\n          completedIcon={item.completedIcon}\n          clickable={item.clickable}\n          stepNumber={showStepNumbers ? index + 1 : undefined}\n          onClick={\n            item.clickable && onStepClick ? () => onStepClick(index) : undefined\n          }\n          className={item.className}\n        />\n      ));\n    }\n\n    // If children are provided, clone them with active/completed states\n    if (children) {\n      return React.Children.map(children, (child, index) => {\n        if (React.isValidElement<StepProps>(child)) {\n          return React.cloneElement(child, {\n            isActive: index === value,\n            isCompleted: index < value,\n            stepNumber: showStepNumbers ? index + 1 : undefined,\n            onClick:\n              child.props.clickable && onStepClick\n                ? () => onStepClick(index)\n                : child.props.onClick,\n          });\n        }\n        return child;\n      });\n    }\n\n    return null;\n  };\n\n  // role=\"list\" restates the <ul>'s own role, for Safari: WebKit stops\n  // exposing a list as one once its markers are hidden, as they are here,\n  // unless the role is set explicitly.\n  return (\n    <div className={combinedClasses} {...rest}>\n      <ul className={listClasses} role=\"list\">\n        {renderSteps()}\n      </ul>\n      {hasNavigation && (\n        <div className={stepsNavigationClass}>\n          <button\n            type=\"button\"\n            className={prevButtonClass}\n            disabled={value === 0}\n            onClick={onPrev ?? (() => onStepClick?.(value - 1))}\n          >\n            {prevLabel ?? 'Previous'}\n          </button>\n          <button\n            type=\"button\"\n            className={nextButtonClass}\n            disabled={value === totalSteps - 1}\n            onClick={onNext ?? (() => onStepClick?.(value + 1))}\n          >\n            {nextLabel ?? 'Next'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Attach Step as static property\nexport const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');\n\nexport default Steps;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Tabs.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useEffect, useRef, useCallback, useState, useId, useContext } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';