@bspk/ui-ngx 0.0.1

package/src/lib/card/card.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UICard } from './card';
+
+describe('UICard', () => {
+    let component: UICard;
+    let fixture: ComponentFixture<UICard>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UICard],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UICard);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/card/card.ts

@@ -0,0 +1,42 @@
+import { Component, ViewEncapsulation, input } from '@angular/core';
+
+export type CardVariant = 'elevated' | 'outlined';
+
+/**
+ * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
+ * elements.
+ *
+ * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
+ * details.
+ *
+ * @example
+ *     import { Card } from '@bspk/ui/card';
+ *
+ *     <Card variant="elevated" style={{ padding: 'var(--spacing-sizing-04)', maxWidth: '100%', width: '400px' }}>
+ *     <h3>Card Title</h3>
+ *     <p>This is some content inside the card.</p>
+ *     </Card>;
+ *
+ * @name Card
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-card',
+    standalone: true,
+    imports: [],
+    template: `<ng-content></ng-content>`,
+    styleUrl: './card.scss',
+    host: {
+        'data-bspk': 'card',
+        '[attr.data-variant]': 'variant()',
+    },
+    encapsulation: ViewEncapsulation.None,
+})
+export class UICard {
+    /**
+     * Determines how the card border will appear.
+     *
+     * @default elevated
+     */
+    readonly variant = input<CardVariant>('elevated');
+}

package/src/lib/card/example.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { UICard } from './card';
+
+@Component({
+    selector: 'ui-card-example',
+    standalone: true,
+    imports: [CommonModule, UICard],
+    template: `
+        <h2>Card</h2>
+
+        <h3>Default</h3>
+
+        <div style="width: 300px">
+            <ui-card>
+                <p>Card works! <br />no props set</p>
+            </ui-card>
+        </div>
+
+        <h3>Outlined Variant</h3>
+
+        <div style="width: 300px">
+            <ui-card variant="outlined">
+                <p>Card works! <br />(variant="outlined")</p>
+            </ui-card>
+        </div>
+
+        <h3>Elevated Variant</h3>
+
+        <div style="width: 300px">
+            <ui-card variant="elevated">
+                <p>Card works! <br />(variant="elevated")</p>
+            </ui-card>
+        </div>
+    `,
+})
+export class UICardExample {}

package/src/lib/card/index.ts

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

package/src/lib/checkbox/checkbox.scss

@@ -0,0 +1,91 @@
+[data-bspk='checkbox'] {
+    display: block;
+    position: relative;
+    width: var(--spacing-sizing-06);
+    aspect-ratio: 1/1;
+    padding: 2px;
+
+    input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    span {
+        --stroke: var(--stroke-neutral-base);
+        --inner: none;
+        --background: none;
+        --color: var(--foreground-brand-on-primary);
+
+        display: flex;
+        width: 20px;
+        aspect-ratio: 1/1;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 2px solid var(--stroke);
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        background: var(--background);
+
+        svg[data-checked] {
+            width: 14px;
+        }
+
+        svg[data-indeterminate] {
+            width: 12px;
+        }
+
+        color: var(--color);
+    }
+
+    input[type='checkbox']:not(:checked, :indeterminate, [disabled], [readOnly]) {
+        &:hover + span {
+            background-color: var(--interactions-neutral-hover-opacity);
+        }
+
+        &:active + span {
+            background-color: var(--interactions-neutral-press-opacity);
+        }
+    }
+
+    input[type='checkbox']:checked + span,
+    input[type='checkbox']:indeterminate + span {
+        --stroke: var(--stroke-brand-primary);
+        --background: var(--surface-brand-primary);
+    }
+
+    input[type='checkbox'][disabled],
+    input[type='checkbox'][readOnly] {
+        cursor: not-allowed;
+
+        & + span {
+            --stroke: var(--stroke-neutral-interactions-disabled-light);
+        }
+
+        &:is(:checked, :indeterminate) + span {
+            --stroke: transparent;
+            --background: var(--interactions-disabled-opacity);
+            --color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    input[type='checkbox'][aria-invalid]:not([disabled], [readOnly]) {
+        &:checked + span,
+        &:indeterminate + span {
+            --background: var(--status-error);
+        }
+
+        & + span {
+            --stroke: var(--status-error);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/checkbox/checkbox.spec.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UICheckbox } from './checkbox';
+
+@Component({
+    template: `<ui-checkbox label="Test Label" name="test-name" value="test-value" ariaLabel="Test label" />`,
+    standalone: true,
+    imports: [UICheckbox],
+})
+class TestHostComponent {}
+
+describe('UICheckbox', () => {
+    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/checkbox/checkbox.ts

@@ -0,0 +1,126 @@
+import {
+    Component,
+    ViewEncapsulation,
+    input,
+    booleanAttribute,
+    ElementRef,
+    output,
+    viewChild,
+    effect,
+} from '@angular/core';
+import { uniqueId } from '../../utils/random';
+
+/**
+ * A control that allows users to choose one or more items from a list or turn a feature on or off. This is the base
+ * element and if used directly you must wrap it with a label. More often used in CheckboxOption or CheckboxGroup.
+ *
+ * @example
+ *     <label>
+ *     <ui-checkbox
+ *     [checked]="checked"
+ *     [indeterminate]="indeterminate"
+ *     [id]="'sample-checkbox'"
+ *     [name]="'sample-checkbox'"
+ *     (checkedChange)="checked = $event"
+ *     [value]="'sample'"
+ *     aria-label="Sample"
+ *     />
+ *     Checkbox Label
+ *     </label>
+ *
+ * @element
+ * @name Checkbox
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-checkbox',
+    standalone: true,
+    template: `
+        <input
+            [attr.aria-describedby]="ariaDescribedBy() || undefined"
+            [attr.aria-errormessage]="ariaErrorMessage() || undefined"
+            [attr.aria-invalid]="invalid() || undefined"
+            [attr.aria-label]="ariaLabel()"
+            [checked]="checked()"
+            [attr.data-indeterminate]="indeterminate() || undefined"
+            [disabled]="disabled()"
+            [id]="id()"
+            [name]="name()"
+            [required]="required()"
+            [value]="value()"
+            type="checkbox"
+            (change)="onInputChange()"
+            #input />
+        <span aria-hidden="true">
+            @if (indeterminate()) {
+                <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
+                        fill="currentColor" />
+                </svg>
+            } @else if (checked()) {
+                <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
+                        fill="currentColor" />
+                </svg>
+            }
+        </span>
+    `,
+    styleUrl: './checkbox.scss',
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'data-bspk': 'checkbox',
+    },
+})
+export class UICheckbox {
+    /** Emits the new checked state (true or false) */
+    checkedChange = output<boolean>();
+
+    /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) of the control. */
+    readonly name = input.required<string>();
+
+    /** The value of the field control. */
+    readonly value = input<string | undefined>(undefined);
+
+    /** The aria-label for the element. */
+    readonly ariaLabel = input<string | undefined>(undefined);
+
+    /** The id of the element. If not provided one will be generated. */
+    readonly id = input<string>(uniqueId('checkbox'));
+
+    /** Marks the checkbox as checked. @default false */
+    readonly checked = input(false, { transform: booleanAttribute });
+
+    /** If the checkbox is indeterminate. @default false */
+    readonly indeterminate = input(false, { transform: booleanAttribute });
+
+    /** Determines if the element is disabled. @default false */
+    readonly disabled = input(false, { transform: booleanAttribute });
+
+    /** Indicates that the element is in an invalid state. @default false */
+    readonly invalid = input(false, { transform: booleanAttribute });
+
+    /** Determines if the element is required. @default false */
+    readonly required = input(false, { transform: booleanAttribute });
+
+    /** The `aria-describedby` attribute for the checkbox. */
+    readonly ariaDescribedBy = input<string | undefined>(undefined);
+
+    /** The `aria-errormessage` attribute for the checkbox. */
+    readonly ariaErrorMessage = input<string | undefined>(undefined);
+
+    private readonly inputEl = viewChild.required<ElementRef<HTMLInputElement>>('input');
+
+    constructor() {
+        effect(() => {
+            // Update indeterminate property on the native input
+            const nativeInput: HTMLInputElement | null = this.inputEl().nativeElement;
+            if (nativeInput) nativeInput.indeterminate = this.indeterminate();
+        });
+    }
+
+    onInputChange() {
+        this.checkedChange.emit(this.inputEl().nativeElement.checked);
+    }
+}

package/src/lib/checkbox/example.ts

@@ -0,0 +1,185 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { UICheckbox } from './checkbox';
+
+@Component({
+    selector: 'ui-checkbox-example',
+    standalone: true,
+    imports: [CommonModule, UICheckbox],
+    template: `
+        <h2>Checkbox</h2>
+
+        <h3>Basic with id</h3>
+        <ui-checkbox
+            id="test-id"
+            name="checkbox-0"
+            ariaLabel="Option 0"
+            value="Option 0"
+            [checked]="checked['checkbox-0']"
+            (checkedChange)="setChecked('checkbox-0', $event)" />
+
+        <h3>checked = {{ checked['checkbox-1'] }}</h3>
+        <ui-checkbox
+            name="checkbox-1"
+            ariaLabel="Option 1"
+            value="Option 1"
+            [checked]="checked['checkbox-1']"
+            (checkedChange)="setChecked('checkbox-1', $event)" />
+
+        <h3>checked = {{ checked['checkbox-2'] }}</h3>
+        <ui-checkbox
+            name="checkbox-2"
+            ariaLabel="Option 2"
+            value="Option 2"
+            [checked]="checked['checkbox-2']"
+            (checkedChange)="setChecked('checkbox-2', $event)" />
+
+        <h3>checked = {{ checked['checkbox-3'] }}, disabled = true</h3>
+        <ui-checkbox
+            name="checkbox-3"
+            ariaLabel="Option 3"
+            value="Option 3"
+            [disabled]="true"
+            [checked]="checked['checkbox-3']"
+            (checkedChange)="setChecked('checkbox-3', $event)" />
+
+        <h3>checked = {{ checked['checkbox-4'] }}, disabled = true</h3>
+        <ui-checkbox
+            name="checkbox-4"
+            ariaLabel="Option 4"
+            value="Option 4"
+            [disabled]="true"
+            [checked]="checked['checkbox-4']"
+            (checkedChange)="setChecked('checkbox-4', $event)" />
+
+        <h3>checked = {{ checked['checkbox-5'] }}, invalid = true</h3>
+        <ui-checkbox
+            name="checkbox-5"
+            ariaLabel="Option 5"
+            value="Option 5"
+            [invalid]="true"
+            [checked]="checked['checkbox-5']"
+            (checkedChange)="setChecked('checkbox-5', $event)" />
+
+        <h3>checked = {{ checked['checkbox-6'] }} , invalid = true</h3>
+        <ui-checkbox
+            name="checkbox-6"
+            ariaLabel="Option 6"
+            value="Option 6"
+            [invalid]="true"
+            [checked]="checked['checkbox-6']"
+            (checkedChange)="setChecked('checkbox-6', $event)" />
+
+        <h3>checked = {{ checked['checkbox-7'] }}, required = true</h3>
+        <ui-checkbox
+            name="checkbox-7"
+            ariaLabel="Option 7"
+            value="Option 7"
+            [required]="true"
+            [checked]="checked['checkbox-7']"
+            (checkedChange)="setChecked('checkbox-7', $event)" />
+
+        <h3>checked = {{ checked['checkbox-8'] }}, required = true</h3>
+        <ui-checkbox
+            name="checkbox-8"
+            ariaLabel="Option 8"
+            value="Option 8"
+            [required]="true"
+            [checked]="checked['checkbox-8']"
+            (checkedChange)="setChecked('checkbox-8', $event)" />
+
+        <h3>
+            indeterminate =
+            <button
+                style="font: inherit; border: none; padding: 0; cursor: pointer;"
+                (click)="toggleIndeterminate('checkbox-9')">
+                {{ indeterminate['checkbox-9'] }}</button
+            >, checked = {{ checked['checkbox-9'] }}
+        </h3>
+        <ui-checkbox
+            name="checkbox-9"
+            ariaLabel="Option 9"
+            value="Option 9"
+            [indeterminate]="indeterminate['checkbox-9']"
+            [checked]="checked['checkbox-9']"
+            (checkedChange)="setChecked('checkbox-9', $event)" />
+
+        <h3>
+            checked = {{ checked['checkbox-10'] }}, indeterminate =
+            <button
+                style="font: inherit; border: none; padding: 0; cursor: pointer;"
+                (click)="toggleIndeterminate('checkbox-10')">
+                {{ indeterminate['checkbox-10'] }}
+            </button>
+        </h3>
+        <ui-checkbox
+            name="checkbox-10"
+            ariaLabel="Option 10"
+            value="Option 10"
+            [indeterminate]="indeterminate['checkbox-10']"
+            [checked]="checked['checkbox-10']"
+            (checkedChange)="setChecked('checkbox-10', $event)" />
+
+        <h3>
+            disabled = true, indeterminate =
+            <button
+                style="font: inherit; border: none; padding: 0; cursor: pointer;"
+                (click)="toggleIndeterminate('checkbox-11')">
+                {{ indeterminate['checkbox-11'] }}
+            </button>
+        </h3>
+        <ui-checkbox
+            name="checkbox-11"
+            ariaLabel="Option 11"
+            value="Option 11"
+            [disabled]="true"
+            [indeterminate]="indeterminate['checkbox-11']"
+            [checked]="checked['checkbox-11']"
+            (checkedChange)="setChecked('checkbox-11', $event)" />
+
+        <h3>aria-describedby and aria-errormessage</h3>
+        <div id="desc">This describes the checkbox</div>
+        <div id="err">This is an error message</div>
+        <ui-checkbox
+            name="checkbox-12"
+            ariaLabel="Option 12"
+            value="Option 12"
+            [ariaDescribedBy]="'desc'"
+            [ariaErrorMessage]="'err'"
+            [checked]="checked['checkbox-12']"
+            (checkedChange)="setChecked('checkbox-12', $event)" />
+    `,
+})
+export class UICheckboxExample {
+    checked: Record<string, boolean> = {
+        'checkbox-0': false,
+        'checkbox-1': true,
+        'checkbox-2': false,
+        'checkbox-3': true,
+        'checkbox-4': false,
+        'checkbox-5': true,
+        'checkbox-6': false,
+        'checkbox-7': true,
+        'checkbox-8': false,
+        'checkbox-9': false,
+        'checkbox-10': true,
+        'checkbox-11': false,
+        'checkbox-12': false,
+    };
+
+    indeterminate: Record<string, boolean> = {
+        'checkbox-9': true,
+        'checkbox-10': true,
+        'checkbox-11': true,
+    };
+
+    setChecked(name: string, checked: boolean) {
+        this.checked[name] = checked;
+        sendSnackbar(`Checkbox "${name}" checked: ${checked}`);
+    }
+
+    toggleIndeterminate(name: string) {
+        this.indeterminate[name] = !this.indeterminate[name];
+    }
+}

package/src/lib/checkbox/index.ts

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

package/src/lib/checkbox-group/checkbox-group.scss

@@ -0,0 +1,10 @@
+[data-bspk='checkbox-group'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-width: 100%;
+
+    --list-item-height: 'auto';
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/checkbox-group/checkbox-group.spec.ts

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UICheckboxGroup } from './checkbox-group';
+
+@Component({
+    selector: 'ui-checkbox-group-example',
+    standalone: true,
+    imports: [CommonModule, UICheckboxGroup],
+    template: `
+        <h2>Checkbox Group Example</h2>
+        <ui-checkbox-group
+            [options]="options"
+            [value]="selected"
+            (valueChange)="onValueChange($event)"
+            [name]="'user-checkbox-group'"
+            [selectAll]="true"
+            [selectAllProps]="{ label: 'Select All', description: 'Select all options' }">
+        </ui-checkbox-group>
+        <div>Selected: {{ selected | json }}</div>
+    `,
+})
+class TestHostComponent {
+    options = [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' },
+    ];
+    selected: string[] = [];
+
+    onValueChange(newValue: string[]) {
+        this.selected = newValue;
+    }
+}
+
+describe('UICheckboxGroup', () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [TestHostComponent],
+        }).compileComponents();
+    });
+
+    it('should create', () => {
+        expect(TestHostComponent).toBeTruthy();
+    });
+
+    it('should have no basic a11y issues', async () =>
+        await hasNoBasicA11yIssues(TestBed.createComponent(TestHostComponent)));
+});