@bspk/ui-ngx 0.0.1

package/src/lib/floating/floating.ts

@@ -0,0 +1,147 @@
+import { Renderer2, signal } from '@angular/core';
+import {
+    arrow,
+    computePosition,
+    ComputePositionReturn,
+    flip,
+    MiddlewareState,
+    offset,
+    OffsetOptions,
+    Placement,
+    size,
+    Strategy,
+} from '@floating-ui/dom';
+import { UtilityBase } from '../../types/common';
+
+export interface FloatingProps {
+    /**
+     * The preferred placement of the floating element.
+     *
+     * This determines where the floating element will be positioned relative to the reference element.
+     *
+     * @default bottom-start
+     */
+    placement?: Placement;
+    /**
+     * The positioning strategy ('absolute' or 'fixed').
+     *
+     * When set to 'fixed', the floating element will be positioned relative to the viewport.
+     *
+     * When set to 'absolute', the floating element will be positioned relative to the nearest positioned ancestor.
+     *
+     * @default fixed
+     */
+    strategy?: Strategy;
+    /**
+     * The offset options for the floating element.
+     *
+     * @default 0
+     */
+    offsetOptions?: OffsetOptions;
+    /**
+     * When set to true, the width of the floating element will match the width of the reference element.
+     *
+     * @default false
+     */
+    refWidth?: boolean;
+    /** The reference element for positioning. */
+    reference?: HTMLElement | null;
+    /** The floating element to be positioned. */
+    floating?: HTMLElement | null;
+    /** The arrow element for the floating element. */
+    arrow?: HTMLElement | null;
+}
+
+/**
+ * A utility to position an element relative to a reference element using floating UI logic.
+ *
+ * Should be used in components that require floating element positioning.
+ */
+export class FloatingUtility implements UtilityBase<FloatingProps> {
+    readonly props = signal<FloatingProps>({});
+
+    constructor(private render: Renderer2) {}
+    destroy(): void {
+        // No-op
+    }
+
+    updateProps(props: Partial<FloatingProps>) {
+        this.props.set({
+            ...this.props(),
+            ...props,
+        });
+    }
+
+    init(
+        props: Omit<FloatingProps, 'floating' | 'reference'> & Required<Pick<FloatingProps, 'floating' | 'reference'>>,
+    ) {
+        this.updateProps(props);
+    }
+
+    async compute(nextProps?: Partial<FloatingProps>) {
+        const {
+            placement,
+            strategy,
+            offsetOptions,
+            refWidth,
+            floating,
+            reference,
+            arrow: arrowEl,
+        } = {
+            ...this.props(),
+            ...nextProps,
+        };
+
+        if (
+            // Missing required elements
+            !floating ||
+            !reference
+        )
+            return {} as ComputePositionReturn;
+
+        this.render.setStyle(floating, 'position', strategy || 'fixed');
+        this.render.setStyle(floating, 'opacity', '0');
+        this.render.setStyle(floating, 'pointerEvents', 'none');
+
+        const returnValue = await computePosition(reference, floating, {
+            placement: placement || 'bottom-start',
+            strategy: strategy || 'fixed',
+            middleware: [
+                arrowEl ? arrow({ element: arrowEl! }) : undefined,
+                offset(offsetOptions),
+                flip(),
+                refWidth &&
+                    size({
+                        apply({ rects, elements }: MiddlewareState) {
+                            Object.assign(elements.floating.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                        },
+                    }),
+            ],
+        });
+
+        const {
+            x,
+            y,
+            middlewareData: { arrow: arrowCoords },
+        } = returnValue;
+
+        this.render.setStyle(floating, 'left', `${x}px`);
+        this.render.setStyle(floating, 'top', `${y}px`);
+
+        setTimeout(() => {
+            this.render.setStyle(floating, 'opacity', '1');
+            this.render.setStyle(floating, 'pointerEvents', 'auto');
+        }, 10);
+
+        if (arrowEl) {
+            if (arrowCoords) {
+                this.render.setStyle(arrowEl, 'left', `${arrowCoords?.x}px`);
+                this.render.setStyle(arrowEl, 'top', `${arrowCoords?.y}px`);
+            }
+        }
+
+        return returnValue;
+    }
+}

package/src/lib/floating/index.ts

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

package/src/lib/focus-trap/example.ts

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { UIButton } from '../button';
+import { UIFocusTrapDirective } from './focus-trap.directive';
+
+@Component({
+    selector: 'ui-focus-trap-example',
+    standalone: true,
+    imports: [CommonModule, UIFocusTrapDirective, UIButton],
+    encapsulation: ViewEncapsulation.None,
+    template: `
+        <h3>Focus Trap</h3>
+
+        <label style="display: block; margin: var(--spacing-sizing-08) 0;">
+            <input type="checkbox" [checked]="enabled" (change)="enabled = $event.target.checked" /> Enable focus trap
+            <br />
+            <span style="font-size: smaller"
+                >While enabled, you can only tab through elements inside the box below.</span
+            >
+        </label>
+
+        <div [ui-focus-trap]="enabled">
+            <div
+                style="display:flex; gap: var(--spacing-sizing-04); align-items: center; padding: var(--spacing-sizing-04); border: 2px solid var(--stroke-neutral-base); border-radius: var(--radius-md);">
+                <ui-button id="one" label="One" variant="tertiary" (click)="send('Button one clicked')"></ui-button>
+                <ui-button id="two" label="Two" variant="secondary" (click)="send('Button two clicked')"></ui-button>
+                <a href="/focus-trap#link" data-subtle id="three" tabindex="0" (click)="send('Link three clicked')"
+                    >Three (link)</a
+                >
+            </div>
+        </div>
+
+        <p style="margin-top: var(--spacing-sizing-08);">
+            Outside button (should not receive focus when trap enabled):
+        </p>
+        <p>
+            <ui-button
+                id="outside"
+                label="Outside"
+                variant="secondary"
+                (click)="send('Outside button clicked')"></ui-button>
+        </p>
+    `,
+})
+export class UIFocusTrapExample {
+    enabled = true;
+
+    send = sendSnackbar;
+}

package/src/lib/focus-trap/focus-trap.directive.ts

@@ -0,0 +1,142 @@
+import { DOCUMENT } from '@angular/common';
+import { ElementRef, OnChanges, OnDestroy, input, signal, inject, Directive } from '@angular/core';
+
+/** Safely focus an element if it exists and has a focus method. */
+function safeFocus(el: HTMLElement | null | undefined) {
+    if (el && 'focus' in el && typeof el.focus === 'function') el.focus();
+}
+
+/**
+ * Utility that traps keyboard focus within its projected content when enabled.
+ *
+ * @example
+ *     <ui-focus-trap>
+ *     <!-- interactive content -->
+ *     <button>One</button>
+ *     <button>Two</button>
+ *     </ui-focus-trap>
+ *
+ * @name FocusTrap
+ * @phase Utility
+ */
+@Directive({
+    selector: '[ui-focus-trap]',
+    standalone: true,
+})
+export class UIFocusTrapDirective implements OnChanges, OnDestroy {
+    /** Enables the focus trap. */
+    readonly enabled = input<boolean>(true, {
+        alias: 'ui-focus-trap',
+    });
+    /** Auto-focus first focusable child on enable. @default true */
+    readonly autoFocus = input<boolean>(true);
+    /** Restore focus to previously focused element on disable/destroy. @default true */
+    readonly restoreFocus = input<boolean>(true);
+
+    readonly container = inject<ElementRef<HTMLElement>>(ElementRef);
+
+    document = inject(DOCUMENT);
+    private readonly bound = signal(false);
+    private readonly prevFocused = signal<HTMLElement | null>(null);
+
+    ngOnChanges() {
+        const active = this.enabled();
+        if (active && !this.bound()) {
+            this.attach();
+            if (this.autoFocus()) queueMicrotask(() => this.focusInitial());
+        } else if (!active && this.bound()) {
+            this.detach();
+            this.restorePreviousFocus();
+        }
+    }
+
+    ngOnDestroy() {
+        this.detach();
+        this.restorePreviousFocus();
+    }
+
+    private attach() {
+        this.prevFocused.set(this.document?.activeElement as HTMLElement | null);
+        this.document?.addEventListener('keydown', this.onKeyDown, true);
+        this.document?.addEventListener('focusin', this.onFocusIn, true);
+        this.bound.set(true);
+    }
+
+    private detach() {
+        this.document?.removeEventListener('keydown', this.onKeyDown, true);
+        this.document?.removeEventListener('focusin', this.onFocusIn, true);
+        this.bound.set(false);
+    }
+
+    private restorePreviousFocus() {
+        if (!this.restoreFocus()) return;
+        safeFocus(this.prevFocused());
+        this.prevFocused.set(null);
+    }
+
+    private onKeyDown = (e: Event) => {
+        if (!(e instanceof KeyboardEvent)) return;
+        if (!this.enabled()) return;
+        const root = this.container.nativeElement;
+        if (!root) return;
+        if (e.key === 'Tab') {
+            const focusables = this.getFocusableElements();
+            if (focusables.length === 0) {
+                e.preventDefault();
+                root.focus();
+                return;
+            }
+            const active = this.document?.activeElement as HTMLElement | null;
+            let index = focusables.findIndex((el) => el === active);
+            if (index === -1) index = e.shiftKey ? focusables.length - 1 : 0;
+            const nextIndex = e.shiftKey
+                ? (index - 1 + focusables.length) % focusables.length
+                : (index + 1) % focusables.length;
+            e.preventDefault();
+
+            safeFocus(focusables[nextIndex]);
+        }
+    };
+
+    private onFocusIn = (e: Event) => {
+        if (!this.enabled()) return;
+        const target = e.target as HTMLElement | null;
+        const root = this.container.nativeElement;
+        if (!root || !target) return;
+        if (!root.contains(target)) {
+            const focusables = this.getFocusableElements();
+            safeFocus(focusables[0] || root);
+        }
+    };
+
+    private focusInitial() {
+        const root = this.container.nativeElement;
+        const focusables = this.getFocusableElements();
+        safeFocus(focusables[0] || root);
+    }
+
+    private getFocusableElements(): HTMLElement[] {
+        const root = this.container.nativeElement;
+        if (!root) return [];
+        const selector = [
+            'a[href]',
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'textarea:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(',');
+        const nodes = Array.from(root.querySelectorAll<HTMLElement>(selector));
+        return nodes.filter((el) => this.isFocusable(el));
+    }
+
+    private isFocusable(el: HTMLElement): boolean {
+        const style = window.getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
+        const notHidden = style.visibility !== 'hidden' && style.display !== 'none';
+        const inDoc = !!el.ownerDocument && !!el.ownerDocument.documentElement.contains(el);
+        const enabled = !(el as HTMLButtonElement).disabled;
+        const inBounds = rect.width > 0 && rect.height > 0;
+        return notHidden && inDoc && enabled && inBounds;
+    }
+}

package/src/lib/focus-trap/focus-trap.spec.ts

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UIFocusTrapDirective } from './focus-trap.directive';
+
+@Component({
+    standalone: true,
+    imports: [UIFocusTrapDirective],
+    template: `<div>
+        <div [ui-focus-trap]="true" id="focus-trap">
+            Hello Focus Trap
+            <button>Click Me</button>
+            <a href="#">Link</a>
+        </div>
+        <button id="outside-button">Outside Button</button>
+    </div> `,
+})
+class HostCmp {}
+
+const tabEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+
+describe('UIFocusTrapDirective', () => {
+    let fixture: ComponentFixture<HostCmp>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostCmp],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostCmp);
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(fixture).toBeTruthy();
+    });
+
+    it('should trap focus within the focus trap when enabled', () => {
+        const focusTrapEl: HTMLElement = fixture.nativeElement.querySelector('#focus-trap');
+        const buttons = focusTrapEl.querySelectorAll<HTMLElement>('button, a');
+        const firstButton = buttons[0];
+        const lastButton = buttons[1];
+
+        // Focus the first button
+        firstButton.focus();
+        expect(document.activeElement).toBe(firstButton);
+
+        // Simulate Tab key press to move focus to the next element (must bubble to the host to trigger the directive)
+        firstButton.dispatchEvent(tabEvent);
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            expect(document.activeElement).toBe(lastButton);
+            // Simulate Tab key press on the last button to cycle back to the first
+            lastButton.dispatchEvent(tabEvent);
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(document.activeElement).toBe(firstButton);
+            });
+        });
+    });
+
+    it('should allow focus to leave the focus trap when disabled', () => {
+        const focusTrapEl: HTMLElement = fixture.nativeElement.querySelector('#focus-trap');
+        const buttons = focusTrapEl.querySelectorAll<HTMLElement>('button, a');
+        const lastButton = buttons[buttons.length - 1];
+        const outsideButton: HTMLElement = fixture.nativeElement.querySelector('#outside-button');
+
+        // Disable the focus trap
+        (fixture.componentInstance as any)['ui-focus-trap'] = false;
+        fixture.detectChanges();
+
+        // Focus the last button
+        lastButton.focus();
+        expect(document.activeElement).toBe(lastButton);
+
+        // Simulate Tab key press to move focus out of the focus trap
+        lastButton.dispatchEvent(tabEvent);
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            // Focus should move to the outside button
+            expect(document.activeElement).toBe(outsideButton);
+        });
+    });
+});

package/src/lib/focus-trap/index.ts

@@ -0,0 +1 @@
+export * from './focus-trap.directive';

package/src/lib/icon/example.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { IconIcecream } from '../icons/icecream';
+import { UIIcon } from './icon';
+
+@Component({
+    selector: 'ui-icon-example',
+    standalone: true,
+    imports: [CommonModule, UIIcon],
+    template: `
+        <h2>Icon</h2>
+
+        <h3>Using prop width = 24</h3>
+        <div>
+            <ui-icon [icon]="iconIcecream" width="24"> </ui-icon>
+        </div>
+
+        <h3>Not using width prop</h3>
+        <p>Parent div has a width of 50px</p>
+        <div style="width: 50px">
+            <ui-icon [icon]="iconIcecream"> </ui-icon>
+        </div>
+    `,
+})
+export class UIIconExample {
+    protected readonly iconIcecream = IconIcecream;
+}

package/src/lib/icon/icon.spec.ts

@@ -0,0 +1,26 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { Icon360 } from '../icons';
+import { UIIcon } from './icon';
+
+describe('Icon', () => {
+    let fixture: ComponentFixture<UIIcon>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIIcon],
+            providers: [provideHttpClient(), provideHttpClientTesting()],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UIIcon);
+
+        fixture.componentRef.setInput('icon', Icon360);
+        fixture.componentRef.setInput('width', '20');
+
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/icon/icon.ts

@@ -0,0 +1,25 @@
+import { Component, ViewEncapsulation, inject, ViewContainerRef, AfterViewInit, input } from '@angular/core';
+import { BspkIcon } from '../../types/bspk-icon';
+
+@Component({
+    selector: 'ui-icon',
+    template: '',
+    styles: 'ui-icon { display: contents; }',
+    encapsulation: ViewEncapsulation.None,
+})
+export class UIIcon implements AfterViewInit {
+    /** @see https://bspk.anywhere.re/icons */
+    readonly icon = input.required<BspkIcon>();
+    readonly width = input<string>();
+
+    viewContainerRef = inject(ViewContainerRef);
+
+    ngAfterViewInit() {
+        const iconValue = this.icon();
+        if (typeof iconValue !== 'function') return;
+
+        const icon = this.viewContainerRef.createComponent(iconValue).instance;
+
+        icon.width = this.width();
+    }
+}

package/src/lib/icon/index.ts

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

package/src/lib/icons/360.ts

@@ -0,0 +1,22 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'icon-360',
+    template: `<svg
+        [attr.width]="width"
+        data-bspk-name="360"
+        data-type="material"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 -960 960 960">
+        <path
+            d="M374-288q-128-17-211-70T80-480q0-83 115.5-141.5T480-680q169 0 284.5 58.5T880-480q0 56-54.5 101.5T681-307q-16 5-28.5-4.5T640-337q0-18 10.5-32t27.5-20q60-20 91-45.5t31-45.5q0-32-85.5-76T480-600q-149 0-234.5 44T160-480q0 24 51 57.5T356-372l-24-24q-11-11-11-28t11-28q11-11 28-11t28 11l104 104q12 12 12 28t-12 28L388-188q-11 11-27.5 11.5T332-188q-11-11-11.5-27.5T331-244l43-44Z" />
+    </svg>`,
+    styles: ['icon-360 { display: contents; }'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class Icon360 {
+    @Input() width?: string;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/icons/a-z-ascend.ts

@@ -0,0 +1,31 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'icon-a-z-ascend',
+    template: `<svg
+        [attr.width]="width"
+        data-bspk-name="AZAscend"
+        data-type="anywhere"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M4.23374 8.84L3.71543 10.415C3.65534 10.58 3.55017 10.7188 3.39994 10.8313C3.2497 10.9437 3.08444 11 2.90416 11C2.60369 11 2.35956 10.8762 2.17176 10.6287C1.98397 10.3812 1.95017 10.1075 2.07035 9.8075L4.77459 2.585C4.8497 2.405 4.96238 2.2625 5.11262 2.1575C5.26285 2.0525 5.43562 2 5.63093 2H6.30699C6.50229 2 6.67506 2.0525 6.8253 2.1575C6.97553 2.2625 7.08821 2.405 7.16333 2.585L9.8901 9.8525C9.99526 10.1375 9.96146 10.4 9.78869 10.64C9.61592 10.88 9.3793 11 9.07883 11C8.89854 11 8.73329 10.9437 8.58305 10.8313C8.43282 10.7188 8.32765 10.58 8.26755 10.415L7.70417 8.84H4.23374ZM7.11826 7.31H4.77459L5.90135 3.935H6.03656L7.11826 7.31Z"
+            fill="currentColor" />
+        <path
+            d="M8.61603 20.38H4.63034L9.21629 14.9575C9.29632 14.8825 9.35235 14.7962 9.38436 14.6987C9.41637 14.6012 9.43238 14.5 9.43238 14.395V13.54C9.43238 13.39 9.37636 13.2625 9.26431 13.1575C9.15226 13.0525 9.0162 13 8.85613 13H3.52587C3.28577 13 3.08168 13.0787 2.91361 13.2362C2.74554 13.3938 2.66151 13.585 2.66151 13.81C2.66151 14.035 2.74554 14.2262 2.91361 14.3837C3.08168 14.5413 3.28577 14.62 3.52587 14.62H7.31948L2.68552 20.0425C2.60548 20.1175 2.54946 20.2038 2.51744 20.3013C2.48543 20.3988 2.46942 20.5 2.46942 20.605V21.46C2.46942 21.61 2.52545 21.7375 2.6375 21.8425C2.74954 21.9475 2.8856 22 3.04567 22H8.61603C8.85613 22 9.06022 21.9212 9.22829 21.7638C9.39637 21.6062 9.4804 21.415 9.4804 21.19C9.4804 20.965 9.39637 20.7738 9.22829 20.6162C9.06022 20.4587 8.85613 20.38 8.61603 20.38Z"
+            fill="currentColor" />
+        <path
+            d="M17.2778 2.04801C17.1889 2.01601 17.0937 2 16.9922 2C16.8906 2 16.7954 2.01601 16.7065 2.04801C16.6177 2.08002 16.5352 2.13444 16.459 2.21126L12.1938 6.51322C12.0541 6.65406 11.9843 6.8301 11.9843 7.04136C11.9843 7.25262 12.0541 7.43507 12.1938 7.58871C12.3461 7.74235 12.527 7.81917 12.7365 7.81917C12.9459 7.81917 13.1268 7.74235 13.2791 7.58871L16.2305 4.61191L16.2724 21.2317C16.2724 21.4494 16.3454 21.6318 16.4914 21.7791C16.6374 21.9263 16.8182 21.9999 17.034 21.9999C17.2498 21.9999 17.4307 21.9263 17.5767 21.7791C17.7227 21.6318 17.7957 21.4494 17.7957 21.2317L17.7538 4.61191L20.7242 7.58871C20.8639 7.72955 21.0384 7.80317 21.2479 7.80957C21.4573 7.81597 21.6382 7.74235 21.7905 7.58871C21.9302 7.44787 22 7.26862 22 7.05096C22 6.83331 21.9302 6.65406 21.7905 6.51322L17.5253 2.21126C17.4492 2.13444 17.3666 2.08002 17.2778 2.04801Z"
+            fill="currentColor" />
+    </svg>`,
+    styles: ['icon-a-z-ascend { display: contents; }'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class IconAZAscend {
+    @Input() width?: string;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/icons/a-z-descend.ts

@@ -0,0 +1,31 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'icon-a-z-descend',
+    template: `<svg
+        [attr.width]="width"
+        data-bspk-name="AZDescend"
+        data-type="anywhere"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M4.26507 8.84L3.74676 10.415C3.68666 10.58 3.5815 10.7188 3.43126 10.8313C3.28103 10.9438 3.11577 11 2.93549 11C2.63502 11 2.39088 10.8762 2.20309 10.6287C2.0153 10.3813 1.98149 10.1075 2.10168 9.8075L4.80592 2.585C4.88103 2.405 4.99371 2.2625 5.14395 2.1575C5.29418 2.0525 5.46695 2 5.66226 2H6.33832C6.53362 2 6.70639 2.0525 6.85663 2.1575C7.00686 2.2625 7.11954 2.405 7.19466 2.585L9.92143 9.8525C10.0266 10.1375 9.99279 10.4 9.82002 10.64C9.64725 10.88 9.41063 11 9.11016 11C8.92988 11 8.76462 10.9438 8.61438 10.8313C8.46415 10.7188 8.35898 10.58 8.29889 10.415L7.73551 8.84H4.26507ZM7.14959 7.31H4.80592L5.93268 3.935H6.06789L7.14959 7.31Z"
+            fill="currentColor" />
+        <path
+            d="M8.64735 20.38H4.66165L9.2476 14.9575C9.32764 14.8825 9.38366 14.7962 9.41567 14.6987C9.44769 14.6012 9.46369 14.5 9.46369 14.395V13.54C9.46369 13.39 9.40767 13.2625 9.29562 13.1575C9.18357 13.0525 9.04752 13 8.88745 13H3.55718C3.31708 13 3.11299 13.0787 2.94492 13.2362C2.77685 13.3938 2.69281 13.585 2.69281 13.81C2.69281 14.035 2.77685 14.2262 2.94492 14.3837C3.11299 14.5413 3.31708 14.62 3.55718 14.62H7.35079L2.71682 20.0425C2.63679 20.1175 2.58076 20.2038 2.54875 20.3013C2.51674 20.3988 2.50073 20.5 2.50073 20.605V21.46C2.50073 21.61 2.55675 21.7375 2.6688 21.8425C2.78085 21.9475 2.91691 22 3.07698 22H8.64735C8.88745 22 9.09154 21.9212 9.25961 21.7638C9.42768 21.6063 9.51171 21.415 9.51171 21.19C9.51171 20.965 9.42768 20.7737 9.25961 20.6162C9.09154 20.4587 8.88745 20.38 8.64735 20.38Z"
+            fill="currentColor" />
+        <path
+            d="M17.0235 21.9999C16.9219 21.9999 16.8267 21.9839 16.7379 21.9519C16.649 21.9199 16.5665 21.8655 16.4903 21.7887L12.2251 17.4867C12.0855 17.3459 12.0156 17.1666 12.0156 16.949C12.0156 16.7313 12.0855 16.552 12.2251 16.4112C12.3774 16.2576 12.5583 16.184 12.7678 16.1904C12.9772 16.1968 13.1518 16.2704 13.2914 16.4112L16.2618 19.388L16.2199 2.76821C16.2199 2.55055 16.2929 2.3681 16.4389 2.22086C16.5849 2.07362 16.7658 2 16.9816 2C17.1974 2 17.3783 2.07362 17.5243 2.22086C17.6702 2.3681 17.7432 2.55055 17.7432 2.76821L17.7851 19.388L20.7365 16.4112C20.8889 16.2576 21.0697 16.1807 21.2792 16.1807C21.4887 16.1807 21.6695 16.2576 21.8219 16.4112C21.9615 16.5649 22.0313 16.7473 22.0313 16.9586C22.0313 17.1698 21.9615 17.3459 21.8219 17.4867L17.5566 21.7887C17.4805 21.8655 17.398 21.9199 17.3091 21.9519C17.2202 21.9839 17.125 21.9999 17.0235 21.9999Z"
+            fill="currentColor" />
+    </svg>`,
+    styles: ['icon-a-z-descend { display: contents; }'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class IconAZDescend {
+    @Input() width?: string;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/icons/accessibility-new.ts

@@ -0,0 +1,22 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'icon-accessibility-new',
+    template: `<svg
+        [attr.width]="width"
+        data-bspk-name="AccessibilityNew"
+        data-type="material"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 -960 960 960">
+        <path
+            d="M480-720q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720ZM360-120v-480q-49-4-99-11t-98-18q-17-4-27.5-19t-5.5-32q5-17 21-25t34-4q70 15 145.5 22t149.5 7q74 0 149.5-7T775-709q18-4 34 4t21 25q5 17-5.5 32T797-629q-48 11-98 18t-99 11v480q0 17-11.5 28.5T560-80q-17 0-28.5-11.5T520-120v-200h-80v200q0 17-11.5 28.5T400-80q-17 0-28.5-11.5T360-120Z" />
+    </svg>`,
+    styles: ['icon-accessibility-new { display: contents; }'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class IconAccessibilityNew {
+    @Input() width?: string;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/icons/accessible.ts

@@ -0,0 +1,22 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'icon-accessible',
+    template: `<svg
+        [attr.width]="width"
+        data-bspk-name="Accessible"
+        data-type="material"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 -960 960 960">
+        <path
+            d="M400-80q-83 0-141.5-58.5T200-280q0-51 23-94t61-70q14-10 30-7t26 17q10 14 7.5 30T331-378q-23 17-37 42.5T280-280q0 50 35 85t85 35q30 0 55.5-14t42.5-37q10-14 26-16.5t30 7.5q14 10 17 26t-7 30q-27 38-70 61t-94 23Zm320 0q-17 0-28.5-11.5T680-120v-160H480q-33 0-56.5-23.5T400-360v-240q0-33 23.5-56.5T480-680q24 0 41.5 10.5T559-636q45 54 81.5 79t78.5 33q17 3 29 15t12 29q0 17-12.5 28t-28.5 8q-44-8-85.5-28T560-518v138h120q33 0 56.5 23.5T760-300v180q0 17-11.5 28.5T720-80ZM480-720q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720Z" />
+    </svg>`,
+    styles: ['icon-accessible { display: contents; }'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class IconAccessible {
+    @Input() width?: string;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */