@bspk/ui-ngx 0.0.1

package/src/lib/select/select.scss

@@ -0,0 +1,105 @@
+[data-bspk='select'] {
+    // default -- size medium not disabled or readonly
+
+    --select-background: var(--surface-neutral-t1-base);
+    --select-border-color: var(--stroke-neutral-base);
+    --select-text-color: var(--foreground-neutral-on-surface);
+    --select-height: var(--spacing-sizing-10);
+    --select-font: var(--body-base);
+    --select-clear-height: var(--spacing-sizing-05);
+    --select-padding: var(--spacing-sizing-03);
+    --select-icon-width: var(--spacing-sizing-05);
+
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    outline: unset;
+    min-height: var(--select-height);
+    max-height: var(--select-height);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-02);
+    flex-grow: 0;
+    flex-shrink: 0;
+    text-align: left;
+    font: var(--select-font);
+    border: 1px solid var(--select-border-color);
+    border-radius: var(--radius-sm);
+    background: var(--select-background);
+    padding: 0 var(--select-padding);
+    cursor: pointer;
+
+    [data-input] {
+        position: absolute;
+        opacity: 0;
+        inset: 0;
+        cursor: pointer;
+    }
+
+    [data-bspk='list-item'] {
+        background: transparent;
+    }
+
+    [data-bspk='list-item'] [data-item-label] [data-text] {
+        font: var(--select-font);
+        color: var(--select-text-color);
+    }
+
+    &[data-size='small'] {
+        --select-height: var(--spacing-sizing-08);
+        --select-font: var(--body-small);
+        --select-clear-height: var(--spacing-sizing-05);
+        --select-padding: var(--spacing-sizing-02);
+        --select-icon-width: var(--spacing-sizing-05);
+    }
+
+    &[data-size='large'] {
+        --select-height: var(--spacing-sizing-12);
+        --select-font: var(--body-large);
+        --select-clear-height: var(--spacing-sizing-06);
+        --select-icon-width: var(--spacing-sizing-06);
+    }
+
+    &[aria-disabled],
+    &[aria-readonly]:not([data-empty]) {
+        --select-text-color: var(--foreground-neutral-disabled-on-surface);
+        --select-border-color: var(--stroke-neutral-disabled-light);
+        --select-background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        cursor: not-allowed;
+
+        &[aria-readonly]:not([data-empty]) {
+            --select-text-color: var(--foreground-neutral-on-surface);
+        }
+    }
+
+    &:not([aria-disabled], [aria-readonly]) {
+        &:focus-within {
+            --select-border-color: var(--stroke-neutral-focus);
+
+            border-width: 1px;
+            outline: 1px solid var(--stroke-neutral-focus);
+        }
+
+        &:hover {
+            --select-background:
+                linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+        }
+
+        &:active {
+            --select-background:
+                linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+        }
+    }
+
+    &[data-invalid] {
+        --select-border-color: var(--status-error);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/select/select.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UISelect } from './select';
+
+describe('Select', () => {
+    let component: UISelect;
+    let fixture: ComponentFixture<UISelect>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UISelect],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UISelect);
+        component = fixture.componentInstance;
+        fixture.componentRef.setInput('items', [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+        ]);
+        fixture.componentRef.setInput('name', 'example-select');
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/select/select.ts

@@ -0,0 +1,261 @@
+import { CommonModule } from '@angular/common';
+import {
+    Component,
+    ElementRef,
+    ViewEncapsulation,
+    computed,
+    input,
+    model,
+    signal,
+    viewChild,
+    AfterViewInit,
+    OnDestroy,
+} from '@angular/core';
+import { AsInputSignal, CommonProps, FieldControlProps } from '../../types/common';
+import { keydownHandler } from '../../utils/keydown-handler';
+import { uniqueId } from '../../utils/random';
+import { scrollLimitStyle } from '../../utils/scroll-limit-style';
+import { UIFloatingDirective } from '../floating';
+import { IconKeyboardArrowDown } from '../icons/keyboard-arrow-down';
+import { KeyNavigationUtility } from '../key-navigation';
+import { UIListItem } from '../list-item/list-item';
+import { UIMenu } from '../menu/menu';
+import { UIOutsideClickDirective } from '../outside-click';
+
+export type SelectOption = CommonProps<'disabled'> & { label: string; value: string };
+export type SelectItem = SelectOption & { id: string; ariaLabel?: string; ariaSelected?: boolean };
+
+export type SelectProps = CommonProps<'size'> &
+    FieldControlProps<string> & {
+        /**
+         * Array of options to display in the select
+         *
+         * @example
+         *     [
+         *         { id: '1', label: 'Option 1' },
+         *         { id: '2', label: 'Option 2' },
+         *         { id: '3', label: 'Option 3' },
+         *         { id: '4', label: 'Option 4' },
+         *         { id: '5', label: 'Option 5' },
+         *         { id: '6', label: 'Option 6' },
+         *         { id: '7', label: 'Option 7' },
+         *         { id: '8', label: 'Option 8' },
+         *         { id: '9', label: 'Option 9' },
+         *         { id: '10', label: 'Option 10' },
+         *     ];
+         *
+         * @type Array<SelectOption>
+         * @required
+         */
+        items: SelectOption[];
+        /**
+         * Placeholder for the select
+         *
+         * @default Select one
+         */
+        placeholder?: string;
+        /**
+         * The width of the menu.
+         *
+         * If not provided, the menu will match the width of the select control.
+         */
+        menuWidth?: HTMLElement['style']['width'];
+        /**
+         * The maximum number of ListItems to show before scrolling is enabled.
+         *
+         * Used in conjunction with scrollListItemsStyle utility.
+         */
+        scrollLimit?: number;
+    };
+
+/**
+ * A field element that allows users to select one option from a list of available choices.
+ *
+ * For a more complete example with field usage, see the SelectField component.
+ *
+ * @example
+ *     <ui-field controlId="example-select" helperText="Choose one option" label="Select an option">
+ *     <ui-select
+ *     [id]="'example-select'"
+ *     [name]="'example-select'"
+ *     [options]="OPTIONS"
+ *     [placeholder]="'Select an option'"
+ *     [scrollLimit]="5"
+ *     [size]="'medium'"
+ *     [(value)]="selected">
+ *     </ui-select>
+ *     </ui-field>
+ *
+ * @name Select
+ * @phase Stable
+ */
+@Component({
+    selector: 'ui-select',
+    standalone: true,
+    imports: [CommonModule, UIListItem, UIMenu, IconKeyboardArrowDown, UIFloatingDirective, UIOutsideClickDirective],
+    encapsulation: ViewEncapsulation.None,
+    styleUrl: './select.scss',
+    template: `
+        <input [attr.name]="name() || null" type="hidden" [value]="value() || ''" />
+        <button
+            type="button"
+            [attr.aria-label]="
+                (ariaLabel() ? ariaLabel() + ' ' : '') + (selectedItem?.label || placeholder() || 'Select one')
+            "
+            [attr.aria-activedescendant]="open() ? keyNavigation.activeElementId : null"
+            aria-autocomplete="list"
+            [attr.aria-controls]="open() ? menuId() : null"
+            [attr.aria-describedby]="ariaDescribedBy() || null"
+            [attr.aria-disabled]="disabled() || readOnly() ? true : null"
+            [attr.aria-errormessage]="ariaErrorMessage() || null"
+            [attr.aria-expanded]="open()"
+            aria-haspopup="listbox"
+            [attr.aria-readonly]="readOnly() || null"
+            [attr.aria-required]="required() || null"
+            data-bspk="select"
+            [attr.data-invalid]="invalid() || null"
+            [attr.data-open]="open() || null"
+            [attr.data-size]="size() || 'medium'"
+            [id]="safeId() + '-reference'"
+            (click)="toggleMenu()"
+            (keydown)="handleKeydown($event)"
+            #reference>
+            <ui-list-item
+                [owner]="'select'"
+                [attr.data-placeholder]="selectedItem ? null : true"
+                [id]="safeId() + '-selected-value'"
+                [label]="selectedItem?.label || placeholder() || 'Select one'"
+                [as]="'div'"
+                [tabIndex]="-1"
+                (focus)="reference.focus()"
+                style="pointer-events: none;"
+                #selected></ui-list-item>
+            <icon-keyboard-arrow-down [width]="'20px'"></icon-keyboard-arrow-down>
+        </button>
+        @if (open()) {
+            <ui-menu
+                #floating
+                [ui-floating]="{ reference: referenceEl, refWidth: true }"
+                [ui-outside-click]="{
+                    callback: handleOutsideClick.bind(this),
+                }"
+                [id]="menuId()"
+                [owner]="'select'"
+                role="listbox"
+                [ngStyle]="ngMenuStyle()">
+                @for (item of menuItems(); track item.id) {
+                    <ui-list-item
+                        [owner]="'select'"
+                        [attr.aria-selected]="value() === item.value"
+                        [as]="'div'"
+                        [active]="keyNavigation.activeElementId === item.id"
+                        [label]="item.label"
+                        [tabIndex]="-1"
+                        (onClick)="onItemClick(item)"
+                        [id]="item.id"
+                        [active]="keyNavigation.activeElementId === item.id"></ui-list-item>
+                }
+            </ui-menu>
+        }
+    `,
+})
+export class UISelect implements AsInputSignal<SelectProps>, AfterViewInit, OnDestroy {
+    keyNavigation = new KeyNavigationUtility();
+
+    readonly value = model<SelectProps['value']>('');
+    readonly name = input.required<SelectProps['name']>();
+
+    readonly placeholder = input<SelectProps['placeholder']>('Select one');
+    readonly size = input<SelectProps['size']>('medium');
+    readonly disabled = input<SelectProps['disabled']>(false);
+    readonly invalid = input<SelectProps['invalid']>(false);
+    readonly readOnly = input<SelectProps['readOnly']>(false);
+    readonly required = input<SelectProps['required']>(false);
+    readonly ariaLabel = input<SelectProps['ariaLabel']>(undefined);
+    readonly menuWidth = input<SelectProps['menuWidth']>(undefined);
+    readonly ariaDescribedBy = input<SelectProps['ariaDescribedBy']>(undefined);
+    readonly ariaErrorMessage = input<SelectProps['ariaErrorMessage']>(undefined);
+    readonly items = input.required<SelectProps['items']>();
+
+    readonly reference = viewChild('reference', { read: ElementRef });
+
+    readonly id = input<SelectProps['id']>(uniqueId('dropdown'));
+    readonly safeId = computed(() => this.id() || uniqueId('dropdown'));
+    readonly menuId = computed(() => `${this.safeId()}-menu`);
+    readonly scrollLimit = input<SelectProps['scrollLimit']>();
+    readonly ids = computed(() => this.menuItems().map((item) => item.id));
+
+    readonly open = signal<boolean>(false);
+
+    readonly menuItems = computed<SelectItem[]>(() =>
+        this.items().map((item, index) => ({
+            ...item,
+            id: `${this.safeId()}-item-${index}`,
+        })),
+    );
+
+    readonly ngMenuStyle = computed(() => {
+        return {
+            ...scrollLimitStyle(this.scrollLimit(), this.items().length),
+            width: this.menuWidth() || 'fit-content',
+        };
+    });
+
+    get selectedItem(): SelectItem | undefined {
+        return this.menuItems().find((item) => item.value === this.value());
+    }
+
+    get referenceEl() {
+        return this.reference()!.nativeElement as HTMLElement;
+    }
+
+    toggleMenu(force?: boolean) {
+        if (force !== undefined) {
+            this.open.set(force);
+            return;
+        }
+        this.open.update((o) => !o);
+    }
+
+    onItemClick(item: SelectItem) {
+        if (item.disabled) return;
+        this.value.set(item.value);
+        this.toggleMenu(false);
+    }
+
+    handleOutsideClick = (): void => {
+        this.open.set(false);
+    };
+
+    handleKeydown(event: KeyboardEvent): void {
+        if (!this.open()) {
+            keydownHandler({
+                ArrowDown: () => this.toggleMenu(true),
+                'Ctrl+Option+Space': () => this.toggleMenu(true),
+                Space: () => this.toggleMenu(true),
+                Enter: () => this.toggleMenu(true),
+            })(event);
+            return;
+        }
+
+        const SpaceEnter = () => this.keyNavigation.activeElement?.click();
+
+        // all key events run through keyNavigation utility when menu is open
+        this.keyNavigation.handleKeydown(event, {
+            'Ctrl+Option+Space': SpaceEnter,
+            Space: SpaceEnter,
+            Enter: SpaceEnter,
+            Escape: () => {
+                if (this.open()) this.toggleMenu(false);
+            },
+        });
+    }
+
+    ngAfterViewInit(): void {
+        this.keyNavigation.init({ ids: this.ids() });
+    }
+
+    ngOnDestroy(): void {
+        this.keyNavigation.destroy();
+    }
+}

package/src/lib/switch/example.ts

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { UISwitch } from './switch';
+
+@Component({
+    selector: 'ui-switch-example',
+    standalone: true,
+    imports: [CommonModule, UISwitch],
+    template: `
+        <h2>Switch</h2>
+        @for (ex of examples; track $index) {
+            <h3>{{ ex.label }}</h3>
+            <ui-switch
+                [id]="ex.id"
+                [name]="ex.name"
+                [ariaLabel]="ex.ariaLabel"
+                [value]="ex.value"
+                [checked]="ex.checked"
+                [disabled]="ex.disabled"
+                (checkedChange)="onCheckedChange($index, $event)">
+            </ui-switch>
+            <div>Demo checked: {{ ex.checked }}</div>
+        }
+    `,
+})
+export class UISwitchExample {
+    examples = [
+        {
+            label: 'Basic with id',
+            id: 'test-id',
+            name: 'switch-0',
+            ariaLabel: 'Switch 0',
+            value: 'Switch 0',
+            checked: false,
+        },
+        {
+            label: 'checked = true',
+            id: 'switch-1',
+            name: 'switch-1',
+            ariaLabel: 'Switch 1',
+            value: 'Switch 1',
+            checked: true,
+        },
+        {
+            label: 'checked = false',
+            id: 'switch-2',
+            name: 'switch-2',
+            ariaLabel: 'Switch 2',
+            value: 'Switch 2',
+            checked: false,
+        },
+        {
+            label: 'checked = true, disabled = true',
+            id: 'switch-3',
+            name: 'switch-3',
+            ariaLabel: 'Switch 3',
+            value: 'Switch 3',
+            checked: true,
+            disabled: true,
+        },
+        {
+            label: 'checked = false, disabled = true',
+            id: 'switch-4',
+            name: 'switch-4',
+            ariaLabel: 'Switch 4',
+            value: 'Switch 4',
+            checked: false,
+            disabled: true,
+        },
+    ];
+
+    onCheckedChange(idx: number, checked: boolean) {
+        this.examples[idx].checked = checked;
+        sendSnackbar(`Switch ${idx} checked: ${checked}`);
+    }
+}

package/src/lib/switch/index.ts

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

package/src/lib/switch/switch.scss

@@ -0,0 +1,63 @@
+[data-bspk='switch'] {
+    --track-width: var(--spacing-sizing-09);
+    --toggle-width: var(--spacing-sizing-04);
+    --track-bg: var(--surface-neutral-t4-high);
+    --toggle-bg: var(--foreground-neutral-on-color);
+
+    display: block;
+    margin: 2px;
+
+    input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+    }
+
+    width: var(--track-width);
+    height: var(--spacing-sizing-05);
+    border-radius: var(--spacing-sizing-05);
+    background-color: var(--track-bg);
+    position: relative;
+    z-index: 1;
+
+    span {
+        display: block;
+        width: var(--toggle-width);
+        height: var(--toggle-width);
+        border-radius: var(--radius-full);
+        background-color: var(--toggle-bg);
+        transition: left 0.2s;
+        box-shadow: var(--drop-shadow-raise);
+        left: 2px;
+        top: 2px;
+        position: absolute;
+    }
+
+    &:has(input[type='checkbox']:checked) {
+        --track-bg: var(--foreground-brand-primary);
+
+        span {
+            left: calc(var(--track-width) - var(--toggle-width) - 2px);
+        }
+    }
+
+    &:has(input[type='checkbox']:disabled) {
+        input[type='checkbox'] {
+            pointer-events: none;
+        }
+
+        --track-bg: var(--interactions-disabled-opacity);
+        --toggle-bg: var(--foreground-neutral-disabled-on-surface);
+
+        &:has(input[type='checkbox']:checked) span {
+            --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/switch/switch.spec.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UISwitch } from './switch';
+
+@Component({
+    template: `<ui-switch label="Test Label" name="test-name" ariaLabel="Test label" value="test-value" />`,
+    standalone: true,
+    imports: [UISwitch],
+})
+class TestHostComponent {}
+
+describe('UISwitch', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [TestHostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(fixture.componentInstance).toBeTruthy();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/switch/switch.ts

@@ -0,0 +1,58 @@
+import { Component, Output, EventEmitter, ViewEncapsulation, input, booleanAttribute } from '@angular/core';
+
+/**
+ * A control element that allows users to toggle between two states, typically representing on/off. This is the base
+ * element and if used directly you must wrap it with a label.
+ *
+ * @name UISwitch
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-switch',
+    standalone: true,
+    imports: [],
+    template: `
+        <input
+            type="checkbox"
+            [attr.aria-label]="ariaLabel()"
+            [checked]="checked()"
+            [disabled]="disabled()"
+            [attr.name]="name()"
+            [attr.id]="id()"
+            [attr.value]="value()"
+            (change)="onInputChange($event)" />
+        <span aria-hidden="true"></span>
+    `,
+    styleUrl: './switch.scss',
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'data-bspk': 'switch',
+    },
+})
+export class UISwitch {
+    /** Emits the new checked state (true or false) */
+    @Output() checkedChange = new EventEmitter<boolean>();
+
+    /** The value of the switch. */
+    readonly value = input.required<string | undefined>();
+
+    /** Marks the control as checked. */
+    readonly checked = input(false, { transform: booleanAttribute });
+
+    /** The aria-label for the element. */
+    readonly ariaLabel = input<string | undefined>(undefined);
+
+    /** The name of the control. */
+    readonly name = input<string | undefined>(undefined);
+
+    /** The id of the control. */
+    readonly id = input<string | undefined>(undefined);
+
+    /** Determines if the element is disabled. */
+    readonly disabled = input(false, { transform: booleanAttribute });
+
+    onInputChange(event: Event) {
+        const inputElement = event.target as HTMLInputElement;
+        this.checkedChange.emit(inputElement.checked);
+    }
+}

package/src/lib/switch-option/example.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { UISwitchOption } from './switch-option';
+
+@Component({
+    selector: 'ui-switch-option-example',
+    standalone: true,
+    imports: [CommonModule, UISwitchOption],
+    template: `
+        <h2>Switch Option</h2>
+        @for (ex of examples; track $index) {
+            <h3>{{ ex.label }}</h3>
+            <ui-switch-option
+                [label]="'This is ' + ex.label"
+                [description]="'This is description for ' + ex.label"
+                [id]="ex.id"
+                [name]="ex.name || 'example-switch-group'"
+                [value]="ex.value || ex.label || 'option' + $index"
+                [checked]="ex.checked"
+                [disabled]="ex.disabled"
+                [ariaLabel]="ex.ariaLabel"
+                (checkedChange)="onCheckedChange($index, $event)" />
+            <div>Demo checked: {{ ex.checked }}</div>
+        }
+    `,
+})
+export class UISwitchOptionExample {
+    examples: (Partial<{
+        label: string;
+        description: string;
+        name: string;
+        value: string;
+        checked: boolean;
+        disabled: boolean;
+        ariaLabel: string;
+    }> & { id: string })[] = [
+        { label: 'basic' },
+        { label: 'checked = true', checked: true },
+        { label: 'checked = false', checked: false },
+        { label: 'checked = true, disabled = true', checked: true, disabled: true },
+        { label: 'disabled = true', disabled: true },
+        { label: 'checked = false, disabled = true ', disabled: true, checked: false },
+    ].map((config, idx) => ({
+        id: `switch-option-example-${idx}`,
+        name: `example-switch-group-${idx}`,
+        value: `option-${idx}`,
+        ...config,
+    }));
+
+    onCheckedChange(idx: number, checked: boolean) {
+        this.examples[idx].checked = checked;
+        sendSnackbar(`Switch ${idx} checked: ${checked}`);
+    }
+}

package/src/lib/switch-option/index.ts

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