@bspk/ui 1.1.32 → 1.1.33

package/dist/components/Link/LinkExample.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useId } from 'react';
+import { Txt } from '../Txt';
+import { Link } from '.';
+export const LinkExample = {
+    containerStyle: {
+        width: '100%',
+    },
+    render: ({ props, preset, Component }) => {
+        if (preset?.label === 'Pseudo States')
+            return _jsx(LinkDemo, { props: props });
+        return (_jsx("div", { style: {
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'center',
+                background: props.variant === 'subtle-inverse' ? 'black' : '',
+                minHeight: 'var(--spacing-sizing-24)',
+            }, children: _jsx(Component, { ...props }) }));
+    },
+    presets: [
+        {
+            label: 'Pseudo States',
+        },
+    ],
+};
+/**
+ * This component demonstrates the different pseudo states of the Link component.
+ *
+ * It is used in the LinkExample preset "Pseudo States", and also the Typography page.
+ */
+export function LinkDemo(params) {
+    const states = ['default', 'hover', 'active', 'disabled', 'visited', 'focus'];
+    const id = useId();
+    return (_jsxs("div", { "data-links-grid": true, children: [_jsx("div", {}), states.map((state) => (_jsx(Txt, { variant: "labels-large", children: state.charAt(0).toUpperCase() + state.slice(1) }, state))), ['default', 'subtle', 'subtle-inverse'].map((kind) => (_jsxs(Fragment, { children: [_jsx(Txt, { variant: "labels-large", children: kind.charAt(0).toUpperCase() + kind.slice(1) }, `${kind}-title`), states.map((state) => {
+                        const attr = {};
+                        if (state === 'disabled') {
+                            attr['disabled'] = true;
+                        }
+                        else if (state !== 'default') {
+                            attr[`data-pseudo`] = state;
+                        }
+                        if (kind !== 'default')
+                            attr[`data-${kind}`] = true;
+                        return (_jsx("div", { "data-kind": kind, children: !params.props ? (_jsx("a", { href: `https://bspk.dev/fake-link/${id}+${kind}+${state}`, ...attr, children: "Link Text" })) : (_jsx(Link, { ...params.props, label: "Link Text", ...attr, variant: kind })) }, `${kind}-${state}`));
+                    })] }, `${kind}-row`)))] }));
+}
+//# sourceMappingURL=LinkExample.js.map

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

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

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

@@ -0,0 +1 @@
+export * from './Link';

package/dist/components/Link/index.js

@@ -0,0 +1,2 @@
+export * from './Link';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/Link/link.css

@@ -0,0 +1,18 @@
+[data-bspk=link] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-01);
+  font: var(--labels-base);
+}
+[data-bspk=link][data-size=large] {
+  font: var(--labels-large);
+}
+[data-bspk=link][data-size=small] {
+  font: var(--labels-small);
+}
+[data-bspk=link] svg {
+  width: var(--spacing-sizing-05);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,24 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=link] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-01);
+  font: var(--labels-base);
+}
+[data-bspk=link][data-size=large] {
+  font: var(--labels-large);
+}
+[data-bspk=link][data-size=small] {
+  font: var(--labels-small);
+}
+[data-bspk=link] svg {
+  width: var(--spacing-sizing-05);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1,102 @@
+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'> & {
+    /**
+     * The element type to render as.
+     *
+     * @default div
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The leading element to display in the ListItem.
+     *
+     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
+     *
+     * @exampleType select
+     * @options Icon, Img, Avatar
+     */
+    leading?: ReactNode;
+    /**
+     * The label to display in the ListItem.
+     *
+     * @required
+     */
+    label: string;
+    /** The subtext to display in the ListItem. */
+    subText?: string;
+    /**
+     * 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.
+     *
+     * @exampleType select
+     * @options Checkbox, Icon, ListItemButton, Radio, Switch, Tag, Txt
+     */
+    trailing?: ReactNode;
+    /**
+     * The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the list item.
+     *
+     * If the href is provided, the ListItem will render as an anchor element (`<a>`).
+     */
+    href?: AnchorHTMLAttributes<unknown>['href'];
+    /** A ref to the list item div element. */
+    innerRef?: SetRef<T>;
+    /**
+     * Whether the ListItem is selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+};
+/**
+ * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
+ * navigation in most experiences.
+ *
+ * With its flexible and simple structure, the list item element is core and can meet the needs of many uses cases.
+ *
+ * The ListItem has three main elements: leading element, label, and trailing element.
+ *
+ * Leading elements may 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.
+ *
+ * The ListItemButton is a more limited Button with context specific options.
+ *
+ * @example
+ *     import { SvgSquare } from '@bspk/icons/Square';
+ *     import { ListItem } from '@bspk/ui/ListItem';
+ *
+ *     export function Example() {
+ *         return (
+ *             <ListItem
+ *                 label="Example label"
+ *                 leading={<SvgSquare />}
+ *                 subText="Example subtest"
+ *                 trailing={<ListItem.Button label="Click me" onClick={() => console.log('Hello world')} />}
+ *             />
+ *         );
+ *     }
+ *
+ * @subComponents ListItemButton
+ *
+ * @name ListItem
+ * @phase DesignReview
+ */
+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 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

@@ -0,0 +1,106 @@
+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',
+]);
+/**
+ * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
+ * navigation in most experiences.
+ *
+ * With its flexible and simple structure, the list item element is core and can meet the needs of many uses cases.
+ *
+ * The ListItem has three main elements: leading element, label, and trailing element.
+ *
+ * Leading elements may 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.
+ *
+ * The ListItemButton is a more limited Button with context specific options.
+ *
+ * @example
+ *     import { SvgSquare } from '@bspk/icons/Square';
+ *     import { ListItem } from '@bspk/ui/ListItem';
+ *
+ *     export function Example() {
+ *         return (
+ *             <ListItem
+ *                 label="Example label"
+ *                 leading={<SvgSquare />}
+ *                 subText="Example subtest"
+ *                 trailing={<ListItem.Button label="Click me" onClick={() => console.log('Hello world')} />}
+ *             />
+ *         );
+ *     }
+ *
+ * @subComponents ListItemButton
+ *
+ * @name ListItem
+ * @phase DesignReview
+ */
+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);
+    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 }))] }) }));
+}
+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,
+    };
+}
+//# sourceMappingURL=ListItem.js.map

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

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

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

@@ -0,0 +1,4 @@
+import { ComponentExampleFn, DemoAction, DemoSetState } from '../../utils/demo';
+import { ListItemProps } from '.';
+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

@@ -0,0 +1,57 @@
+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 '.';
+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) }));
+    },
+    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',
+            },
+        },
+    ],
+});
+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

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

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

@@ -0,0 +1 @@
+export * from './ListItem';

package/dist/components/ListItem/index.js

@@ -0,0 +1,2 @@
+export * from './ListItem';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListItem/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

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

@@ -0,0 +1,95 @@
+body[data-bspk] a[data-bspk=list-item] {
+  color: unset !important;
+  text-decoration: !important;
+  font: !important;
+}
+
+[data-bspk=list-item] {
+  display: block;
+  width: 100%;
+  padding: 0 var(--spacing-sizing-02);
+  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);
+}
+[data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
+  border-color: transparent;
+}
+[data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action][data-active], [data-bspk=list-item][data-action]:active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=list-item][aria-disabled] [data-text],
+[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] {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  flex: 1 1 0;
+  min-width: 0;
+}
+[data-bspk=list-item] [data-leading] svg,
+[data-bspk=list-item] [data-item-label] svg,
+[data-bspk=list-item] [data-trailing] svg {
+  width: 24px;
+  max-width: unset;
+}
+[data-bspk=list-item] [data-leading],
+[data-bspk=list-item] [data-trailing] {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+[data-bspk=list-item] [data-item-label] {
+  text-align: left;
+}
+[data-bspk=list-item] [data-item-label] [data-text] {
+  width: 100%;
+  font: var(--labels-base);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=list-item] [data-item-label] [data-sub-text] {
+  width: 100%;
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=list-item] [data-trailing]:has(input) {
+  pointer-events: none;
+}
+[data-bspk=list-item] [data-component=Img] > img {
+  height: 36px;
+  width: 36px;
+  max-width: unset;
+}
+[data-bspk=list-item]:is(label) [data-inner] {
+  border-bottom: 0;
+  gap: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,101 @@
+/** * 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;
+  width: 100%;
+  padding: 0 var(--spacing-sizing-02);
+  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);
+}
+[data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
+  border-color: transparent;
+}
+[data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action][data-active], [data-bspk=list-item][data-action]:active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=list-item][aria-disabled] [data-text],
+[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] {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  flex: 1 1 0;
+  min-width: 0;
+}
+[data-bspk=list-item] [data-leading] svg,
+[data-bspk=list-item] [data-item-label] svg,
+[data-bspk=list-item] [data-trailing] svg {
+  width: 24px;
+  max-width: unset;
+}
+[data-bspk=list-item] [data-leading],
+[data-bspk=list-item] [data-trailing] {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+[data-bspk=list-item] [data-item-label] {
+  text-align: left;
+}
+[data-bspk=list-item] [data-item-label] [data-text] {
+  width: 100%;
+  font: var(--labels-base);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=list-item] [data-item-label] [data-sub-text] {
+  width: 100%;
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=list-item] [data-trailing]:has(input) {
+  pointer-events: none;
+}
+[data-bspk=list-item] [data-component=Img] > img {
+  height: 36px;
+  width: 36px;
+  max-width: unset;
+}
+[data-bspk=list-item]:is(label) [data-inner] {
+  border-bottom: 0;
+  gap: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+