@bspk/ui 1.1.34 → 1.2.0

package/dist/components/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;;;;;;;;;GAYG;AACH,SAAS,MAAM,CAAiC,EAC5C,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK;QACT,6EAA6E;QAC7E,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,MAAM,CAAiC,EACnD,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK;QACT,6EAA6E;QAC7E,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

package/dist/components/Layout/LayoutExample.d.ts

@@ -0,0 +1,3 @@
+import { LayoutProps } from './Layout';
+import { ComponentExample } from '-/utils/demo';
+export declare const LayoutExample: ComponentExample<LayoutProps>;

package/dist/components/Layout/LayoutExample.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LayoutExample = {
+    render: ({ props, Component }) => {
+        return (_jsxs(Component, { ...props, children: [_jsx("div", { children: "Alpha" }), _jsx("div", { children: "Beta" }), _jsx("div", { children: "Gamma" })] }));
+    },
+};
+//# sourceMappingURL=LayoutExample.js.map

package/dist/components/Layout/LayoutExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutExample.js","sourceRoot":"","sources":["../../../src/components/Layout/LayoutExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,kCAAgB,EAChB,iCAAe,EACf,kCAAgB,IACR,CACf,CAAC;IACN,CAAC;CACJ,CAAC"}

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes } from 'react';
-import { CommonPropsLibrary, ElementProps } from '../../index.js';
+import { CommonPropsLibrary, ElementProps } from '-/types/common';
 import './link.scss';
 export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
     /**
@@ -49,11 +49,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  *     }
  *
  * @name Link
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Link({ label, trailingIcon, size, variant, target, ...props }: ElementProps<LinkProps, 'a'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Link {
-    var bspkName: string;
-}
-export { Link };
+export declare function Link({ label, trailingIcon, size, variant, target, ...props }: ElementProps<LinkProps, 'a'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Link/Link.js

@@ -12,9 +12,9 @@ import './link.css.js';
  *     }
  *
  * @name Link
- * @phase DesignReview
+ * @phase UXReview
  */
-function Link({ label, trailingIcon, size, variant, target = '_self', ...props }) {
+export function Link({ label, trailingIcon, size, variant, target = '_self', ...props }) {
     let LazyIcon = undefined;
     if (trailingIcon === 'external')
         LazyIcon = lazy(() => import('@bspk/icons/OpenInNew').then((module) => ({ default: module.SvgOpenInNew })));
@@ -24,6 +24,4 @@ function Link({ label, trailingIcon, size, variant, target = '_self', ...props }
         LazyIcon = lazy(() => import('@bspk/icons/Link').then((module) => ({ default: module.SvgLink })));
     return (_jsxs("a", { ...props, "data-bspk": "link", "data-size": size, "data-subtle": variant === 'subtle' || undefined, "data-subtle-inverse": variant === 'subtle-inverse' || undefined, "data-trailing-icon": trailingIcon || undefined, target: trailingIcon === 'external' ? '_blank' : target, children: [_jsx("span", { children: label }), LazyIcon && (_jsx(Suspense, { fallback: null, children: _jsx(LazyIcon, {}) }))] }));
 }
-Link.bspkName = 'Link';
-export { Link };
 //# sourceMappingURL=Link.js.map

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,IAAI,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,aAAa,CAAC;AAwCrB;;;;;;;;;;;;GAYG;AACH,SAAS,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,KAAK,EAAgC;IAC1G,IAAI,QAAQ,GAA4D,SAAS,CAAC;IAElF,IAAI,YAAY,KAAK,UAAU;QAC3B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAEhH,IAAI,YAAY,KAAK,SAAS;QAC1B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CACjB,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,CAC7F,CAAC;IAEN,IAAI,YAAY,KAAK,MAAM;QACvB,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAEtG,OAAO,CACH,gBACQ,KAAK,eACC,MAAM,eACL,IAAI,iBACF,OAAO,KAAK,QAAQ,IAAI,SAAS,yBACzB,OAAO,KAAK,gBAAgB,IAAI,SAAS,wBAC1C,YAAY,IAAI,SAAS,EAC7C,MAAM,EAAE,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,aAEvD,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACT,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YACpB,KAAC,QAAQ,KAAG,GACL,CACd,IACD,CACP,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,IAAI,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,aAAa,CAAC;AAwCrB;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,KAAK,EAAgC;IACjH,IAAI,QAAQ,GAA4D,SAAS,CAAC;IAElF,IAAI,YAAY,KAAK,UAAU;QAC3B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAEhH,IAAI,YAAY,KAAK,SAAS;QAC1B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CACjB,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,CAC7F,CAAC;IAEN,IAAI,YAAY,KAAK,MAAM;QACvB,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAEtG,OAAO,CACH,gBACQ,KAAK,eACC,MAAM,eACL,IAAI,iBACF,OAAO,KAAK,QAAQ,IAAI,SAAS,yBACzB,OAAO,KAAK,gBAAgB,IAAI,SAAS,wBAC1C,YAAY,IAAI,SAAS,EAC7C,MAAM,EAAE,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,aAEvD,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACT,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YACpB,KAAC,QAAQ,KAAG,GACL,CACd,IACD,CACP,CAAC;AACN,CAAC"}

package/dist/components/Link/LinkExample.d.ts

@@ -1,5 +1,5 @@
-import { ComponentExample } from '../../utils/demo';
 import { LinkProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const LinkExample: ComponentExample<LinkProps>;
 /**
  * This component demonstrates the different pseudo states of the Link component.

package/dist/components/Link/LinkExample.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useId } from 'react';
-import { Txt } from '../Txt';
+import { Fragment } from 'react';
 import { Link } from '.';
+import { Txt } from '../Txt';
+import { useId } from '../../hooks/useId';
 export const LinkExample = {
     containerStyle: {
         width: '100%',
     },
-    render: ({ props, preset, Component }) => {
-        if (preset?.label === 'Pseudo States')
-            return _jsx(LinkDemo, { props: props });
+    render: ({ props, Component }) => {
         return (_jsx("div", { style: {
                 display: 'flex',
                 width: '100%',
@@ -17,9 +16,10 @@ export const LinkExample = {
                 minHeight: 'var(--spacing-sizing-24)',
             }, children: _jsx(Component, { ...props }) }));
     },
-    presets: [
+    sections: [
         {
-            label: 'Pseudo States',
+            title: 'Variants with Pseudo States',
+            content: ({ props }) => _jsx(LinkDemo, { props: props }),
         },
     ],
 };

package/dist/components/Link/LinkExample.js.map

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

package/dist/components/Link/link.css

@@ -1,5 +1,5 @@
 [data-bspk=link] {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   gap: var(--spacing-sizing-01);

package/dist/components/Link/link.css.js

@@ -2,7 +2,7 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=link] {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   gap: var(--spacing-sizing-01);
@@ -21,4 +21,3 @@ style.appendChild(document.createTextNode(`[data-bspk=link] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ListItem/ListItem.d.ts

@@ -1,10 +1,8 @@
 import { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
-import { ButtonProps } from '../Button';
+import { ListItemButton } from './ListItemButton';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 import './list-item.scss';
-export declare const LEADING_COMPONENTS: readonly string[];
-export declare const TRAILING_COMPONENTS: readonly string[];
-export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = CommonProps<'active' | 'disabled' | 'readOnly'> & {
+export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = CommonProps<'active' | 'disabled' | 'owner' | 'readOnly'> & {
     /**
      * The element type to render as.
      *
@@ -47,12 +45,10 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
     href?: AnchorHTMLAttributes<unknown>['href'];
     /** A ref to the list item div element. */
     innerRef?: SetRef<T>;
-    /**
-     * Whether the ListItem is selected.
-     *
-     * @default false
-     */
-    selected?: boolean;
+    /** The ARIA role of the list item. */
+    role?: string;
+    /** Whether the aria-label should be included on the list item. */
+    includeAriaLabel?: boolean;
 };
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
@@ -83,20 +79,12 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
  *         );
  *     }
  *
- * @subComponents ListItemButton
- *
  * @name ListItem
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function ListItem<As extends ElementType = 'div', T = HTMLElement>({ as, disabled, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, innerRef, selected, role: roleProp, ...props }: ElementProps<ListItemProps<As, T>, As>): import("react/jsx-runtime").JSX.Element | undefined;
+declare function ListItem<As extends ElementType = 'div', T = HTMLElement>({ includeAriaLabel, active, as, disabled, innerRef, label, leading, readOnly, owner, role, subText, trailing, ...props }: ElementProps<ListItemProps<As, T>, As>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ListItem {
-    var bspkName: string;
     var Button: typeof ListItemButton;
 }
-/** A button that can be used as a trailing element in a ListItem. */
-declare function ListItemButton({ label, icon, ...buttonProps }: Pick<ButtonProps, 'icon' | 'label' | 'onClick'>): import("react/jsx-runtime").JSX.Element;
-declare namespace ListItemButton {
-    var bspkName: string;
-}
 export { ListItem };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ListItem/ListItem.js

@@ -1,20 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../Button';
+import { ListItemButton } from './ListItemButton';
 import { Truncated } from '../Truncated';
-import { getChildrenElements } from '../../utils/children';
-import { useErrorLogger } from '../../utils/errors';
 import './list-item.css.js';
-export const LEADING_COMPONENTS = Object.freeze(['Icon', 'Img', 'Avatar']);
-export const TRAILING_COMPONENTS = Object.freeze([
-    'ListItemButton',
-    'Checkbox',
-    'Icon',
-    'Radio',
-    'Switch',
-    'Tag',
-    'Txt',
-    'string',
-]);
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
  * navigation in most experiences.
@@ -44,63 +31,22 @@ export const TRAILING_COMPONENTS = Object.freeze([
  *         );
  *     }
  *
- * @subComponents ListItemButton
- *
  * @name ListItem
- * @phase DesignReview
+ * @phase UXReview
  */
-function ListItem({ as, disabled, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, innerRef, selected = false, role: roleProp, ...props }) {
-    let As = as || 'div';
-    const role = ['option', roleProp || 'listitem'];
-    const AsInner = 'span';
-    const { leading, trailing } = useChildren(leadingProp, trailingProp);
+function ListItem({ includeAriaLabel = true, active, as, disabled, innerRef, label, leading, readOnly, owner, role, subText, trailing, ...props }) {
     if (!label)
-        return;
-    if (props.href)
-        As = 'a';
-    if (trailing?.name) {
-        // if trailing is a ListItemButton and As is a button, change As to div
-        if (trailing?.name === 'ListItemButton')
-            As = 'div';
-        if (['Checkbox', 'Radio', 'Switch'].includes(trailing.name)) {
-            As = 'div';
-            role.push('button');
-        }
+        return null;
+    let As = as || 'div';
+    if (!as) {
+        if (props.href)
+            As = 'a';
+        else if (props.onClick)
+            As = 'button';
     }
-    if (!As && 'onClick' in props)
-        As = 'button';
-    const actionable = ('onClick' in props || 'href' in props) && !disabled && !readOnly;
-    return (_jsx(As, { ...props, "aria-disabled": disabled || undefined, "aria-label": As === 'label' ? undefined : label, "aria-selected": selected || undefined, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-component": leading?.name || undefined, "data-readonly": readOnly || undefined, ref: innerRef, role: "option", tabIndex: 0, children: _jsxs(AsInner, { "data-inner": true, children: [leading && (_jsx("span", { "data-component": leading.name, "data-leading": true, children: leading.child })), _jsxs("span", { "data-item-label": true, children: [_jsx(Truncated, { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && (_jsx("span", { "data-component": trailing.name, "data-trailing": true, children: trailing.child }))] }) }));
-}
-ListItem.bspkName = 'ListItem';
-/** A button that can be used as a trailing element in a ListItem. */
-// eslint-disable-next-line react/no-multi-comp
-function ListItemButton({ label, icon, ...buttonProps }) {
-    return _jsx(Button, { icon: icon, label: label, showLabel: false, ...buttonProps, size: "large", variant: "tertiary" });
+    const actionable = (As === 'a' || As === 'button') && !props.disabled && !props.readOnly;
+    return (_jsxs(As, { ...props, "aria-disabled": disabled || undefined, "aria-label": As === 'label' || As === 'span' || As === 'div' || includeAriaLabel === false ? undefined : label, as: As, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-bspk-owner": owner || undefined, "data-readonly": readOnly || undefined, ref: innerRef, role: role || (As === 'button' ? 'option' : undefined), tabIndex: actionable ? 0 : undefined, children: [leading && (_jsx("span", { "aria-hidden": true, "data-leading": true, children: leading })), _jsxs("span", { "data-item-label": true, children: [_jsx(Truncated, { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing })] }));
 }
-ListItemButton.bspkName = 'ListItemButton';
 ListItem.Button = ListItemButton;
 export { ListItem };
-function useChildren(leadingProp, trailingProp) {
-    const { logError } = useErrorLogger();
-    let leading = getChildrenElements(leadingProp)[0] || null;
-    const trailingElements = getChildrenElements(trailingProp);
-    let trailing = trailingElements[0] || null;
-    if (leading) {
-        const valid = LEADING_COMPONENTS.includes(leading.name);
-        if (!valid)
-            leading = null;
-        logError(!valid, `ListItem - Leading child is invalid. Must be one of:${LEADING_COMPONENTS} Elements: ${leading?.name || 'None'}`);
-    }
-    if (trailing) {
-        const valid = TRAILING_COMPONENTS.includes(trailing.name);
-        if (!valid)
-            trailing = null;
-        logError(!valid, `ListItem - Trailing child is invalid. Must be one of:${TRAILING_COMPONENTS} Elements: ${trailing?.name || 'None'}`);
-    }
-    return {
-        leading,
-        trailing,
-    };
-}
 //# sourceMappingURL=ListItem.js.map

package/dist/components/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,OAAO,kBAAkB,CAAC;AAqD1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAS,QAAQ,CAAkD,EAC/D,gBAAgB,GAAG,IAAI,EACvB,MAAM,EACN,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC6B;IACrC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAExB,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAErB,IAAI,CAAC,EAAE,EAAE,CAAC;QACN,IAAI,KAAK,CAAC,IAAI;YAAE,EAAE,GAAG,GAAG,CAAC;aACpB,IAAI,KAAK,CAAC,OAAO;YAAE,EAAE,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE,KAAK,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAEzF,OAAO,CACH,MAAC,EAAE,OACK,KAAK,mBACM,QAAQ,IAAI,SAAS,gBAEhC,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,MAAM,IAAI,EAAE,KAAK,KAAK,IAAI,gBAAgB,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAErG,EAAE,EAAE,EAAE,iBACO,UAAU,IAAI,SAAS,iBACvB,MAAM,IAAI,SAAS,eACtB,WAAW,qBACJ,KAAK,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,EACpC,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACtD,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,aAEnC,OAAO,IAAI,CACR,oEACK,OAAO,GACL,CACV,EACD,oDACI,KAAC,SAAS,iCAAY,KAAK,GAAa,EACvC,OAAO,IAAI,gDAAqB,OAAO,GAAQ,IAC7C,EACN,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,IACjD,CACR,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ListItem/ListItemButton.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '-/components/Button';
+export declare function ListItemButton({ label, icon, ...buttonProps }: Pick<ButtonProps, 'icon' | 'label' | 'onClick'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListItem/ListItemButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../Button';
+// A button that can be used as a trailing element in a ListItem.
+export function ListItemButton({ label, icon, ...buttonProps }) {
+    return _jsx(Button, { icon: icon, iconOnly: true, label: label, ...buttonProps, size: "large", variant: "tertiary" });
+}
+//# sourceMappingURL=ListItemButton.js.map

package/dist/components/ListItem/ListItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButton.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE1D,iEAAiE;AACjE,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,WAAW,EAAmD;IAC3G,OAAO,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,QAAC,KAAK,EAAE,KAAK,KAAM,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,GAAG,CAAC;AAC1G,CAAC"}

package/dist/components/ListItem/ListItemExample.d.ts

@@ -1,4 +1,3 @@
-import { ComponentExampleFn, DemoAction, DemoSetState } from '../../utils/demo';
-import { ListItemProps } from '.';
+import { ListItemProps } from './ListItem';
+import { ComponentExampleFn } from '-/utils/demo';
 export declare const ListItemExample: ComponentExampleFn<ListItemProps>;
-export declare const createChildrenElement: (state: Record<string, any>, name: string, setState: DemoSetState, action: DemoAction, id?: string) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ListItem/ListItemExample.js

@@ -1,57 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-explicit-any */ import { SvgContentCopy } from '@bspk/icons/ContentCopy';
-import { SvgDiamond } from '@bspk/icons/Diamond';
-import { Avatar } from '../Avatar';
-import { Checkbox } from '../Checkbox';
-import { Img } from '../Img';
-import { Radio } from '../Radio';
-import { Switch } from '../Switch';
-import { Tag } from '../Tag';
-import { Txt } from '../Txt';
-import { ListItem } from '.';
+import { ListItem } from './ListItem';
+import { createExampleChildElement } from '../../utils/createExampleChildElement';
 export const ListItemExample = ({ action, setState }) => ({
-    render: ({ props, Component, id }) => {
-        return (_jsx(Component, { ...props, leading: createChildrenElement(props, 'leading', setState, action, id), trailing: createChildrenElement(props, 'trailing', setState, action, id) }));
+    render: ({ props, id }) => {
+        const leading = createExampleChildElement({
+            exampleState: props,
+            name: 'leading',
+            setState,
+            action,
+            id,
+        });
+        const trailing = createExampleChildElement({
+            exampleState: props,
+            name: 'trailing',
+            setState,
+            action,
+            id,
+        });
+        let as = props.as || 'div';
+        if (trailing.componentName && ['Checkbox', 'Radio', 'Switch'].includes(trailing.componentName))
+            as = 'label';
+        return _jsx(ListItem, { ...props, as: as, leading: leading.element, trailing: trailing.element });
     },
     presets: [
-        // really long label
         {
             value: 'long-label',
             label: 'Long Label',
             propState: {
                 label: 'This is a really long label that should be truncated if it exceeds the width of the ListItem',
+                subText: 'See below for other leading and trailing examples',
                 trailing: 'Checkbox',
                 leading: 'Avatar',
             },
         },
     ],
 });
-export const createChildrenElement = (state, name, setState, action, id) => {
-    const componentName = state[name];
-    if (componentName === 'Checkbox' || componentName === 'Radio' || componentName === 'Switch') {
-        let As = Checkbox;
-        if (componentName === 'Radio')
-            As = Radio;
-        else if (componentName === 'Switch')
-            As = Switch;
-        const toggleName = `data-${name}-toggle-${id}`;
-        return (_jsx(As, { "aria-label": `${componentName} demo`, checked: state[toggleName], disabled: state.disabled, name: `${name}-toggle`, onChange: (checked) => {
-                setState({ [toggleName]: checked });
-            }, onClick: () => action(`${name} ${componentName} clicked`), readOnly: state.readOnly, value: `${name}-${componentName}` }));
-    }
-    if (componentName === 'ListItemButton')
-        return (_jsx(ListItem.Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') }));
-    if (componentName === 'Img')
-        return _jsx(Img, { alt: "placeholder", src: "/placeholder.svg" });
-    if (componentName === 'Avatar')
-        return _jsx(Avatar, { name: "List Item", showTooltip: false });
-    if (componentName === 'Tag') {
-        return _jsx(Tag, { children: "Tag" });
-    }
-    if (componentName === 'Txt')
-        return _jsx(Txt, { children: "Text" });
-    if (componentName === 'Icon')
-        return _jsx(SvgDiamond, {});
-    return null;
-};
 //# sourceMappingURL=ListItemExample.js.map

package/dist/components/ListItem/ListItemExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemExample.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListItemExample.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,MAAM,CAAC,MAAM,eAAe,GAAsC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACzF,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;QACtB,MAAM,OAAO,GAAG,yBAAyB,CAAC;YACtC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;YACf,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,yBAAyB,CAAC;YACvC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,UAAU;YAChB,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QAEH,IAAI,EAAE,GAAgB,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC;QAExC,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;YAAE,EAAE,GAAG,OAAO,CAAC;QAE7G,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAI,CAAC;IACjG,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,KAAK,EAAE,8FAA8F;gBACrG,OAAO,EAAE,mDAAmD;gBAC5D,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,QAAQ;aACpB;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/ListItem/list-item.css

@@ -1,22 +1,19 @@
-body[data-bspk] a[data-bspk=list-item] {
-  color: unset !important;
-  text-decoration: !important;
-  font: !important;
-}
-
 [data-bspk=list-item] {
-  display: block;
+  display: flex;
   width: 100%;
-  padding: 0 var(--spacing-sizing-02);
+  user-select: none;
+  color: var(--foreground-neutral-on-surface);
+  height: 100%;
+  overflow: hidden;
+  min-height: var(--list-item-height);
+  flex-direction: row;
+  gap: var(--spacing-sizing-03);
+  padding: var(--spacing-sizing-02);
+  justify-items: stretch;
   background: unset;
   border: unset;
   margin: unset;
   text-decoration: unset;
-  user-select: none;
-  color: var(--foreground-neutral-on-surface);
-}
-[data-bspk=list-item]:is(a), [data-bspk=list-item]:is(button), [data-bspk=list-item][onclick], [data-bspk=list-item][role=button] {
-  cursor: pointer;
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);
@@ -34,17 +31,6 @@ body[data-bspk] a[data-bspk=list-item] {
 [data-bspk=list-item][aria-disabled] [data-sub-text] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=list-item] [data-inner] {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  min-height: var(--list-item-height);
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-sizing-03);
-  padding: var(--spacing-sizing-02) 0;
-  justify-items: stretch;
-}
 [data-bspk=list-item] [data-leading],
 [data-bspk=list-item] [data-item-label],
 [data-bspk=list-item] [data-trailing] {
@@ -82,7 +68,7 @@ body[data-bspk] a[data-bspk=list-item] {
 [data-bspk=list-item] [data-trailing]:has(input) {
   pointer-events: none;
 }
-[data-bspk=list-item] [data-component=Img] > img {
+[data-bspk=list-item] img {
   height: 36px;
   width: 36px;
   max-width: unset;

package/dist/components/ListItem/list-item.css.js

@@ -1,25 +1,22 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item] {
-  color: unset !important;
-  text-decoration: !important;
-  font: !important;
-}
-
-[data-bspk=list-item] {
-  display: block;
+style.appendChild(document.createTextNode(`[data-bspk=list-item] {
+  display: flex;
   width: 100%;
-  padding: 0 var(--spacing-sizing-02);
+  user-select: none;
+  color: var(--foreground-neutral-on-surface);
+  height: 100%;
+  overflow: hidden;
+  min-height: var(--list-item-height);
+  flex-direction: row;
+  gap: var(--spacing-sizing-03);
+  padding: var(--spacing-sizing-02);
+  justify-items: stretch;
   background: unset;
   border: unset;
   margin: unset;
   text-decoration: unset;
-  user-select: none;
-  color: var(--foreground-neutral-on-surface);
-}
-[data-bspk=list-item]:is(a), [data-bspk=list-item]:is(button), [data-bspk=list-item][onclick], [data-bspk=list-item][role=button] {
-  cursor: pointer;
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);
@@ -37,17 +34,6 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 [data-bspk=list-item][aria-disabled] [data-sub-text] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=list-item] [data-inner] {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  min-height: var(--list-item-height);
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-sizing-03);
-  padding: var(--spacing-sizing-02) 0;
-  justify-items: stretch;
-}
 [data-bspk=list-item] [data-leading],
 [data-bspk=list-item] [data-item-label],
 [data-bspk=list-item] [data-trailing] {
@@ -85,7 +71,7 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 [data-bspk=list-item] [data-trailing]:has(input) {
   pointer-events: none;
 }
-[data-bspk=list-item] [data-component=Img] > img {
+[data-bspk=list-item] img {
   height: 36px;
   width: 36px;
   max-width: unset;
@@ -98,4 +84,3 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Listbox/Listbox.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
-import { ListItemProps } from '../ListItem';
-import { MenuProps } from '../Menu';
+import { ListItemProps } from '-/components/ListItem';
+import { MenuProps } from '-/components/Menu';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 /** The props for the listbox items. */
 export type ListboxItemProps = CommonProps<'disabled'> & ListItemProps & {
     /** The content to display in the listbox item. */
@@ -9,7 +9,7 @@ export type ListboxItemProps = CommonProps<'disabled'> & ListItemProps & {
     /** The value of the listbox item. */
     value: string;
 };
-export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> & Pick<MenuProps, 'itemDisplayCount'> & {
+export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> & Pick<MenuProps, 'itemCount' | 'itemDisplayCount' | 'onOutsideClick' | 'owner'> & {
     /**
      * Content to display in the listbox.
      *
@@ -76,6 +76,7 @@ export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = Com
      * Usually only used for showing no items found.
      */
     children?: ReactNode;
+    includeAriaLabel?: boolean;
 };
 /**
  * A utility widget that allows users to select one or more items from a list of choices.
@@ -109,11 +110,7 @@ export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = Com
  *     }
  *
  * @name Listbox
- * @phase Backlog
+ * @phase Utility
  */
-declare function Listbox<Item extends ListboxItemProps>({ itemDisplayCount, items, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, ...props }: ElementProps<ListboxProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Listbox {
-    var bspkName: string;
-}
-export { Listbox };
+export declare function Listbox<Item extends ListboxItemProps>({ includeAriaLabel, itemDisplayCount, itemCount, items, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, owner, ...props }: ElementProps<ListboxProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */