@bspk/ui-ngx 0.0.1

package/src/lib/breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumb';
+export * from './utils';

package/src/lib/breadcrumb/utils.ts

@@ -0,0 +1,22 @@
+import { ListItemProps } from '../list-item/list-item';
+
+export interface BreadcrumbItem extends ListItemProps {
+    /**
+     * The label of the breadcrumb item.
+     *
+     * @example
+     *     'Page 1';
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The href of the breadcrumb item.
+     *
+     * @example
+     *     'https://bspk.anywhere.re';
+     *
+     * @required
+     */
+    href: string;
+}

package/src/lib/button/button.scss

@@ -0,0 +1,225 @@
+[data-bspk='button'] {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    text-decoration: none;
+    width: fit-content;
+    font-family: var(--typeface);
+
+    [data-touch-target] {
+        min-width: var(--spacing-sizing-12);
+        min-height: var(--spacing-sizing-12);
+    }
+
+    &[data-width='hug'] {
+        width: fit-content;
+    }
+
+    &[data-width='fill'] {
+        width: 100%;
+    }
+
+    &[data-size='x-small'] {
+        font-size: var(--typography-size-xs);
+        line-height: var(--typography-line-height-lh-1);
+        height: var(--spacing-sizing-06);
+        min-width: var(--spacing-sizing-06);
+        gap: var(--spacing-sizing-02);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: 0 var(--spacing-sizing-02);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-04);
+            height: var(--spacing-sizing-04);
+        }
+    }
+
+    &[data-size='small'] {
+        font-size: var(--typography-size-sm);
+        line-height: var(--typography-line-height-lh-2);
+        height: var(--spacing-sizing-08);
+        min-width: var(--spacing-sizing-08);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: 6px var(--spacing-sizing-04);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-05);
+            height: var(--spacing-sizing-05);
+        }
+    }
+
+    &[data-size='medium'] {
+        font-size: var(--typography-size-base);
+        line-height: var(--typography-line-height-lh-2);
+        height: var(--spacing-sizing-10);
+        min-width: var(--spacing-sizing-10);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-05);
+            height: var(--spacing-sizing-05);
+        }
+    }
+
+    &[data-size='large'] {
+        font-size: var(--typography-size-bp-md);
+        line-height: var(--typography-line-height-lh-4);
+        height: var(--spacing-sizing-12);
+        min-width: var(--spacing-sizing-12);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-button-icon] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    [data-button-label] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &[data-variant='primary'] {
+        --primary-background: var(--surface-brand-primary);
+
+        background-color: var(--primary-background);
+        color: var(--foreground-brand-on-primary);
+        border-radius: var(--button-border-radius);
+
+        &[disabled] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            background: var(--interactions-disabled-opacity);
+        }
+
+        &:not([disabled]) {
+            [data-pseudo='hover'] > &,
+            &:hover {
+                background:
+                    linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),
+                    linear-gradient(var(--primary-background), var(--primary-background));
+            }
+
+            [data-pseudo='active'] > &,
+            &:active {
+                background:
+                    linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),
+                    linear-gradient(var(--primary-background), var(--primary-background));
+            }
+
+            [data-pseudo='focus'] > &,
+            &:focus-visible {
+                outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
+            }
+        }
+
+        &[data-destructive] {
+            &:not([disabled]) {
+                --primary-background: var(--status-error);
+
+                color: var(--foreground-brand-on-primary);
+            }
+        }
+    }
+
+    &[data-variant='secondary'] {
+        border: solid var(--button-border-width) var(--stroke-neutral-base);
+        border-radius: var(--button-border-radius);
+        color: var(--foreground-neutral-on-surface-variant-01);
+
+        &[disabled] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            border: solid var(--button-border-width) var(--stroke-neutral-disabled-light);
+        }
+
+        &:not([disabled]) {
+            [data-pseudo='hover'] > &,
+            &:hover {
+                background-color: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] > &,
+            &:active {
+                background-color: var(--interactions-neutral-press-opacity);
+            }
+
+            [data-pseudo='focus'] > &,
+            &:focus-visible {
+                outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
+            }
+        }
+
+        &[data-destructive] {
+            &:not([disabled]) {
+                background: transparent;
+                color: var(--status-error);
+                border: solid var(--button-border-width) var(--status-error);
+            }
+        }
+    }
+
+    &[data-variant='tertiary'] {
+        background: transparent;
+        color: var(--foreground-neutral-on-surface-variant-01);
+
+        &[disabled] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        &:not([disabled]) {
+            [data-pseudo='hover'] > &,
+            &:hover {
+                background: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] > &,
+            &:active {
+                background: var(--interactions-neutral-press-opacity);
+            }
+
+            [data-pseudo='focus'] > &,
+            &:focus-visible {
+                outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
+            }
+        }
+
+        &[data-destructive] {
+            &:not([disabled]) {
+                color: var(--status-error);
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/button/button.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UIButton } from './button';
+
+describe('Button', () => {
+    let fixture: ComponentFixture<UIButton>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIButton],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UIButton);
+        fixture.componentRef.setInput('label', 'Example label');
+
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/button/button.ts

@@ -0,0 +1,236 @@
+import { CommonModule } from '@angular/common';
+import {
+    Component,
+    Output,
+    EventEmitter,
+    ElementRef,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    input,
+    viewChild,
+} from '@angular/core';
+
+import { BspkIcon } from '../../types/bspk-icon';
+
+import { ButtonSize } from '../../types/common';
+import { UIIcon } from '../icon';
+import { UITooltipDirective } from '../tooltip';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonWidth = 'fill' | 'hug';
+export type IconType = BspkIcon;
+
+/**
+ * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
+ *
+ * @example
+ *     ```html
+ *     <bspk-button
+ *       label="Click Me"
+ *       size="medium"
+ *       variant="primary"
+ *       (onClick)="handleClick($event)"
+ *       icon="iconTemplate">
+ *     </bspk-button>
+ *     ```;
+ *
+ * @name Button
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-button',
+    template: `<button
+        [ui-tooltip]="tooltipLabel"
+        #buttonElement
+        [type]="type()"
+        [attr.aria-label]="ariaLabel() || label()"
+        [attr.data-bspk]="'button'"
+        [attr.data-bspk-owner]="owner() || null"
+        [attr.data-destructive]="destructive() || null"
+        [attr.data-size]="size()"
+        [attr.data-touch-target-parent]="true"
+        [attr.data-variant]="variant()"
+        [attr.data-width]="width()"
+        [disabled]="disabled() || null"
+        [class]="buttonClasses"
+        (click)="handleClick($event)"
+        (focus)="handleFocus($event)"
+        (blur)="handleBlur($event)"
+        (mouseover)="handleMouseOver($event)"
+        (mouseleave)="handleMouseLeave($event)"
+        [style]="style()">
+        @if (!label()) {
+            <ng-content></ng-content>
+        } @else {
+            @if (icon()) {
+                <span [attr.aria-hidden]="true" [attr.data-button-icon]="true">
+                    <ui-icon [icon]="icon()!"></ui-icon>
+                </span>
+            }
+            @if (shouldShowLabel) {
+                <span [attr.data-button-label]="true">{{ label() }}</span>
+            }
+        }
+        <span [attr.data-touch-target]="true"></span>
+    </button>`,
+    styleUrls: ['./button.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [CommonModule, UIIcon, UITooltipDirective],
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        style: 'display: contents;',
+    },
+})
+export class UIButton {
+    /** Event emitted when the button is clicked. */
+    @Output() onClick = new EventEmitter<MouseEvent>();
+
+    /** Event emitted when the button receives focus. */
+    @Output() onFocus = new EventEmitter<FocusEvent>();
+
+    /** Event emitted when the button loses focus. */
+    @Output() onBlur = new EventEmitter<FocusEvent>();
+
+    /** Event emitted when mouse enters the button. */
+    @Output() onMouseOver = new EventEmitter<MouseEvent>();
+
+    /** Event emitted when mouse leaves the button. */
+    @Output() onMouseLeave = new EventEmitter<MouseEvent>();
+
+    readonly buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('buttonElement');
+
+    readonly style = input<string>();
+
+    /**
+     * The label of the button.
+     *
+     * @required
+     */
+    readonly label = input.required<string>();
+
+    /** Use only for custom buttons. The aria-label of the button for accessibility purposes. */
+    readonly ariaLabel = input<string>();
+
+    /**
+     * The icon of the button.
+     *
+     * Should be a SVG from the BSPK icon library.
+     */
+    readonly icon = input<IconType | undefined>();
+
+    /**
+     * When true the button label is hidden and only the icon is shown. When label isn't showing it is used in a tooltip
+     * and as the aria-label prop.
+     *
+     * Ignored if `icon` is not provided.
+     *
+     * @default false
+     */
+    readonly iconOnly = input(false);
+
+    /**
+     * The function of the button is destructive.
+     *
+     * @default false
+     */
+    readonly destructive = input(false);
+
+    /**
+     * The size of the button.
+     *
+     * @default medium
+     */
+    readonly size = input<ButtonSize>('medium');
+
+    /**
+     * The color variant of the button.
+     *
+     * @default primary
+     */
+    readonly variant = input<ButtonVariant>('primary');
+
+    /**
+     * The width of the button.
+     *
+     * @default hug
+     */
+    readonly width = input<ButtonWidth>('hug');
+
+    /** The tool tip text that appears when hovered. */
+    readonly tooltip = input<string>();
+
+    /**
+     * Whether the button is disabled.
+     *
+     * @default false
+     */
+    readonly disabled = input(false);
+
+    /**
+     * The button type attribute.
+     *
+     * @default button
+     */
+    readonly type = input<'button' | 'reset' | 'submit'>('button');
+
+    /** Owner identifier for tracking/analytics. */
+    readonly owner = input<string>();
+
+    /** Additional CSS classes to apply. */
+    readonly class = input<string>();
+    /** Custom content template to override default button content. Not recommended - use for special cases only. */
+
+    get nativeElement(): HTMLButtonElement {
+        return this.buttonElement().nativeElement!;
+    }
+
+    get shouldShowLabel(): boolean {
+        return !this.iconOnly();
+    }
+
+    get tooltipLabel(): string | undefined {
+        return this.tooltip() || (this.iconOnly() ? this.label() : undefined);
+    }
+
+    get buttonClasses(): string {
+        const classes: string[] = [];
+
+        if (this.class()) {
+            classes.push(this.class()!);
+        }
+
+        return classes.join(' ');
+    }
+
+    handleClick(event: MouseEvent): void {
+        if (!this.disabled()) {
+            this.onClick.emit(event);
+        }
+    }
+
+    handleFocus(event: FocusEvent): void {
+        if (!this.disabled()) {
+            this.onFocus.emit(event);
+        }
+    }
+
+    handleBlur(event: FocusEvent): void {
+        if (!this.disabled()) {
+            this.onBlur.emit(event);
+        }
+    }
+
+    handleMouseOver(event: MouseEvent): void {
+        if (!this.disabled()) {
+            this.onMouseOver.emit(event);
+        }
+    }
+
+    handleMouseLeave(event: MouseEvent): void {
+        if (!this.disabled()) {
+            this.onMouseLeave.emit(event);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/button/example.ts

@@ -0,0 +1,168 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { IconBarn } from '../icons/barn';
+import { IconBox } from '../icons/box';
+import { IconBrail } from '../icons/brail';
+import { IconCloud } from '../icons/cloud';
+import { IconGTranslate } from '../icons/g-translate';
+import { IconWarningFill } from '../icons/warning-fill';
+import { UIButton } from './button';
+
+@Component({
+    selector: 'ui-button-example',
+    standalone: true,
+    imports: [CommonModule, UIButton],
+    template: `
+        <h2>Button</h2>
+
+        <h3>Default</h3>
+        <p>only click & the required label prop set</p>
+        <ui-button (click)="handleClick('Default')" label="Default" />
+
+        <h3>Primary</h3>
+        <ui-button
+            (click)="handleClick('Primary')"
+            label="Example Label"
+            size="large"
+            variant="primary"
+            [icon]="iconGTranslate" />
+
+        <h3>Secondary</h3>
+        <ui-button
+            (click)="handleClick('Secondary')"
+            label="Example Label"
+            size="medium"
+            variant="secondary"
+            [icon]="iconBrail" />
+
+        <h3>Tertiary</h3>
+        <ui-button
+            (click)="handleClick('Tertiary')"
+            label="Example Label"
+            size="small"
+            variant="tertiary"
+            [icon]="iconBarn" />
+
+        <h3>Primary with Tooltip</h3>
+        <ui-button
+            (click)="handleClick('Primary with Tooltip')"
+            label="Primary with Tooltip"
+            size="large"
+            [icon]="iconCloud"
+            tooltip="Primary with Tooltip" />
+
+        <h3>Destructive with Tooltip</h3>
+        <ui-button
+            (click)="handleClick('Destructive with Tooltip')"
+            label="Destructive with Tooltip"
+            [icon]="iconWarningFill"
+            [destructive]="true"
+            tooltip="Destructive with Tooltip" />
+
+        <h3>Destructive iconOnly = true</h3>
+
+        <ui-button
+            (click)="handleClick('Destructive iconOnly = true')"
+            label="Destructive test"
+            [icon]="iconWarningFill"
+            [iconOnly]="true"
+            [destructive]="true" />
+
+        <h3>Disabled</h3>
+        <ui-button (click)="handleClick('Disabled')" label="Disabled test" [icon]="iconWarningFill" [disabled]="true" />
+
+        <h3>Disabled iconOnly = true</h3>
+        <ui-button
+            (click)="handleClick('Disabled iconOnly = true')"
+            label="Destructive test"
+            [icon]="iconWarningFill"
+            [iconOnly]="true"
+            [disabled]="true" />
+
+        <h3>Disabled & destructive = true</h3>
+        <p>should visually see disabled and not destructive</p>
+        <ui-button
+            (click)="handleClick('Disabled & Destructive')"
+            label="Disabled & Destructive Test"
+            [icon]="iconWarningFill"
+            [disabled]="true"
+            [destructive]="true" />
+
+        <h3>Primary Disabled & destructive = true</h3>
+        <p>should visually see disabled and not destructive</p>
+        <ui-button
+            (click)="handleClick('Primary Disabled & Destructive')"
+            label="Disabled & Destructive Test"
+            variant="primary"
+            [icon]="iconWarningFill"
+            [disabled]="true"
+            [destructive]="true" />
+
+        <h3>Secondary Disabled & destructive = true</h3>
+        <p>should visually see disabled and not destructive</p>
+        <ui-button
+            (click)="handleClick('Secondary Disabled & Destructive')"
+            label="Disabled & Destructive Test"
+            variant="secondary"
+            [icon]="iconWarningFill"
+            [disabled]="true"
+            [destructive]="true" />
+
+        <h3>Tertiary Disabled & destructive = true</h3>
+        <p>should visually see disabled and not destructive</p>
+        <ui-button
+            (click)="handleClick('Tertiary Disabled & Destructive')"
+            label="Disabled & Destructive Test"
+            variant="tertiary"
+            [icon]="iconWarningFill"
+            [disabled]="true"
+            [destructive]="true" />
+
+        <h3>width = fill</h3>
+        <p>should visually see button fill the width of 500px parent width</p>
+        <div style="width: 500px">
+            <ui-button (click)="handleClick('Example Label')" label="Example Label" [icon]="iconBox" width="fill" />
+        </div>
+
+        <h3>Custom Content</h3>
+        <ui-button label="" (click)="handleClick('Custom Content')" style="padding: 0 var(--spacing-sizing-03)">
+            <svg
+                width="16"
+                focusable="false"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor">
+                <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
+            </svg>
+            Custom Content Example</ui-button
+        >
+
+        <h3>Custom Icon</h3>
+        <ui-button (click)="handleClick('Custom Icon')" tooltip="hello world example" label="" variant="secondary">
+            <svg
+                focusable="false"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor">
+                <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
+            </svg>
+        </ui-button>
+    `,
+})
+export class UIButtonExample {
+    protected readonly iconGTranslate = IconGTranslate;
+    protected readonly iconBrail = IconBrail;
+    protected readonly iconBarn = IconBarn;
+    protected readonly iconCloud = IconCloud;
+    protected readonly iconWarningFill = IconWarningFill;
+    protected readonly iconBox = IconBox;
+
+    protected handleClick(name: string): void {
+        sendSnackbar(`${name} Button clicked!`);
+    }
+}

package/src/lib/button/index.ts

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

package/src/lib/card/card.scss

@@ -0,0 +1,18 @@
+[data-bspk='card'] {
+    display: block;
+    background: var(--surface-neutral-t1-base);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+
+    &[data-variant='outlined'] {
+        border: solid 1px var(--stroke-neutral-low);
+    }
+
+    &[data-variant='elevated'] {
+        box-shadow:
+            0 1px 2px 0 var(--shadow-32),
+            0 1px 3px 1px var(--shadow-15);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */