@bspk/ui-ngx 0.0.1

package/src/lib/link/link.scss

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

package/src/lib/link/link.spec.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UILinkDirective } from './link.directive';
+
+@Component({
+    selector: 'ui-host',
+    standalone: true,
+    imports: [UILinkDirective],
+    template: `<a [ui-link]="'#ok'">Hover me</a>`,
+})
+class HostComponent {}
+
+describe('UILinkDirective', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/list-item/example.ts

@@ -0,0 +1,94 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { UIAvatar } from '../avatar';
+import { UIButton } from '../button';
+import { IconChevronRight } from '../icons/chevron-right';
+import { IconDelete } from '../icons/delete';
+import { IconFolder } from '../icons/folder';
+import { IconMoreVert } from '../icons/more-vert';
+import { UIListItem } from './list-item';
+
+@Component({
+    selector: 'ui-list-item-example',
+    standalone: true,
+    imports: [CommonModule, UIListItem, IconFolder, IconChevronRight, UIButton, IconMoreVert, UIAvatar],
+    template: `
+        <h2>List Item</h2>
+
+        <h3>Basic</h3>
+        <div style="width: 360px; display: grid; gap: 16px">
+            <ui-list-item
+                label="Death Star Plans"
+                subText="Last modified: May 25, 1977"
+                (onClick)="onClick('Downloading blueprints...')">
+            </ui-list-item>
+        </div>
+
+        <h3>Leading avatar and trailing delete (as="div")</h3>
+        <div style="width: 360px; display: grid; gap: 16px">
+            <ui-list-item as="div" label="File 13 nice" subText="Last modified: Jan 21, 2024">
+                <span data-leading>
+                    <ui-avatar name="John Doe" />
+                </span>
+                <span data-trailing>
+                    <ui-button
+                        variant="tertiary"
+                        size="small"
+                        (click)="onClick('Delete clicked')"
+                        [icon]="iconDelete"
+                        [iconOnly]="true"
+                        label="Delete file">
+                    </ui-button>
+                </span>
+            </ui-list-item>
+        </div>
+
+        <h3>As anchor (as="a") with href</h3>
+        <div style="width: 360px; display: grid; gap: 16px">
+            <ui-list-item
+                as="a"
+                href="/list-item/#example"
+                target="_blank"
+                rel="noopener"
+                label="Spec Document"
+                subText="View online">
+                <span data-leading><icon-folder /></span>
+                <span data-trailing><icon-chevron-right /></span>
+            </ui-list-item>
+        </div>
+
+        <h3>As button (as="button") with trailing icon</h3>
+        <div style="width: 360px; display: grid; gap: 16px">
+            <ui-list-item
+                as="button"
+                label="Project Report Q4"
+                subText="Edited: Nov 11, 2025"
+                (click)="onClick('Opening report options...')">
+                <span data-leading>
+                    <ui-avatar name="Paul Revere" initials="PR" />
+                </span>
+                <span data-trailing>
+                    <icon-more-vert />
+                </span>
+            </ui-list-item>
+        </div>
+
+        <h3>Trailing button</h3>
+        <div style="width: 360px; display: grid; gap: 16px">
+            <ui-list-item as="div" label="Design Assets" subText="Updated: Oct 03, 2025">
+                <span data-leading><icon-folder /></span>
+                <span data-trailing>
+                    <ui-button label="Rename" variant="tertiary" size="x-small" (click)="onClick('Rename clicked')" />
+                </span>
+            </ui-list-item>
+        </div>
+    `,
+})
+export class UIListItemExample {
+    iconDelete = IconDelete;
+
+    onClick(msg: string) {
+        sendSnackbar(msg);
+    }
+}

package/src/lib/list-item/index.ts

@@ -0,0 +1 @@
+export { UIListItem } from './list-item';

package/src/lib/list-item/list-item.scss

@@ -0,0 +1,124 @@
+[data-bspk='list-item'] {
+    display: flex;
+    user-select: none;
+    color: var(--foreground-neutral-on-surface);
+    background-color: var(--surface-neutral-t1-base);
+    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;
+    border: unset;
+    margin: unset;
+    text-decoration: unset;
+    width: 100%;
+
+    &[data-width='hug'] {
+        width: auto;
+        max-width: 100%;
+    }
+
+    [data-pseudo='focus'] &,
+    &:focus-visible,
+    &:has(*:focus-visible) {
+        outline: solid 2px var(--stroke-neutral-focus);
+        isolation: isolate;
+
+        [data-inner] {
+            border-color: transparent;
+        }
+    }
+
+    &:not([data-disabled], [data-readonly]) {
+        &[data-action],
+        &:is(label) {
+            &[data-active],
+            [data-pseudo='hover'] &,
+            &:hover {
+                background-color: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] &,
+        // pressed state
+        &:active {
+                background-color: var(--interactions-neutral-press-opacity);
+            }
+        }
+    }
+
+    [data-leading],
+    [data-item-label],
+    [data-trailing] {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        flex: 1 1 0;
+        min-width: 0;
+
+        svg {
+            width: 24px;
+            max-width: unset;
+        }
+    }
+
+    [data-leading],
+    [data-trailing] {
+        width: fit-content;
+        flex: 0 0 auto;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    [data-item-label] {
+        text-align: left;
+
+        [data-text] {
+            width: 100%;
+            font: var(--labels-base);
+            color: var(--foreground-neutral-on-surface);
+        }
+
+        [data-sub-text] {
+            width: 100%;
+            font: var(--body-small);
+            color: var(--foreground-neutral-on-surface-variant-01);
+        }
+    }
+
+    [data-trailing]:has(input) {
+        pointer-events: none;
+    }
+
+    img {
+        height: 36px;
+        width: 36px;
+        max-width: unset;
+    }
+
+    &:is(label) {
+        [data-inner] {
+            border-bottom: 0;
+            gap: var(--spacing-sizing-02);
+        }
+    }
+
+    &[aria-selected='true'] {
+        background-color: var(--surface-brand-primary-highlight);
+    }
+
+    &[data-disabled],
+    &[data-readonly] {
+        [data-text],
+        [data-sub-text] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            cursor: not-allowed;
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/list-item/list-item.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { componentTestProps } from '../../utils/test-props';
+import { UIListItem } from './list-item';
+
+describe('UIListItem', () => {
+    let fixture: ComponentFixture<UIListItem>;
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIListItem],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(
+            UIListItem,
+            componentTestProps<UIListItem>({
+                label: 'Test List Item',
+            }),
+        );
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/list-item/list-item.ts

@@ -0,0 +1,225 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Output, EventEmitter, ViewEncapsulation, input, computed } from '@angular/core';
+import { AsInputSignal, CommonProps } from '../../types/common';
+import { UITooltipDirective } from '../tooltip';
+
+export type ListItemProps = CommonProps<
+    | 'active'
+    | 'ariaDisabled'
+    | 'ariaLabel'
+    | 'ariaReadonly'
+    | 'ariaRole'
+    | 'ariaSelected'
+    | 'disabled'
+    | 'htmlFor'
+    | 'id'
+    | 'owner'
+    | 'readOnly'
+    | 'style'
+    | 'tabIndex'
+> & {
+    /**
+     * The element type to render as.
+     *
+     * @default div
+     */
+    as?: 'a' | 'button' | 'div' | 'label';
+    /**
+     * The label to display in the ListItem.
+     *
+     * @required
+     */
+    label: string;
+    /** The subtext to display in the ListItem. */
+    subText?: string;
+    /**
+     * 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?: string;
+    /**
+     * Determines how the ListItem uses horizontal space.
+     *
+     * If set to 'fill', options expand to fill the container's width.
+     *
+     * If set to 'hug', options only take up as much space as the content requires.
+     *
+     * @default fill
+     */
+    width?: 'fill' | 'hug';
+};
+
+/**
+ * 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 should be one of the following Icon, Img, Avatar.
+ *
+ * Trailing elements should be one of the following Icon, Checkbox, Button, Radio, Switch, Tag, Txt.
+ *
+ * @name ListItem
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-list-item',
+    standalone: true,
+    imports: [NgTemplateOutlet, UITooltipDirective],
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./list-item.scss'],
+    template: `
+        <ng-template #inner>
+            <ng-content select="[data-leading]"></ng-content>
+            <span data-item-label>
+                <span data-text [ui-tooltip]="{ truncated: true }">
+                    {{ label() }}
+                </span>
+                @if (subText()) {
+                    <span data-sub-text>{{ subText() }}</span>
+                }
+            </span>
+            <ng-content select="[data-trailing]"></ng-content>
+        </ng-template>
+        @if (As === 'a') {
+            <a
+                [attr.aria-label]="ariaLabel() || undefined"
+                [attr.aria-selected]="ariaSelected()"
+                [attr.role]="role"
+                [attr.tabindex]="tabindex"
+                [attr.href]="href()"
+                [attr.data-action]="actionable() || undefined"
+                [attr.data-active]="active() || undefined"
+                data-bspk="list-item"
+                [attr.data-bspk-owner]="owner() || undefined"
+                [attr.data-disabled]="isDisabled || undefined"
+                [attr.data-readonly]="isReadonly || undefined"
+                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
+                [attr.id]="id()"
+                (click)="handleClick($event)"
+                (keydown.enter)="handleClick($event)">
+                <ng-container *ngTemplateOutlet="inner"></ng-container>
+            </a>
+        } @else if (As === 'button') {
+            <button
+                type="button"
+                [attr.aria-label]="ariaLabel() || undefined"
+                [attr.aria-selected]="ariaSelected()"
+                [attr.role]="role"
+                [attr.tabindex]="tabindex"
+                [attr.data-action]="actionable() || undefined"
+                [attr.data-active]="active() || undefined"
+                data-bspk="list-item"
+                [attr.data-bspk-owner]="owner() || undefined"
+                [attr.data-disabled]="isDisabled || undefined"
+                [attr.data-readonly]="isReadonly || undefined"
+                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
+                [attr.id]="id()"
+                (click)="handleClick($event)">
+                <ng-container *ngTemplateOutlet="inner"></ng-container>
+            </button>
+        } @else if (As === 'label') {
+            <label
+                [attr.aria-label]="ariaLabel() || undefined"
+                [attr.aria-selected]="ariaSelected()"
+                [attr.role]="role"
+                [attr.tabindex]="tabindex"
+                [attr.data-action]="actionable() || undefined"
+                [attr.data-active]="active() || undefined"
+                data-bspk="list-item"
+                [attr.data-bspk-owner]="owner() || undefined"
+                [attr.data-disabled]="isDisabled || undefined"
+                [attr.data-readonly]="isReadonly || undefined"
+                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
+                [attr.id]="id()"
+                [attr.for]="htmlFor()"
+                (click)="handleClick($event)"
+                (keydown.enter)="handleClick($event)">
+                <ng-container *ngTemplateOutlet="inner"></ng-container>
+            </label>
+        } @else {
+            <div
+                [attr.aria-label]="ariaLabel() || undefined"
+                [attr.aria-selected]="ariaSelected()"
+                [attr.role]="role"
+                [attr.tabindex]="tabindex"
+                [attr.data-action]="actionable() || undefined"
+                [attr.data-active]="active() || undefined"
+                data-bspk="list-item"
+                [attr.data-bspk-owner]="owner() || undefined"
+                [attr.data-disabled]="isDisabled || undefined"
+                [attr.data-readonly]="isReadonly || undefined"
+                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
+                [attr.id]="id()"
+                (click)="handleClick($event)"
+                (keydown.enter)="handleClick($event)">
+                <ng-container *ngTemplateOutlet="inner"></ng-container>
+            </div>
+        }
+    `,
+    host: {
+        style: 'display: contents;',
+        '[attr.id]': 'listItemId()',
+    },
+})
+export class UIListItem implements AsInputSignal<ListItemProps> {
+    @Output() onClick = new EventEmitter<Event>();
+
+    readonly active = input<ListItemProps['active']>();
+    readonly owner = input<ListItemProps['owner']>();
+    readonly ariaLabel = input<ListItemProps['ariaLabel']>();
+    readonly ariaSelected = input<ListItemProps['ariaSelected']>();
+    readonly ariaDisabled = input<ListItemProps['ariaDisabled']>();
+    readonly ariaReadonly = input<ListItemProps['ariaReadonly']>();
+    readonly htmlFor = input<ListItemProps['htmlFor']>();
+    readonly disabled = input<ListItemProps['disabled']>();
+    readonly readOnly = input<ListItemProps['readOnly']>();
+    readonly as = input<ListItemProps['as']>('div');
+    readonly href = input<ListItemProps['href']>();
+    readonly label = input.required<ListItemProps['label']>();
+    readonly subText = input<ListItemProps['subText']>();
+    readonly width = input<ListItemProps['width']>();
+    readonly tabIndex = input<ListItemProps['tabIndex']>();
+    readonly id = input<ListItemProps['id']>();
+    readonly listItemId = computed(() => (this.id() ? `list-item-${this.id()}` : undefined));
+    readonly actionable = computed(() => {
+        return (
+            !!(this.href() || this.as() === 'button' || this.onClick.observed || this.onClick.observed) &&
+            !this.isReadonly &&
+            !this.isDisabled
+        );
+    });
+
+    get tabindex() {
+        // allow explicit tabIndex to override actionable state
+        return this.tabIndex() !== undefined ? this.tabIndex() : this.actionable() ? 0 : -1;
+    }
+
+    get isReadonly() {
+        return !!(this.readOnly() || this.ariaReadonly());
+    }
+    get isDisabled() {
+        return !!(this.disabled() || this.ariaDisabled());
+    }
+
+    get As() {
+        const as = this.as();
+        if (as) return as;
+        if (this.href()) return 'a';
+        return 'div';
+    }
+
+    get role(): string | undefined {
+        if (!this.actionable()) return undefined;
+        if (this.as() === 'button') return undefined;
+        return 'button';
+    }
+
+    handleClick(event: Event) {
+        if (this.isReadonly || this.isDisabled) return;
+        this.onClick.emit(event);
+    }
+}

package/src/lib/match-parent-height/index.ts

@@ -0,0 +1 @@
+export * from './match-parent-height.directive';

package/src/lib/match-parent-height/match-parent-height.directive.ts

@@ -0,0 +1,50 @@
+import { Directive, ElementRef, OnDestroy, AfterViewInit, Renderer2, inject } from '@angular/core';
+
+/**
+ * Sets the host element's height to match its parent element's clientHeight. Updates on window resize and orientation
+ * changes.
+ *
+ * @example
+ *     <div style="height: 400px">
+ *     <div ui-match-parent-height>Content fits parent height</div>
+ *     </div>
+ *
+ * @name MatchParentHeight
+ * @phase Utility
+ */
+@Directive({
+    selector: '[ui-match-parent-height]',
+    standalone: true,
+})
+export class UIMatchParentHeightDirective implements AfterViewInit, OnDestroy {
+    el = inject<ElementRef<HTMLElement>>(ElementRef);
+    renderer = inject(Renderer2);
+
+    private removeResize?: () => void;
+    private removeOrientation?: () => void;
+
+    ngAfterViewInit(): void {
+        this.updateHeight();
+        this.removeResize = this.renderer.listen('window', 'resize', () => this.updateHeight());
+        this.removeOrientation = this.renderer.listen('window', 'orientationchange', () => this.updateHeight());
+    }
+
+    ngOnDestroy(): void {
+        if (this.removeResize) this.removeResize();
+        if (this.removeOrientation) this.removeOrientation();
+    }
+
+    private updateHeight(): void {
+        const element = this.el.nativeElement;
+        const parent = element?.parentElement;
+        if (!element || !parent) return;
+
+        // Reset height to allow shrinking or growing
+        element.style.height = '';
+
+        // Apply new height on next frame
+        requestAnimationFrame(() => {
+            element.style.height = `${parent.clientHeight}px`;
+        });
+    }
+}

package/src/lib/menu/example.ts

@@ -0,0 +1,100 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { ThemeService } from '../../services/theme';
+import { UIAvatar } from '../avatar/avatar';
+import { UICheckbox } from '../checkbox';
+import { UIDivider } from '../divider/divider';
+import {
+    IconSettings,
+    IconMenuBook,
+    IconHelp,
+    IconLicense,
+    IconLogout,
+    IconDarkMode,
+    IconDarkModeFill,
+} from '../icons';
+import { IconAccountCircle } from '../icons/account-circle';
+import { UIListItem } from '../list-item/list-item';
+import { UIMenu } from './menu';
+
+@Component({
+    selector: 'ui-menu-example',
+    standalone: true,
+    imports: [
+        CommonModule,
+        UIMenu,
+        UIListItem,
+        UIDivider,
+        UIAvatar,
+        IconAccountCircle,
+        IconSettings,
+        IconDarkModeFill,
+        IconDarkMode,
+        UICheckbox,
+        IconMenuBook,
+        IconHelp,
+        IconLicense,
+        IconLogout,
+    ],
+    template: `
+        <h3>Menu</h3>
+        <ui-menu [width]="'332px'" [owner]="'menu'" [style]="'padding: var(--spacing-sizing-02);'">
+            <ui-list-item [label]="'Michael Scott'" subText="michael.scott@email.com">
+                <span data-leading>
+                    <ui-avatar [image]="'/avatar-01.png'" [name]="'Michael Scott'"></ui-avatar>
+                </span>
+            </ui-list-item>
+            <ui-divider [inset]="2" [padding]="true"></ui-divider>
+            <ui-list-item as="a" href="/menu#/my-profile" label="My profile">
+                <span data-leading>
+                    <icon-account-circle></icon-account-circle>
+                </span>
+            </ui-list-item>
+            <ui-list-item [label]="'Settings'" as="a" href="/menu#/settings">
+                <span data-leading>
+                    <icon-settings />
+                </span>
+            </ui-list-item>
+            <ui-list-item as="label" [label]="'Dark mode'">
+                <span data-leading>
+                    @if (themeService.value() === 'light') {
+                        <icon-dark-mode></icon-dark-mode>
+                    } @else {
+                        <icon-dark-mode-fill></icon-dark-mode-fill>
+                    }
+                </span>
+                <span data-trailing>
+                    <ui-checkbox
+                        name="dark-mode"
+                        [checked]="themeService.value() === 'dark'"
+                        (checkedChange)="themeService.toggle()"></ui-checkbox>
+                </span>
+            </ui-list-item>
+            <ui-divider [inset]="2" [padding]="false"></ui-divider>
+            <ui-list-item [label]="'Guide and tutorial'" as="a" href="/menu#/guide-and-tutorial">
+                <span data-leading>
+                    <icon-menu-book></icon-menu-book>
+                </span>
+            </ui-list-item>
+            <ui-list-item [label]="'Help center'" as="a" href="/menu#/help-center">
+                <span data-leading>
+                    <icon-help></icon-help>
+                </span>
+            </ui-list-item>
+            <ui-divider [inset]="2" [padding]="true"></ui-divider>
+            <ui-list-item [label]="'Go premium'" as="a" href="/menu#/go-premium">
+                <span data-leading>
+                    <icon-license></icon-license>
+                </span>
+            </ui-list-item>
+            <ui-list-item [label]="'Log out'" as="a" href="/menu#/log-out">
+                <span data-leading>
+                    <icon-logout></icon-logout>
+                </span>
+            </ui-list-item>
+        </ui-menu>
+    `,
+})
+export class UIMenuExample {
+    protected readonly themeService = inject(ThemeService);
+}

package/src/lib/menu/index.ts

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