@bspk/ui-ngx 0.0.1

package/src/lib/tooltip/tooltip.scss

@@ -0,0 +1,65 @@
+[data-bspk='tooltip'] {
+    position: fixed;
+    pointer-events: none;
+    z-index: var(--z-index-tooltip-popover);
+
+    [data-text] {
+        display: block;
+        z-index: 2;
+        position: relative;
+        background-color: var(--surface-neutral-inverse);
+        border-radius: var(--radius-sm);
+        color: var(--foreground-neutral-on-inverse-surface);
+        box-shadow: var(--drop-shadow-float);
+        font: var(--labels-small);
+        padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
+        border: none;
+        transition: opacity 0.2s ease-in-out;
+        max-width: 300px;
+        word-wrap: break-word;
+    }
+
+    --arrow-size: var(--spacing-sizing-01);
+    --arrow-offset: calc(var(--arrow-size) * -2);
+    --arrow-color: var(--surface-neutral-inverse);
+
+    [data-arrow] {
+        display: block;
+        z-index: 1;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
+        border-color: transparent;
+    }
+
+    &[data-placement='bottom'] {
+        [data-arrow] {
+            top: var(--arrow-offset);
+            border-bottom-color: var(--arrow-color);
+        }
+    }
+
+    &[data-placement='top'] {
+        [data-arrow] {
+            border-top-color: var(--arrow-color);
+        }
+    }
+
+    &[data-placement='right'] {
+        [data-arrow] {
+            margin-left: var(--arrow-offset);
+            border-right-color: var(--arrow-color);
+        }
+    }
+
+    &[data-placement='left'] {
+        [data-arrow] {
+            right: var(--arrow-offset);
+            border-left-color: var(--arrow-color);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/tooltip/tooltip.spec.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UITooltipDirective } from './tooltip.directive';
+
+@Component({
+    selector: 'ui-host',
+    standalone: true,
+    imports: [UITooltipDirective],
+    template: `<span [ui-tooltip]="'Hello tooltip'">Hover me</span>`,
+})
+class HostComponent {}
+
+describe('UITooltipDirective', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/tooltip/tooltip.ts

@@ -0,0 +1,137 @@
+import { ComponentRef, Renderer2, signal } from '@angular/core';
+
+import { addComponent } from '../../utils/add-component';
+import { uniqueId } from '../../utils/random';
+import { FloatingUtility } from '../floating/floating';
+import { TooltipProps, TooltipPlacement, UITooltip } from './';
+
+export type TooltipUtilityProps = TooltipProps & { reference?: HTMLElement };
+
+/**
+ * Utility to manage tooltip properties and behavior.
+ *
+ * Should be used in components that require tooltip functionality.
+ */
+export class TooltipUtility {
+    readonly props = signal<TooltipUtilityProps>({});
+
+    readonly tooltipId = uniqueId('tooltip');
+
+    private floating: FloatingUtility | undefined;
+    private readonly computedPlacement = signal<TooltipPlacement | null>(null);
+    private tooltipComponent?: ComponentRef<UITooltip> | null;
+
+    constructor(
+        private renderer: Renderer2,
+        private env: any,
+        props: Partial<TooltipUtilityProps>,
+    ) {
+        this.updateProps(props);
+
+        const host = props.reference;
+
+        this.floating = new FloatingUtility(this.renderer);
+
+        if (typeof document === 'undefined' || !host) return;
+
+        host.addEventListener('mouseenter', this.handleOpenEvent.bind(this));
+        host.addEventListener('mouseleave', this.handleCloseEvent.bind(this));
+        host.addEventListener('focusin', this.handleOpenEvent.bind(this));
+        host.addEventListener('blur', this.handleCloseEvent.bind(this));
+
+        if (!this.referenceEl || !this.props().label) return;
+
+        this.renderer.setAttribute(this.referenceEl, 'aria-labelledby', this.tooltipId);
+
+        this.addComponent(this.props());
+    }
+
+    get referenceEl() {
+        return this.props().reference || null;
+    }
+
+    get tooltipEl() {
+        return this.tooltipComponent?.location.nativeElement as HTMLElement;
+    }
+
+    get arrowEl() {
+        return this.tooltipComponent?.instance.arrowElement as HTMLElement;
+    }
+
+    updateProps(next: Partial<TooltipUtilityProps>) {
+        const props = {
+            ...this.props(),
+            ...next,
+        };
+
+        this.props.set(props);
+
+        if (this.tooltipComponent) {
+            this.tooltipComponent.instance.props.set({
+                ...props,
+
+                // ensure placement is always up to date
+                placement: this.computedPlacement() || props.placement,
+            });
+            this.tooltipComponent.changeDetectorRef.detectChanges();
+        }
+    }
+
+    destroy() {
+        const host = this.props().reference;
+
+        if (typeof document === 'undefined' || !host) return;
+
+        host.removeEventListener('mouseenter', this.handleOpenEvent.bind(this));
+        host.removeEventListener('mouseleave', this.handleCloseEvent.bind(this));
+        host.removeEventListener('focusin', this.handleOpenEvent.bind(this));
+        host.removeEventListener('blur', this.handleCloseEvent.bind(this));
+    }
+
+    addComponent(props = this.props()): boolean {
+        if (
+            // if we can't render or already rendered or disabled or no label we can't show
+            typeof document === 'undefined' ||
+            !this.referenceEl ||
+            !props.label
+        ) {
+            return false;
+        }
+
+        this.tooltipComponent = addComponent(this.env, UITooltip, 'ui-tooltip')!;
+
+        if (this.tooltipEl) this.renderer.setStyle(this.tooltipEl, 'display', 'none');
+        this.tooltipComponent.instance.id.set(this.tooltipId);
+        this.updateProps(props);
+        return true;
+    }
+
+    handleOpenEvent(event: Event) {
+        const props = this.props();
+
+        if (!props.label || event.target !== this.referenceEl || props.disabled || !this.floating) return;
+
+        if (this.tooltipEl) this.renderer.setStyle(this.tooltipEl, 'display', 'block');
+
+        this.floating
+            .compute({
+                placement: this.props()?.placement || 'top',
+                reference: this.referenceEl,
+                floating: this.tooltipEl,
+                arrow: this.arrowEl,
+                offsetOptions: this.arrowEl ? 8 : 4,
+                refWidth: false,
+            })
+            .then(({ placement }) => {
+                if (this.tooltipEl && placement !== this.props()?.placement)
+                    this.computedPlacement.set(placement as TooltipPlacement);
+            });
+    }
+
+    handleCloseEvent() {
+        const { label } = this.props();
+        if (!label) return;
+
+        if (this.tooltipEl) this.renderer.setStyle(this.tooltipEl, 'display', 'none');
+    }
+}

package/src/lib/txt/example.ts

@@ -0,0 +1,39 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { UITxtDirective } from './txt.directive';
+
+@Component({
+    selector: 'ui-txt-example',
+    standalone: true,
+    imports: [CommonModule, UITxtDirective],
+    template: `
+        <h2>Txt Directive</h2>
+
+        <div ui-txt="body-base">body-base</div>
+        <div ui-txt="body-large">body-large</div>
+        <div ui-txt="body-small">body-small</div>
+        <div ui-txt="body-x-small">body-x-small</div>
+        <div ui-txt="display-regular-large">display-regular-large</div>
+        <div ui-txt="display-regular-medium">display-regular-medium</div>
+        <div ui-txt="display-regular-small">display-regular-small</div>
+        <div ui-txt="display-semibold-large">display-semibold-large</div>
+        <div ui-txt="display-semibold-medium">display-semibold-medium</div>
+        <div ui-txt="display-semibold-small">display-semibold-small</div>
+        <div ui-txt="heading-h2">heading-h2</div>
+        <div ui-txt="heading-h2">heading-h2</div>
+        <div ui-txt="heading-h3">heading-h3</div>
+        <div ui-txt="heading-h4">heading-h4</div>
+        <div ui-txt="heading-h5">heading-h5</div>
+        <div ui-txt="heading-h6">heading-h6</div>
+        <div ui-txt="labels-base">labels-base</div>
+        <div ui-txt="labels-large">labels-large</div>
+        <div ui-txt="labels-small">labels-small</div>
+        <div ui-txt="labels-x-small">labels-x-small</div>
+        <div ui-txt="subheader-large">subheader-large</div>
+        <div ui-txt="subheader-medium">subheader-medium</div>
+        <div ui-txt="subheader-x-large">subheader-x-large</div>
+        <div ui-txt="subheader-xx-large">subheader-xx-large</div>
+        <div ui-txt="subheader-xxx-large">subheader-xxx-large</div>
+    `,
+})
+export class UITxtExample {}

package/src/lib/txt/index.ts

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

package/src/lib/txt/txt.directive.ts

@@ -0,0 +1,40 @@
+import { computed, Directive, input } from '@angular/core';
+
+export type TxtVariant =
+    | 'body-base'
+    | 'body-large'
+    | 'body-small'
+    | 'body-x-small'
+    | 'display-regular-large'
+    | 'display-regular-medium'
+    | 'display-regular-small'
+    | 'display-semibold-large'
+    | 'display-semibold-medium'
+    | 'display-semibold-small'
+    | 'heading-h1'
+    | 'heading-h2'
+    | 'heading-h3'
+    | 'heading-h4'
+    | 'heading-h5'
+    | 'heading-h6'
+    | 'labels-base'
+    | 'labels-large'
+    | 'labels-small'
+    | 'labels-x-small'
+    | 'subheader-large'
+    | 'subheader-medium'
+    | 'subheader-x-large'
+    | 'subheader-xx-large'
+    | 'subheader-xxx-large';
+
+@Directive({
+    selector: '[ui-txt]',
+    host: {
+        '[attr.data-txt]': 'variant()',
+        '[style.font]': 'font()',
+    },
+})
+export class UITxtDirective {
+    readonly variant = input<TxtVariant | ''>('body-base', { alias: 'ui-txt' });
+    readonly font = computed(() => `var(--${this.variant() || 'body-base'})`);
+}

package/src/services/theme.ts

@@ -0,0 +1,28 @@
+// create an angular service to manage theme setting and getting
+import { DOCUMENT, effect, inject, Injectable, signal } from '@angular/core';
+
+export type Theme = 'dark' | 'light';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ThemeService {
+    document = inject(DOCUMENT);
+
+    readonly value = signal<Theme>('light');
+
+    private readonly themeKey = 'theme-preference';
+
+    constructor() {
+        effect(() => {
+            const theme = this.value();
+            this.document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem(this.themeKey, theme);
+        });
+    }
+
+    toggle(): void {
+        const newTheme: Theme = this.value() === 'dark' ? 'light' : 'dark';
+        this.value.set(newTheme);
+    }
+}

package/src/styles/base.scss

@@ -0,0 +1,339 @@
+/**
+  * Base Styles
+  * This file is not generated or distributed through @bspk/styles.
+  * If not using a StylesProvider (recommended), this file should be imported first in the main stylesheet .
+  * This file will contain only the most basic styles that are applied across all applications.
+  * This file will NOT contain any component-specific styles.
+  * This file will NOT contain any media queries.
+  * This file will NOT contain any classes
+*/
+
+@use './colors';
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+ol {
+    list-style-position: inside;
+}
+
+:root {
+    --z-index-snackbar: 1200;
+    --z-index-focus: 9999;
+    --z-index-button-dock: 1150;
+    --z-index-tooltip-popover: 1100;
+    --z-index-dialog: 1000;
+    --z-index-dropdown: 1000;
+    --z-index-scrim: 900;
+    --z-index-fab: 800;
+    --z-index-navbar: 700;
+    --z-index-footer: 600;
+    --list-item-height: var(--spacing-sizing-13);
+    --button-border-width: 1px;
+    --button-border-type: solid;
+    --button-border-radius: var(--radius-sm);
+}
+
+@media (prefers-reduced-motion) {
+    [data-animated] {
+        animation: none !important;
+    }
+}
+
+html:has(body[data-bspk]) {
+    height: 100%;
+    scrollbar-gutter: stable;
+    overflow: hidden auto;
+    scroll-behavior: smooth;
+}
+
+/* --scrollbar-width: defined inline in UIProvider */
+html:has([data-bspk='scrim']) {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width);
+}
+
+body[data-bspk] {
+    height: 100%;
+    font: var(--body-base);
+    background-color: var(--background-base);
+    color: var(--foreground-neutral-on-surface);
+    min-width: 343px;
+
+    a:not([data-bspk]) {
+        @extend %link;
+    }
+}
+
+[data-touch-target-parent] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+[data-touch-target] {
+    display: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: auto;
+    left: auto;
+}
+
+[data-truncated] {
+    max-width: inherit;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: transparent;
+}
+
+[data-sr-only] {
+    height: 1px;
+    overflow: hidden;
+    position: absolute !important;
+    width: 1px;
+    clip: rect(1px, 1px, 1px, 1px);
+}
+
+[data-touch-target] ~ * {
+    position: relative;
+    z-index: 2;
+}
+
+/* if touchscreen */
+@media (any-pointer: coarse) {
+    [data-touch-target] {
+        display: block;
+    }
+}
+
+@keyframes skeleton-pulse {
+    0% {
+        opacity: 0.8;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+
+    100% {
+        opacity: 0.8;
+    }
+}
+
+[data-bspk='skeleton-text'] {
+    /*! 
+    --text-margin: is set via inline style
+    --text-height: is set via inline style
+    */
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--text-margin);
+    animation: skeleton-pulse 1.5s infinite;
+    width: 100%;
+    height: fit-content;
+
+    [data-line] {
+        width: 100%;
+        background: var(--foreground-neutral-skeleton-element);
+        border-radius: var(--radius-sm);
+        height: var(--text-height);
+    }
+
+    // if there are 2 lines or more, make the last line 80% width
+    &:has([data-line]:nth-child(2)) {
+        [data-line]:last-child {
+            width: 80%;
+        }
+    }
+}
+
+[data-bspk='skeleton'] {
+    /*! 
+    --height: is set via inline style
+    --width: is set via inline style
+    */
+
+    animation: skeleton-pulse 1.5s infinite;
+    background: var(--foreground-neutral-skeleton-element);
+
+    &[data-variant='rectangular'],
+    &[data-variant='photo'] {
+        min-width: var(--spacing-sizing-08);
+        min-height: var(--spacing-sizing-08);
+        height: var(--height, var(--width));
+        width: var(--width, var(--height));
+        border-radius: var(--radius-sm);
+    }
+
+    &[data-variant='photo'] {
+        border-radius: var(--radius-md);
+    }
+
+    &[data-variant='circular'] {
+        border-radius: 100%;
+        width: var(--width);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='profile'] {
+        border-radius: 100%;
+        width: var(--spacing-sizing-10);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='thumbnail'] {
+        width: var(--spacing-sizing-12);
+        height: var(--spacing-sizing-12);
+        border-radius: var(--radius-sm);
+    }
+}
+
+[data-attachment-wrapper] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    flex-shrink: 0;
+
+    [data-attachment] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: scale(1) translate(50%, -50%);
+        transform-origin: 100% 0%;
+        z-index: 2;
+    }
+}
+
+[data-hidden] {
+    display: none !important;
+}
+
+[data-bspk='link'] {
+    @extend %link;
+}
+
+%link {
+    color: var(--foreground-link-text-default);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-01);
+    font: var(--labels-base);
+
+    &:not([disabled]) {
+        &:hover,
+        &[data-pseudo='hover'] {
+            color: var(--foreground-link-text-default-hovered);
+        }
+
+        &:active,
+        &[data-pseudo='active'] {
+            color: var(--foreground-link-text-default);
+            filter: brightness(80%);
+        }
+
+        &:visited,
+        &[data-pseudo='visited'] {
+            color: var(--foreground-link-text-default-visited);
+        }
+    }
+
+    &[disabled] {
+        pointer-events: none;
+        cursor: text;
+        color: var(--foreground-link-text-default-disabled);
+    }
+
+    &[data-subtle] {
+        text-decoration: none;
+        color: var(--foreground-neutral-on-surface);
+
+        &:not([disabled]) {
+            &:hover,
+            &[data-pseudo='hover'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-hovered);
+            }
+
+            &:active,
+            &[data-pseudo='active'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-pressed);
+            }
+
+            &:visited,
+            &[data-pseudo='visited'] {
+                color: var(--foreground-neutral-on-surface);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            color: var(--foreground-link-text-subtle-disabled);
+        }
+    }
+
+    &[data-subtle-inverse] {
+        text-decoration: none;
+        color: var(--foreground-neutral-inverse-on-surface);
+
+        &:not([disabled]) {
+            &:hover,
+            &[data-pseudo='hover'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-inverse-hovered);
+            }
+
+            &:active,
+            &[data-pseudo='active'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-inverse-pressed);
+            }
+
+            &:visited,
+            &[data-pseudo='visited'] {
+                color: var(--foreground-neutral-on-inverse-surface);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            color: var(--foreground-link-text-subtle-inversed-disabled);
+        }
+    }
+
+    &[data-size='large'] {
+        font: var(--labels-large);
+    }
+
+    &[data-size='small'] {
+        font: var(--labels-small);
+    }
+
+    svg {
+        width: var(--spacing-sizing-05);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */