@bspk/ui-ngx 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# Ui
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ui
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+    ```bash
+    cd dist/ui
+    ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+    ```bash
+    npm publish
+    ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/ui",
+    "lib": {
+        "entryFile": "src/index.ts"
+    },
+    "allowedNonPeerDependencies": ["@floating-ui/dom"],
+    "assets": [{ "input": "src/styles", "glob": "**/*.scss", "output": "styles" }]
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@bspk/ui-ngx",
+    "version": "0.0.1",
+    "peerDependencies": {
+        "@angular/common": "^20.3.0",
+        "@angular/core": "^20.3.0",
+        "@bspk/styles": "^1.0.2",
+        "@floating-ui/dom": "^1.6.11"
+    },
+    "dependencies": {
+        "tslib": "^2.3.0"
+    },
+    "sideEffects": false,
+    "exports": {
+        "./styles/base": {
+            "sass": "./styles/base.scss"
+        },
+        "./styles/colors": {
+            "sass": "./styles/colors.scss"
+        }
+    }
+}

package/src/demo/example.ts

@@ -0,0 +1,27 @@
+import { Component, input, ViewEncapsulation } from '@angular/core';
+
+/** A component to wrap examples. */
+@Component({
+    selector: 'ui-example',
+    template: `<ng-content></ng-content>`,
+    host: {
+        '[style.flex-direction]': 'direction()',
+        '[style.width]': 'width()',
+        style: 'display:flex; align-items:center; background-color: var(--background-shade); padding: var(--spacing-sizing-04);',
+    },
+    encapsulation: ViewEncapsulation.None,
+})
+export class UIExample {
+    /**
+     * The flex direction of the example container.
+     *
+     * @default row
+     */
+    readonly direction = input<'column' | 'row'>('row');
+    /**
+     * The width of the example container.
+     *
+     * @default 100%
+     */
+    readonly width = input<string>('100%');
+}

package/src/demo/index.ts

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

package/src/index.ts

@@ -0,0 +1,54 @@
+/**
+ * Index of UI library
+ *
+ * Generated by .scripts/update-index.ts
+ */
+export * from './lib/accordion';
+export * from './lib/avatar';
+export * from './lib/badge';
+export * from './lib/banner-alert';
+export * from './lib/breadcrumb';
+export * from './lib/button';
+export * from './lib/card';
+export * from './lib/checkbox';
+export * from './lib/checkbox-group';
+export * from './lib/checkbox-option';
+export * from './lib/chip';
+export * from './lib/chip-group';
+export * from './lib/dialog';
+export * from './lib/divider';
+export * from './lib/field';
+export * from './lib/flex';
+export * from './lib/floating';
+export * from './lib/focus-trap';
+export * from './lib/icon';
+export * from './lib/icons';
+export * from './lib/inline-alert';
+export * from './lib/input';
+export * from './lib/input-field';
+export * from './lib/key-navigation';
+export * from './lib/link';
+export * from './lib/list-item';
+export * from './lib/match-parent-height';
+export * from './lib/menu';
+export * from './lib/modal';
+export * from './lib/outside-click';
+export * from './lib/pagination';
+export * from './lib/portal';
+export * from './lib/radio';
+export * from './lib/radio-group';
+export * from './lib/radio-option';
+export * from './lib/scrim';
+export * from './lib/segmented-control';
+export * from './lib/select';
+export * from './lib/switch';
+export * from './lib/switch-option';
+export * from './lib/tab-group';
+export * from './lib/tab-list';
+export * from './lib/table';
+export * from './lib/tag';
+export * from './lib/textarea';
+export * from './lib/textarea-field';
+export * from './lib/tooltip';
+export * from './lib/txt';
+export * from './services/theme';

package/src/lib/accordion/accordion.scss

@@ -0,0 +1,115 @@
+[data-bspk='accordion'] {
+    display: block;
+    width: 100%;
+    padding: var(--spacing-sizing-02);
+
+    &:empty {
+        display: none;
+    }
+
+    > section {
+        --border-bottom-color: var(--stroke-neutral-base);
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: var(--foreground-neutral-on-surface);
+
+        &[data-disabled] {
+            --border-bottom-color: var(--stroke-neutral-disabled-light);
+
+            background:
+                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        button[data-header] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0 var(--spacing-sizing-02);
+            gap: var(--spacing-sizing-02);
+            font: inherit;
+            cursor: pointer;
+            outline: none;
+            min-height: var(--spacing-sizing-12);
+
+            [data-title-subtitle] {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                flex: 1;
+
+                [data-title] {
+                    font: var(--labels-base);
+                }
+
+                [data-subtitle] {
+                    font: var(--body-x-small);
+                    color: var(--foreground-neutral-on-surface-variant-01);
+                }
+            }
+
+            [data-arrow] {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-left: var(--spacing-sizing-02);
+
+                svg {
+                    width: var(--spacing-sizing-06);
+                }
+            }
+
+            &:not(:disabled) {
+                &:hover {
+                    background-image:
+                        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 {
+                    background-image:
+                        linear-gradient(
+                            var(--interactions-neutral-press-opacity),
+                            var(--interactions-neutral-press-opacity)
+                        ),
+                        linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: var(--foreground-neutral-disabled-on-surface);
+                border-color: var(--stroke-neutral-disabled-light);
+            }
+        }
+
+        &:has(:focus-visible) {
+            outline: 2px solid var(--stroke-neutral-focus);
+            border-color: var(--stroke-neutral-focus);
+            margin-bottom: 1px;
+        }
+
+        [data-content] {
+            padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+        }
+    }
+
+    [data-divider] {
+        display: block;
+        height: 1px;
+        width: calc(100% - var(--spacing-sizing-04));
+        margin: -1px var(--spacing-sizing-02) 0;
+        background-color: var(--border-bottom-color);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/accordion/accordion.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UIAccordion } from './accordion';
+
+describe('Accordion', () => {
+    let component: UIAccordion;
+    let fixture: ComponentFixture<UIAccordion>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIAccordion],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UIAccordion);
+        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/accordion/accordion.ts

@@ -0,0 +1,191 @@
+import { CommonModule } from '@angular/common';
+import { Component, TemplateRef, ViewEncapsulation, computed, input, model } from '@angular/core';
+import { uniqueId } from '../../utils/random';
+import { IconKeyboardArrowDown } from '../icons/keyboard-arrow-down';
+import { IconKeyboardArrowUp } from '../icons/keyboard-arrow-up';
+
+export interface AccordionSection {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children?: TemplateRef<any> | string;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The subtitle of the accordion. */
+    subtitle?: string;
+    /** The leading element to display in the accordion header. */
+
+    leading?: TemplateRef<any> | string;
+    /** The trailing element to display in the accordion header. */
+
+    trailing?: TemplateRef<any> | string;
+    /**
+     * If the accordion is initially open.
+     *
+     * This is ignored if the accordion section disabled property is true.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * If not provided it will be generated automatically.
+     */
+    id?: string;
+}
+
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     ```html
+ *     <ui-accordion [singleOpen]="false" [items]="[{title: 'Foo', children: 'Foo Children'}, {title: 'Bar', children: 'Bar Children'}, {title: 'Car', children: 'Car Children'}]"></ui-accordion>
+ *     ```;
+ *
+ * @name Accordion
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-accordion',
+    standalone: true,
+    imports: [CommonModule, IconKeyboardArrowDown, IconKeyboardArrowUp],
+    template: `@for (item of itemsWithIds(); track item) {
+        <section [attr.data-disabled]="item.disabled ? true : null" [id]="item.id">
+            <button
+                type="button"
+                [attr.aria-controls]="item.id + '-content'"
+                [attr.aria-expanded]="isOpen(item)"
+                data-header
+                [disabled]="item.disabled ? true : null"
+                (click)="!item.disabled && toggleOpen(item.id!)">
+                @if (item.leading) {
+                    <span data-leading>
+                        @if (isTemplateRef(item.leading)) {
+                            <ng-container>
+                                <ng-container *ngTemplateOutlet="item.leading as TemplateRef"></ng-container>
+                            </ng-container>
+                        } @else {
+                            <ng-container
+                                *ngTemplateOutlet="leadingText; context: { $implicit: item.children }"></ng-container>
+                        }
+                        <ng-template #leadingText>{{ item.leading }}</ng-template>
+                    </span>
+                }
+
+                <span data-title-subtitle>
+                    <span data-title>{{ item.title }}</span>
+
+                    @if (item.subtitle) {
+                        <span data-subtitle>{{ item.subtitle }}</span>
+                    }
+                </span>
+
+                @if (item.trailing) {
+                    <span data-trailing>
+                        @if (isTemplateRef(item.trailing)) {
+                            <ng-container>
+                                <ng-container *ngTemplateOutlet="item.trailing as TemplateRef"></ng-container>
+                            </ng-container>
+                        } @else {
+                            <ng-container
+                                *ngTemplateOutlet="trailingText; context: { $implicit: item.children }"></ng-container>
+                        }
+                        <ng-template #trailingText>{{ item.trailing }}</ng-template>
+                    </span>
+                }
+
+                <span data-arrow>
+                    @if (isOpen(item)) {
+                        <icon-keyboard-arrow-up />
+                    } @else {
+                        <icon-keyboard-arrow-down />
+                    }
+                </span>
+            </button>
+
+            @if (isOpen(item)) {
+                <div data-content [attr.data-hidden]="!isOpen(item) ? true : null" [id]="item.id + '-content'">
+                    @if (isTemplateRef(item.children)) {
+                        <ng-container>
+                            <ng-container *ngTemplateOutlet="item.children as TemplateRef"></ng-container>
+                        </ng-container>
+                    } @else {
+                        <ng-container
+                            *ngTemplateOutlet="childrenText; context: { $implicit: item.children }"></ng-container>
+                    }
+                    <ng-template #childrenText let-content>{{ content }}</ng-template>
+                </div>
+            }
+            <span data-divider></span>
+        </section>
+    }`,
+    styleUrls: ['./accordion.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'data-bspk': 'accordion',
+    },
+})
+export class UIAccordion {
+    /**
+     * Array of accordion sections
+     *
+     * @exampleType Array<AccordionSection>
+     * @required
+     */
+    readonly items = input<AccordionSection[]>([]);
+
+    /**
+     * If true only one accordion section can be opened at a time
+     *
+     * @default true
+     */
+    readonly singleOpen = input(true);
+
+    readonly itemsWithIds = computed(() =>
+        this.items().map((item): AccordionSection & { id: string } => ({
+            ...item,
+            id: item.id || uniqueId('accordion-item'),
+        })),
+    );
+
+    readonly openSections = model(
+        this.itemsWithIds()
+            .filter((i) => i.isOpen)
+            .map((i) => i.id!),
+    );
+
+    toggleOpen(itemId: string) {
+        const isOpen = this.openSections().includes(itemId);
+
+        if (this.singleOpen()) {
+            this.openSections.set(isOpen ? [] : [itemId]);
+            return;
+        }
+
+        this.openSections.set(
+            isOpen ? this.openSections().filter((id) => id !== itemId) : [...this.openSections(), itemId],
+        );
+    }
+
+    isOpen(item: AccordionSection & { id: string }): boolean {
+        return !!item.id && this.openSections().includes(item.id) && !item.disabled;
+    }
+
+    isTemplateRef(value: any): value is TemplateRef<any> {
+        return value instanceof TemplateRef;
+    }
+}

package/src/lib/accordion/example.ts

@@ -0,0 +1,39 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { UIAccordion } from './accordion';
+
+@Component({
+    selector: 'ui-accordion-example',
+    standalone: true,
+    imports: [CommonModule, UIAccordion],
+    template: `
+        <h2>Accordion</h2>
+
+        <p>An accordion component that allows for expandable and collapsible content sections.</p>
+
+        <h3>Default (multiple open)</h3>
+
+        <ui-accordion
+            [singleOpen]="false"
+            [items]="[
+                { title: 'Foo', children: 'Foo Children' },
+                { title: 'Bar', children: 'Bar Children' },
+                { title: 'Car', children: 'Car Children' },
+            ]"></ui-accordion>
+
+        <h3>Single Open</h3>
+
+        <ui-accordion
+            [singleOpen]="true"
+            [items]="[
+                { title: 'Foo', children: 'Foo Children' },
+                { title: 'Bar', children: 'Bar Children' },
+                { title: 'Car', children: 'Car Children' },
+            ]"></ui-accordion>
+
+        <h3>With No Items (hidden)</h3>
+
+        <ui-accordion [items]="[]"></ui-accordion>
+    `,
+})
+export class UIAccordionExample {}

package/src/lib/accordion/index.ts

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