@bspk/ui 1.1.34 → 1.3.0

package/dist/components/InlineAlert/inline-alert.css

@@ -32,6 +32,7 @@
   color: var(--first-tone);
   width: var(--spacing-sizing-05);
   height: var(--spacing-sizing-05);
+  flex: 0 0 auto;
 }
 [data-bspk=inline-alert] svg [data-second-tone] {
   fill: var(--second-tone);

package/dist/components/InlineAlert/inline-alert.css.js

@@ -35,6 +35,7 @@ style.appendChild(document.createTextNode(`[data-bspk=inline-alert] {
   color: var(--first-tone);
   width: var(--spacing-sizing-05);
   height: var(--spacing-sizing-05);
+  flex: 0 0 auto;
 }
 [data-bspk=inline-alert] svg [data-second-tone] {
   fill: var(--second-tone);
@@ -43,4 +44,3 @@ style.appendChild(document.createTextNode(`[data-bspk=inline-alert] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-import { ElementProps } from '../../index.js';
+import { ElementProps } from '-/types/common';
 export type LayoutProps<As extends ElementType = 'div'> = {
     /**
      * The content of the Layout.
@@ -23,13 +23,13 @@ export type LayoutProps<As extends ElementType = 'div'> = {
      */
     as?: As;
     /**
-     * Additional styles to apply to the Layout.
+     * The alignment style to apply to the Layout.
      *
      * @default flex-start
      */
     align?: 'center' | 'flex-end' | 'flex-start' | 'stretch';
     /**
-     * Additional styles to apply to the Layout.
+     * The justification style to apply to the Layout.
      *
      * @default flex-start
      */
@@ -48,9 +48,5 @@ export type LayoutProps<As extends ElementType = 'div'> = {
  * @name Layout
  * @phase Utility
  */
-declare function Layout<As extends ElementType = 'div'>({ children, column, gap, style, as, align, justify, ...props }: ElementProps<LayoutProps<As>, As>): import("react/jsx-runtime").JSX.Element;
-declare namespace Layout {
-    var bspkName: string;
-}
-export { Layout };
+export declare function Layout<As extends ElementType = 'div'>({ children, column, gap, style, as, align, justify, ...props }: ElementProps<LayoutProps<As>, As>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Layout/Layout.js

@@ -12,7 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @name Layout
  * @phase Utility
  */
-function Layout({ children, column, gap = '16', style, as, align = 'flex-start', justify = 'flex-start', ...props }) {
+export function Layout({ children, column, gap = '16', style, as, align = 'flex-start', justify = 'flex-start', ...props }) {
     const As = as || 'div';
     const alignItems = align || 'flex-start';
     const justifyContent = justify || 'flex-start';
@@ -27,6 +27,4 @@ function Layout({ children, column, gap = '16', style, as, align = 'flex-start',
             justifyContent,
         }, children: children }));
 }
-Layout.bspkName = 'Layout';
-export { Layout };
 //# sourceMappingURL=Layout.js.map

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,4 @@
+import { LayoutProps } from './Layout';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<LayoutProps>[];
+export declare const LayoutExample: ComponentExample<LayoutProps>;

package/dist/components/Layout/LayoutExample.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const presets = [];
+export const LayoutExample = {
+    render: ({ props, Component }) => {
+        return (_jsxs(Component, { ...props, children: [_jsx("div", { children: "Alpha" }), _jsx("div", { children: "Beta" }), _jsx("div", { children: "Gamma" })] }));
+    },
+    presets,
+};
+//# 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,OAAO,GAA0B,EAAE,CAAC;AAEjD,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;IACD,OAAO;CACV,CAAC"}

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

@@ -1,6 +1,6 @@
-import { AnchorHTMLAttributes } from 'react';
-import { CommonPropsLibrary, ElementProps } from '../../index.js';
 import './link.scss';
+import { AnchorHTMLAttributes } from 'react';
+import { CommonPropsLibrary, ElementProps } from '-/types/common';
 export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
     /**
      * The label of the link.
@@ -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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, Suspense } from 'react';
 import './link.css.js';
+import { lazy, Suspense } from 'react';
 /**
  * This is the standalone link component. Inline links can use the native `a` element.
  *
@@ -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,aAAa,CAAC;AACrB,OAAO,EAAuC,IAAI,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAyCjG;;;;;;;;;;;;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,6 @@
-import { ComponentExample } from '../../utils/demo';
 import { LinkProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<LinkProps>[];
 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,14 @@
 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 presets = [];
 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,11 +17,13 @@ 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 }),
         },
     ],
+    presets,
 };
 /**
  * This component demonstrates the different pseudo states of the Link component.

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

@@ -1 +1 @@
-{"version":3,"file":"LinkExample.js","sourceRoot":"","sources":["../../../src/components/Link/LinkExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,IAAI,EAAE,MAAM,GAAG,CAAC;AAEpC,MAAM,CAAC,MAAM,WAAW,GAAgC;IACpD,cAAc,EAAE;QACZ,KAAK,EAAE,MAAM;KAChB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,eAAe;YAAE,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QAEzE,OAAO,CACH,cACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,KAAK,CAAC,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAC7D,SAAS,EAAE,0BAA0B;aACxC,YAED,KAAC,SAAS,OAAK,KAAK,GAAI,GACtB,CACT,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,eAAe;SACzB;KACJ;CACJ,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,MAA6B;IAClD,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAE9E,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,mDACI,eAAO,EACN,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnB,KAAC,GAAG,IAAa,OAAO,EAAC,cAAc,YAClC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IADzC,KAAK,CAET,CACT,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnD,MAAC,QAAQ,eACL,KAAC,GAAG,IAAuB,OAAO,EAAC,cAAc,YAC5C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IADvC,GAAG,IAAI,QAAQ,CAEnB,EACL,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;wBAClB,MAAM,IAAI,GAA4B,EAAE,CAAC;wBAEzC,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;4BACvB,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;wBAC5B,CAAC;6BAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;4BAC7B,IAAI,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;wBAChC,CAAC;wBAED,IAAI,IAAI,KAAK,SAAS;4BAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;wBAEpD,OAAO,CACH,2BAAgB,IAAI,YACf,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CACb,YAAG,IAAI,EAAE,8BAA8B,EAAE,IAAI,IAAI,IAAI,KAAK,EAAE,KAAM,IAAI,0BAElE,CACP,CAAC,CAAC,CAAC,CACA,KAAC,IAAI,OACG,MAAM,CAAC,KAAK,EAChB,KAAK,EAAC,WAAW,KACb,IAAI,EACR,OAAO,EAAE,IAA4B,GACvC,CACL,IAZsB,GAAG,IAAI,IAAI,KAAK,EAAE,CAavC,CACT,CAAC;oBACN,CAAC,CAAC,KA/BS,GAAG,IAAI,MAAM,CAgCjB,CACd,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
+{"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 './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'> & {
+import { AnchorHTMLAttributes, ElementType, ReactNode, MouseEvent, AriaAttributes, AriaRole } from 'react';
+import { ListItemButton } from './ListItemButton';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
+export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'disabled' | 'owner' | 'readOnly'> & Pick<AriaAttributes, 'aria-label'> & {
     /**
      * The element type to render as.
      *
@@ -15,7 +13,7 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
     /**
      * The leading element to display in the ListItem.
      *
-     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
+     * Leading elements should only be one of the following [Icon](/icons), Img, Avatar.
      *
      * @exampleType select
      * @options Icon, Img, Avatar
@@ -32,8 +30,8 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
     /**
      * The trailing element to display in the ListItem.
      *
-     * Trailing elements may only be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag,
-     * Txt.
+     * Trailing elements should only be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio,
+     * Switch, Tag, Txt.
      *
      * @exampleType select
      * @options Checkbox, Icon, ListItemButton, Radio, Switch, Tag, Txt
@@ -46,13 +44,37 @@ 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>;
+    innerRef?: SetRef<HTMLElement>;
     /**
-     * Whether the ListItem is selected.
+     * The ARIA role of the list item.
+     *
+     * The role will be set to 'button' automatically if the ListItem has an onClick prop and is not a button,
+     * label, or anchor element.
+     *
+     * If including other focusable elements (e.g. buttons, links) in the leading or trailing slots, the role should
+     * be set explicitly to something other than 'button'.
+     */
+    role?: AriaRole;
+    /** Callback function that is called when the ListItem is clicked. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The unique ID of the list item.
+     *
+     * If not provided, a unique ID will be generated. This is useful for accessibility and testing purposes.
+     */
+    id?: string;
+    /**
+     * Whether to hide the label from screen readers. Use this when the label is redundant with other context, such
+     * as within a ListItemMenu or Label.
      *
      * @default false
      */
-    selected?: boolean;
+    hideAriaLabel?: boolean;
+    /**
+     * Indicates the current "selected" state of the list item when used in a selectable context, such as within a
+     * ListItemMenu.
+     */
+    'aria-selected'?: boolean;
 };
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
@@ -62,9 +84,9 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
  *
  * The ListItem has three main elements: leading element, label, and trailing element.
  *
- * Leading elements may be one of the following [Icon](/icons), Img, Avatar.
+ * Leading elements should be one of the following [Icon](/icons), Img, Avatar.
  *
- * Trailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
+ * Trailing elements should be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
  *
  * The ListItemButton is a more limited Button with context specific options.
  *
@@ -83,20 +105,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 = ElementType>({ active, as, disabled, innerRef, label, leading, readOnly, owner, role: roleProp, subText, trailing, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, hideAriaLabel, ...props }: ElementProps<ListItemProps<As>, 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,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../Button';
-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',
-]);
+import { ListItemButton } from './ListItemButton';
+import { Truncated } from '../Truncated';
+import { useId } from '../../hooks/useId';
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
  * navigation in most experiences.
@@ -23,9 +11,9 @@ export const TRAILING_COMPONENTS = Object.freeze([
  *
  * The ListItem has three main elements: leading element, label, and trailing element.
  *
- * Leading elements may be one of the following [Icon](/icons), Img, Avatar.
+ * Leading elements should be one of the following [Icon](/icons), Img, Avatar.
  *
- * Trailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
+ * Trailing elements should be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
  *
  * The ListItemButton is a more limited Button with context specific options.
  *
@@ -44,63 +32,34 @@ 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({ active, as, disabled, innerRef, label, leading, readOnly, owner, role: roleProp, subText, trailing, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, hideAriaLabel, ...props }) {
+    const id = useId(idProp);
     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');
-        }
-    }
-    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 }))] }) }));
+        return null;
+    const As = asLogic(as, props);
+    const role = roleLogic(roleProp, { as: As, props });
+    const actionable = (props.href || props.onClick) && !props.disabled && !props.readOnly;
+    return (_jsxs(As, { ...props, "aria-disabled": disabled || undefined, "aria-label": ariaLabel || undefined, "aria-selected": ariaSelected, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-bspk-owner": owner || undefined, "data-readonly": readOnly || undefined, id: id, ref: innerRef, role: role, tabIndex: props.tabIndex || (actionable ? 0 : undefined), children: [leading && (_jsx("span", { "aria-hidden": true, "data-leading": true, children: leading })), _jsxs("span", { "aria-hidden": hideAriaLabel ? true : undefined, "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 })] }));
 }
-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" });
-}
-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,
-    };
+function asLogic(as, props) {
+    if (as)
+        return as;
+    if (props.href)
+        return 'a';
+    return 'div';
+}
+function roleLogic(existingRole, { as: As, props, }) {
+    if (existingRole)
+        return existingRole;
+    if (props.href)
+        return As !== 'a' ? 'link' : undefined;
+    if (props.onClick && As !== 'button' && As !== 'label')
+        return 'button';
+    return undefined;
 }
 //# 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":";AAAA,OAAO,kBAAkB,CAAC;AAU1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiFtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAS,QAAQ,CAAuC,EACpD,MAAM,EACN,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,YAAY,EAC7B,aAAa,EACb,GAAG,KAAK,EAC0B;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAExB,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAEvF,OAAO,CACH,MAAC,EAAE,OACK,KAAK,mBACM,QAAQ,IAAI,SAAS,gBACxB,SAAS,IAAI,SAAS,mBACnB,YAAY,iBACd,UAAU,IAAI,SAAS,iBACvB,MAAM,IAAI,SAAS,eACtB,WAAW,qBACJ,KAAK,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,aAEvD,OAAO,IAAI,CACR,oEACK,OAAO,GACL,CACV,EACD,+BAAmB,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,sCAC/C,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;AAEpB,SAAS,OAAO,CAAyB,EAAkB,EAAE,KAA6B;IACtF,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,GAAG,CAAC;IAC3B,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,SAAS,SAAS,CACd,YAAkC,EAClC,EACI,EAAE,EAAE,EAAE,EACN,KAAK,GAIR;IAED,IAAI,YAAY;QAAE,OAAO,YAAY,CAAC;IAEtC,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvD,IAAI,KAAK,CAAC,OAAO,IAAI,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,OAAO;QAAE,OAAO,QAAQ,CAAC;IAExE,OAAO,SAAS,CAAC;AACrB,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,4 @@
-import { ComponentExampleFn, DemoAction, DemoSetState } from '../../utils/demo';
-import { ListItemProps } from '.';
+import { ListItemProps } from './ListItem';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+export declare const presets: Preset<ListItemProps>[];
 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 presets = [
+    {
+        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 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',
-                trailing: 'Checkbox',
-                leading: 'Avatar',
-            },
-        },
-    ],
+    presets,
 });
-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