@bspk/ui 1.3.9 → 1.3.10

package/dist/hooks/useLongPress.js

@@ -1,50 +1,34 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { useTimeout } from './useTimeout';
-export const MIN_INTERVAL = 250; // Minimum interval in milliseconds
-export const INTERVAL_DECREASE_FACTOR = 0.75; // Percent by which the interval decreases each time
-export const INITIAL_INTERVAL = 1000; // Initial interval in milliseconds
-const isTriggerElementDisabled = (element) => !element ||
-    element.disabled ||
-    element.getAttribute('disabled') === 'true' ||
-    element.getAttribute('aria-disabled') === 'true' ||
-    element.getAttribute('data-disabled') === 'true' ||
-    !element.isConnected ||
-    !element.offsetParent;
-export function useLongPress(callback, disabled) {
+/**
+ * A hook that provides long press functionality. The provided callback will be invoked once immediately on press, and
+ * then repeatedly after a delay, with the delay decreasing by a specified amount after each repeat.
+ */
+export function useLongPress({ callback, delay: initialDelay = 750, delayDecrement = 15, delayMin = 100, }) {
     const timeout = useTimeout();
-    const intervalRef = useRef(INITIAL_INTERVAL);
-    const [triggerElement, setTriggerElement] = useState(null);
-    if (disabled)
-        return {
-            onMouseDown: () => { },
-            onMouseUp: () => { },
-            setTriggerElement: () => { },
-        };
-    const run = () => {
-        // If the element is not connected or disabled, clear the timeout, and prevent the callback
-        if (isTriggerElementDisabled(triggerElement))
+    const isPressing = useRef(false);
+    const delay = useRef(initialDelay);
+    const setPressing = (pressing) => {
+        isPressing.current = pressing;
+        if (pressing) {
+            if (!callback())
+                return setPressing(false);
+            timeout.set(() => {
+                if (!isPressing.current)
+                    return setPressing(false);
+                const decrementMs = (delay.current * delayDecrement) / 100;
+                delay.current = delay.current <= delayMin ? delayMin : delay.current - decrementMs;
+                setPressing(true);
+            }, delay.current);
             return;
-        callback();
-        // Decrease the interval for the next call, but not below MIN_INTERVAL
-        if (intervalRef.current > MIN_INTERVAL)
-            intervalRef.current = intervalRef.current * INTERVAL_DECREASE_FACTOR;
-        timeout.set(run, intervalRef.current);
+        }
+        delay.current = initialDelay;
+        timeout.clear();
     };
     return {
-        onMouseDown: (event) => {
-            event.preventDefault();
-            intervalRef.current = INITIAL_INTERVAL;
-            callback();
-            timeout.set(run, intervalRef.current);
-        },
-        onMouseUp: () => {
-            timeout.clear();
-        },
-        onMouseLeave: () => {
-            timeout.clear();
-        },
-        setTriggerElement,
+        onPointerDown: () => setPressing(true),
+        onPointerLeave: () => setPressing(false),
+        onPointerUp: () => setPressing(false),
     };
 }
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=useLongPress.js.map

package/dist/hooks/useLongPress.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAc,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,CAAC,mCAAmC;AACpE,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAC,CAAC,oDAAoD;AAClG,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,mCAAmC;AAEzE,MAAM,wBAAwB,GAAG,CAAC,OAA2B,EAAE,EAAE,CAC7D,CAAC,OAAO;IACP,OAA6B,CAAC,QAAQ;IACvC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,MAAM;IAC3C,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;IAChD,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;IAChD,CAAC,OAAO,CAAC,WAAW;IACpB,CAAC,OAAO,CAAC,YAAY,CAAC;AAE1B,MAAM,UAAU,YAAY,CAAC,QAAoB,EAAE,QAAiB;IAChE,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAE7C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAErF,IAAI,QAAQ;QACR,OAAO;YACH,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;YACrB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;YACnB,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;SAC9B,CAAC;IAEN,MAAM,GAAG,GAAG,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,wBAAwB,CAAC,cAAc,CAAC;YAAE,OAAO;QACrD,QAAQ,EAAE,CAAC;QACX,sEAAsE;QACtE,IAAI,WAAW,CAAC,OAAO,GAAG,YAAY;YAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,wBAAwB,CAAC;QAC7G,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO;QACH,WAAW,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,OAAO,GAAG,gBAAgB,CAAC;YACvC,QAAQ,EAAE,CAAC;YACX,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACf,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QACD,iBAAiB;KACpB,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAyB1C;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EACzB,QAAQ,EACR,KAAK,EAAE,YAAY,GAAG,GAAG,EACzB,cAAc,GAAG,EAAE,EACnB,QAAQ,GAAG,GAAG,GACD;IACb,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAEnC,MAAM,WAAW,GAAG,CAAC,QAAiB,EAAE,EAAE;QACtC,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC;QAE9B,IAAI,QAAQ,EAAE,CAAC;YACX,IAAI,CAAC,QAAQ,EAAE;gBAAE,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;YAE3C,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE;gBACb,IAAI,CAAC,UAAU,CAAC,OAAO;oBAAE,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;gBAEnD,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC,GAAG,GAAG,CAAC;gBAC3D,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;gBAEnF,WAAW,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO;QACX,CAAC;QAED,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;QAC7B,OAAO,CAAC,KAAK,EAAE,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO;QACH,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;QACtC,cAAc,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;QACxC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;KACxC,CAAC;AACN,CAAC"}

package/dist/styles/base.css

@@ -241,6 +241,15 @@ body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
   left: auto;
 }
 
+[data-truncated] {
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: transparent;
+}
+
 [data-sr-only] {
   height: 1px;
   overflow: hidden;

package/dist/styles/base.css.js

@@ -244,6 +244,15 @@ body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
   left: auto;
 }
 
+[data-truncated] {
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: transparent;
+}
+
 [data-sr-only] {
   height: 1px;
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.9",
+    "version": "1.3.10",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/components/BannerAlert/BannerAlert.tsx

@@ -56,13 +56,13 @@ export type BannerAlertProps = {
  *
  *     <BannerAlert
  *         elevated={true}
- *         variant="error"
- *         header="Error"
- *         body="There was an error processing your request."
+ *         variant="success"
+ *         header="Success"
+ *         body="Your request was processed successfully."
  *         onClose={() => sendSnackbar('Alert closed')}
  *         callToAction={{
- *             label = 'Click me',
- *             onClick = () => action('Call to action clicked!'),
+ *             label: 'Click me',
+ *             onClick: () => action('Call to action clicked!'),
  *         }}
  *     />;
  *

package/src/components/Breadcrumb/BreadcrumbDropdown.tsx

@@ -37,6 +37,12 @@ export type BreadcrumbDropdownProps = ScrollListItemsStyleProps & {
     id: string;
 };
 
+/**
+ * The BreadcrumbDropdown component is used to display a dropdown menu within a breadcrumb navigation.
+ *
+ * @name BreadcrumbDropdown
+ * @parent Breadcrumb
+ */
 export function BreadcrumbDropdown({ items: itemsProp, id, scrollLimit }: BreadcrumbDropdownProps) {
     const menuId = `${id}-menu`;
 

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -58,6 +58,7 @@ export const presets: Preset<CheckboxGroupProps>[] = [
 export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
     presets,
     defaultState: {
+        selectAll: true,
         options: [
             { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
             {

package/src/components/Drawer/Drawer.tsx

@@ -76,7 +76,6 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  * @name Drawer
  * @phase UXReview
  */
-
 export function Drawer({
     header,
     children,

package/src/components/Field/FieldDescription.tsx

@@ -1,6 +1,12 @@
 import { useFieldContext, describedById } from './utils';
 
-function FieldDescription({ children }: { children?: string }) {
+/**
+ * FieldDescription component displays a description associated with a form field.
+ *
+ * @name FieldDescription
+ * @parent Field
+ */
+export function FieldDescription({ children }: { children?: string }) {
     const { id } = useFieldContext();
 
     return children ? (
@@ -9,7 +15,3 @@ function FieldDescription({ children }: { children?: string }) {
         </p>
     ) : null;
 }
-
-FieldDescription.displayName = 'FieldDescription';
-
-export { FieldDescription };

package/src/components/Field/FieldError.tsx

@@ -6,6 +6,12 @@ export type FieldErrorProps = {
     children?: string;
 };
 
+/**
+ * FieldError component displays an error message associated with a form field.
+ *
+ * @name FieldError
+ * @parent Field
+ */
 export function FieldError({ children }: FieldErrorProps) {
     const { id } = useFieldContext();
 

package/src/components/Field/FieldLabel.tsx

@@ -14,6 +14,12 @@ export type FieldLabelProps<As extends ElementType = ElementType> = Pick<FieldCo
     as?: As;
 };
 
+/**
+ * FieldLabel component displays a label associated with a form field.
+ *
+ * @name FieldLabel
+ * @parent Field
+ */
 export function FieldLabel<As extends ElementType = ElementType>({
     children,
     labelTrailing,

package/src/components/Field/utils.ts

@@ -28,6 +28,11 @@ export type FieldContext = FieldContextProps & {
 
 export const fieldContext = createContext<FieldContext | null>(null);
 
+/**
+ * Retrieves the current Field context.
+ *
+ * Will return a default context if used outside of a Field component.
+ */
 export function useFieldContext(): FieldContext {
     return (
         useContext(fieldContext) || {

package/src/components/InlineAlert/SvgWarningTwoTone.tsx

@@ -1,3 +1,9 @@
+/**
+ * SvgWarningTwoTone component renders a two-tone warning SVG icon.
+ *
+ * @name SvgWarningTwoTone
+ * @parent InlineAlert
+ */
 export function SvgWarningTwoTone() {
     return (
         <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

package/src/components/InputNumber/IncrementButton.tsx

@@ -3,29 +3,39 @@ import { SvgRemove } from '@bspk/icons/Remove';
 import { useLongPress } from '-/hooks/useLongPress';
 
 export type IncrementButtonProps = {
+    /** Whether the button is disabled. */
     disabled: boolean;
-    increment: -1 | 1;
-    onIncrement: (increment: -1 | 1) => void;
+    /** The kind of increment button, either 'add' or 'remove'. */
+    kind: 'add' | 'remove';
+    /** The ID of the associated input element. */
     inputId: string;
+    /** Function to trigger the increment action. */
+    triggerIncrement: (kind: 'add' | 'remove') => boolean;
 };
 
-export function IncrementButton({ increment, disabled, onIncrement, inputId }: IncrementButtonProps) {
-    const add = increment === 1;
-
-    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
+/**
+ * A button component for incrementing or decrementing the InputNumber.
+ *
+ * @name IncrementButton
+ * @parent InputNumber
+ */
+export function IncrementButton({ inputId, kind, disabled, triggerIncrement }: IncrementButtonProps) {
+    const { ...pressHandlers } = useLongPress({
+        callback: () => triggerIncrement(kind),
+    });
 
     return (
         <button
-            {...handlers}
+            {...pressHandlers}
             aria-controls={inputId}
-            aria-hidden="true"
-            data-increment={increment}
+            aria-label={kind === 'add' ? 'Increase value' : 'Decrease value'}
+            data-bspk="input-number--increment-button"
+            data-kind={kind}
             disabled={disabled}
-            ref={setTriggerElement}
             tabIndex={-1}
             type="button"
         >
-            {add ? <SvgAdd /> : <SvgRemove />}
+            {kind === 'add' ? <SvgAdd aria-hidden /> : <SvgRemove aria-hidden />}
         </button>
     );
 }

package/src/components/InputNumber/InputNumber.tsx

@@ -1,14 +1,16 @@
 import './input-number.scss';
-import { useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { IncrementButton } from './IncrementButton';
 import { useFieldInit } from '-/components/Field';
 import { useId } from '-/hooks/useId';
 import { CommonProps, FieldControlProps } from '-/types/common';
 
-function isNumber(value: unknown, fallbackValue: number | undefined = undefined): number | undefined {
+function isNumber(value: unknown): number | undefined;
+function isNumber(value: unknown, fallbackValue: number): number;
+function isNumber(value: unknown, fallbackValue?: number): number | undefined {
     if (typeof value === 'number') return value;
     if (typeof value !== 'string') return fallbackValue;
-    const num = Number(value);
+    const num = parseFloat(value);
     return isNaN(num) ? fallbackValue : num;
 }
 
@@ -108,14 +110,25 @@ export function InputNumber({
         readOnly,
         invalidProp,
     });
-
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
     const inputId = useId(id);
-    const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
+    const value = isNumber(valueProp, min);
+    const removeDisabled = disabled || value + step * -1 < min;
+    const addDisabled = disabled || value + step > max;
+
+    const valueRef = useRef(value);
 
-    const handleIncrement = (increment: -1 | 1) => {
-        onChange(value + increment * step);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+
+    const incrementHandler = (kind: 'add' | 'remove') => {
+        const increment = kind === 'add' ? step : step * -1;
+        const next = valueRef.current + increment;
+        if (next < min || next > max) return false;
+        onChange(next);
+        return true;
     };
 
     return (
@@ -128,14 +141,6 @@ export function InputNumber({
             data-size={size}
             data-stepper-input
         >
-            {!!centered && (
-                <IncrementButton
-                    disabled={disabled ? true : value + -1 < min}
-                    increment={-1}
-                    inputId={inputId}
-                    onIncrement={handleIncrement}
-                />
-            )}
             <input
                 {...inputElementProps}
                 aria-describedby={ariaDescribedBy || undefined}
@@ -151,32 +156,29 @@ export function InputNumber({
                 max={max}
                 min={min}
                 name={name}
+                onBlur={(e) => {
+                    const next = isNumber(e.target.value, min);
+                    e.target.value = next?.toString() || '';
+                    onChange(next);
+                }}
                 onChange={(e) => {
-                    onChange(isNumber(e.target.value));
+                    const next = isNumber(e.target.value, min);
+                    onChange(next);
                 }}
                 readOnly={readOnly}
                 required={required}
                 step={step}
                 type="number"
-                value={value}
+                value={value !== undefined ? value : ''}
             />
-            {!centered && (
-                <>
-                    <div aria-hidden data-divider />
-                    <IncrementButton
-                        disabled={!!disabled || value + -1 < min}
-                        increment={-1}
-                        inputId={inputId}
-                        onIncrement={handleIncrement}
-                    />
-                </>
-            )}
+            <div aria-hidden data-divider />
             <IncrementButton
-                disabled={!!disabled || value + 1 > max}
-                increment={1}
+                disabled={removeDisabled}
                 inputId={inputId}
-                onIncrement={handleIncrement}
+                kind="remove"
+                triggerIncrement={incrementHandler}
             />
+            <IncrementButton disabled={addDisabled} inputId={inputId} kind="add" triggerIncrement={incrementHandler} />
         </div>
     );
 }

package/src/components/InputNumber/InputNumberExample.tsx

@@ -6,4 +6,5 @@ export const InputNumberExample: ComponentExample<InputNumberProps> = {
         'aria-label': 'input number aria-label',
     },
     render: ({ props, Component }) => <Component {...props} />,
+    variants: false,
 };

package/src/components/InputNumber/input-number.scss

@@ -129,6 +129,16 @@
         --height: var(--spacing-sizing-12);
         --svg-width: var(--spacing-sizing-06);
     }
+
+    &[data-centered] {
+        button:first-of-type {
+            order: -1;
+        }
+
+        [data-divider] {
+            display: none;
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Link/Link.tsx

@@ -46,7 +46,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
+ *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
  * @phase UXReview

package/src/components/OTPInput/OTPInput.tsx

@@ -34,7 +34,11 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  * @example
  *     import { OTPInput } from '@bspk/ui/OTPInput';
  *
- *     <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     () => {
+ *         const [otpValue, setOtpValue] = useState('');
+ *
+ *         <OTPInput name="2-auth" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     };
  *
  * @name OTPInput
  * @phase UXReview

package/src/components/Pagination/PageList.tsx

@@ -3,6 +3,12 @@ import { Button } from '-/components/Button';
 
 export type PageListProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
 
+/**
+ * PageList component displays a list of page buttons for pagination.
+ *
+ * @name PageList
+ * @parent Pagination
+ */
 export function PageList({ numPages, onChange, value }: PageListProps) {
     return Array.from({ length: numPages }, (_, index) => {
         const page = index + 1;

package/src/components/Scrim/Scrim.tsx

@@ -23,7 +23,6 @@ export type ScrimProps = CommonProps<'owner'> & {
  * attention to a modal or sheet.
  *
  * @name Scrim
- *
  * @phase Utility
  */
 export function Scrim({ visible = true, owner, ...props }: ScrimProps) {

package/src/components/Select/Select.tsx

@@ -68,16 +68,16 @@ export type SelectProps = CommonProps<'size'> &
  * @example
  *     import { Select } from '@bspk/ui/Select';
  *
- *     const OPTIONS = [
- *         { id: '1', label: 'Option 1' },
- *         { id: '2', label: 'Option 2' },
- *         { id: '3', label: 'Option 3' },
- *         { id: '4', label: 'Option 4' },
- *         { id: '5', label: 'Option 5' },
- *         { id: '6', label: 'Option 6' },
- *     ];
- *
  *     () => {
+ *         const OPTIONS = [
+ *             { id: '1', label: 'Option 1' },
+ *             { id: '2', label: 'Option 2' },
+ *             { id: '3', label: 'Option 3' },
+ *             { id: '4', label: 'Option 4' },
+ *             { id: '5', label: 'Option 5' },
+ *             { id: '6', label: 'Option 6' },
+ *         ];
+ *
  *         const [selected, setSelected] = useState<string[]>([]);
  *
  *         return (
@@ -85,7 +85,7 @@ export type SelectProps = CommonProps<'size'> &
  *                 // standalone select example
  *                 <Select
  *                     aria-label="Select an option"
- *                     itemCount={5}
+ *                     scrollLimit={5}
  *                     name="example-select"
  *                     onChange={setSelected}
  *                     options={OPTIONS}
@@ -98,7 +98,7 @@ export type SelectProps = CommonProps<'size'> &
  *                 <Field>
  *                     <FieldLabel>Select an option</FieldLabel>
  *                     <Select
- *                         itemCount={5}
+ *                         scrollLimit={5}
  *                         name="example-select"
  *                         onChange={setSelected}
  *                         options={OPTIONS}

package/src/components/Skeleton/Circular.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonCircular component displays a circular skeleton loader.
+ *
+ * @name SkeletonCircular
+ * @parent Skeleton
+ */
 export function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="circular" />;
 }

package/src/components/Skeleton/Photo.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonPhoto component displays a photo skeleton loader.
+ *
+ * @name SkeletonPhoto
+ * @parent Skeleton
+ */
 export function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="photo" />;
 }

package/src/components/Skeleton/Profile.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonProfile component displays a profile skeleton loader.
+ *
+ * @name SkeletonProfile
+ * @parent Skeleton
+ */
 export function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="profile" />;
 }

package/src/components/Skeleton/Rectangular.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonRectangular component displays a rectangular skeleton loader.
+ *
+ * @name SkeletonRectangular
+ * @parent Skeleton
+ */
 export function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="rectangular" />;
 }

package/src/components/Skeleton/Thumbnail.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonThumbnail component displays a thumbnail skeleton loader.
+ *
+ * @name SkeletonThumbnail
+ * @parent Skeleton
+ */
 export function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="thumbnail" />;
 }

package/src/components/Slider/SliderIntervalDots.tsx

@@ -4,6 +4,12 @@ export type IntervalDotProps = Pick<SliderProps<SliderValue>, 'max' | 'min' | 'v
     step: number;
 };
 
+/**
+ * SliderIntervalDots component displays interval dots along a slider track.
+ *
+ * @name SliderIntervalDots
+ * @parent Slider
+ */
 export function SliderIntervalDots({ step, max, min, value }: IntervalDotProps) {
     if (step <= 0) return null;
 

package/src/components/Snackbar/Manager.tsx

@@ -33,7 +33,6 @@ const SnackbarEvent = createCustomEvent<SendSnackbarProps | string | typeof CLEA
  * context. :)
  *
  * @name SnackbarManager
- *
  * @phase UXReview
  */
 export function SnackbarManager({ defaultTimeout = 5000 }: SnackbarManagerProps) {

package/src/components/Snackbar/Snackbar.tsx

@@ -104,7 +104,6 @@ export type SnackbarProps = CommonProps<'id'> & {
  *     };
  *
  * @name Snackbar
- *
  * @phase UXReview
  */
 export function Snackbar({