@bspk/ui-ngx 0.0.1 → 0.0.3

package/src/lib/switch-option/switch-option.spec.ts

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

@@ -1,50 +0,0 @@
-import { Component, input } from '@angular/core';
-import { UIListItem } from '../list-item';
-import { UISwitch } from '../switch';
-
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchOption
- * @phase Dev
- */
-@Component({
-    selector: 'ui-switch-option',
-    imports: [UISwitch, UIListItem],
-    template: `<ui-list-item
-        [label]="label() || ''"
-        [subText]="description()"
-        [disabled]="disabled()"
-        data-bspk="switch-option"
-        [attr.aria-disabled]="disabled() ? true : null"
-        as="label">
-        <span data-leading>
-            <ui-switch
-                [id]="id()"
-                [name]="name()"
-                [value]="value()"
-                [checked]="checked()"
-                [disabled]="disabled()"
-                [ariaLabel]="ariaLabel()"
-                (checkedChange)="checkedChange.emit($event)">
-            </ui-switch
-        ></span>
-    </ui-list-item>`,
-    host: {
-        'data-bspk': 'switch-option',
-    },
-})
-export class UISwitchOption extends UISwitch {
-    /** The label of the option. Also used as the aria-label of the control. */
-    readonly label = input<string>();
-
-    /** The description of the option. */
-    readonly description = input<string | undefined>(undefined);
-
-    /** The aria-label for the switch element. Combines label and description if both are present. */
-    override readonly ariaLabel = input<string | undefined>(this.computedAriaLabel());
-
-    computedAriaLabel(): string | undefined {
-        return this.description() ? `${this.label()} - ${this.description()}` : this.label();
-    }
-}

package/src/lib/tab-group/example.ts

@@ -1,49 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UITabGroup } from './tab-group';
-
-@Component({
-    selector: 'ui-tab-group-example',
-    standalone: true,
-    imports: [CommonModule, UITabGroup],
-    template: `
-        <h3>TabGroup Basic</h3>
-        <ui-tab-group [label]="'Group'" [options]="options" [value]="selected" (valueChange)="selected = $event" />
-        <p style="margin-top: var(--spacing-sizing-04);">Selected: {{ selected }}</p>
-
-        <h3>Show Trail (hug)</h3>
-        <ui-tab-group
-            [label]="'Group Trail'"
-            [options]="options"
-            [value]="selectedTrail"
-            [showTrail]="true"
-            [width]="'hug'"
-            (valueChange)="selectedTrail = $event" />
-        <p style="margin-top: var(--spacing-sizing-04);">Selected: {{ selectedTrail }}</p>
-
-        <h3>With Disabled Option</h3>
-        <ui-tab-group
-            [label]="'Segments with Disabled'"
-            [options]="optionsWithDisabled"
-            [value]="selected"
-            (valueChange)="selected = $event" />
-        <p>Selected: {{ selected }}</p>
-    `,
-})
-export class UITabGroupExample {
-    options = [
-        { value: '1', label: 'Option 1' },
-        { value: '2', label: 'Option 2' },
-        { value: '3', label: 'Option 3' },
-    ];
-
-    optionsWithDisabled = [
-        { value: '1', label: 'Option 1' },
-        { value: '2', label: 'Option 2', disabled: true },
-        { value: '3', label: 'Option 3' },
-        { value: '4', label: 'Option 4' },
-    ];
-
-    selected = '1';
-    selectedTrail = '2';
-}

package/src/lib/tab-group/index.ts

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

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

@@ -1,60 +0,0 @@
-ul[data-bspk='tab-group'] {
-    border-bottom: none;
-    max-width: 100%;
-
-    li {
-        border: 0;
-        color: var(--foreground-neutral-on-surface-variant-02);
-        background: none;
-        border-bottom: 1px solid var(--stroke-neutral-low);
-        position: relative;
-        padding: 0 var(--spacing-sizing-04);
-
-        &:not([aria-disabled]) {
-            &:active {
-                background: var(--interactions-neutral-press-opacity);
-            }
-        }
-
-        &[aria-disabled] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-
-        &[aria-selected='true'] {
-            color: var(--foreground-brand-primary);
-
-            &::after {
-                content: '';
-                display: block;
-                width: calc(100% - var(--spacing-sizing-04) * 2);
-                height: 2px;
-                background-color: var(--stroke-brand-primary);
-                bottom: -1px;
-                position: absolute;
-                border-top-right-radius: 2px;
-                border-top-left-radius: 2px;
-            }
-
-            svg {
-                color: var(--surface-brand-primary);
-            }
-        }
-    }
-
-    &[data-show-trail][data-width='hug'] {
-        width: 100%;
-        border-bottom: 1px solid var(--stroke-neutral-low);
-
-        li {
-            border-bottom: none;
-        }
-    }
-
-    &:focus-within {
-        li:not([aria-disabled])[data-active] {
-            background: var(--interactions-neutral-hover-opacity);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,33 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { componentTestProps } from '../../utils/test-props';
-import { UITabGroup } from './tab-group';
-
-describe('TabGroup', () => {
-    let component: UITabGroup;
-    let fixture: ComponentFixture<UITabGroup>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UITabGroup],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(
-            UITabGroup,
-            componentTestProps<UITabGroup>({
-                label: 'Example',
-                options: [
-                    { value: '1', label: 'One' },
-                    { value: '2', label: 'Two' },
-                ],
-                value: '1',
-            }),
-        );
-        component = fixture.componentInstance;
-
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/src/lib/tab-group/tab-group.ts

@@ -1,58 +0,0 @@
-import { Component, ViewEncapsulation, input } from '@angular/core';
-import { UITabList, UITabListUtility } from '../tab-list/tab-list';
-
-export type TabGroupSize = 'large' | 'medium' | 'small';
-
-export interface TabGroupProps {}
-
-/**
- * Navigation tool that organizes content across different screens and views.
- *
- * @example
- *     <!-- Angular example -->
- *     <ui-tab-group
- *     [label]="'Example Tabs'"
- *     [options]="[
- *     { value: '1', label: 'Option 1' },
- *     { value: '2', label: 'Option 2' },
- *     { value: '3', label: 'Option 3' },
- *     ]"
- *     [value]="selected"
- *     (valueChange)="selected = $event">
- *     </ui-tab-group>
- *
- * @name TabGroup
- * @phase Dev
- */
-@Component({
-    selector: 'ui-tab-group',
-    standalone: true,
-    imports: [UITabList],
-    template: `<ul
-        ui-tab-list
-        data-bspk="tab-group"
-        [options]="options()"
-        [value]="value()"
-        (valueChange)="valueChange.emit($event)"
-        [label]="label()"
-        [size]="size()"
-        [width]="width()"
-        [iconsOnly]="iconsOnly()"
-        [id]="id()"
-        [attr.data-show-trail]="showTrail() || undefined"
-        [attr.data-bspk]="'tab-group'"></ul>`,
-    styleUrl: './tab-group.scss',
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        style: 'display: contents;',
-    },
-})
-export class UITabGroup extends UITabListUtility {
-    /**
-     * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
-     * property isn't applicable.
-     *
-     * @default false
-     */
-    readonly showTrail = input<boolean | undefined>();
-}

package/src/lib/tab-list/example.ts

@@ -1,52 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, model } from '@angular/core';
-import { IconAccountCircle, IconHome, IconSearch } from '../icons';
-import { UITabList, TabOption } from './tab-list';
-
-@Component({
-    selector: 'ui-tab-list-example',
-    standalone: true,
-    imports: [CommonModule, UITabList],
-    template: `
-        <h3>TabList Basic</h3>
-        <ul
-            ui-tab-list
-            data-bspk="segmented-control"
-            [label]="'Navigation'"
-            [options]="options"
-            [value]="selected()"
-            (valueChange)="setSelected($event)"></ul>
-        <p style="margin-top: var(--spacing-sizing-04);">Selected: {{ selected() }}</p>
-
-        <h3>Icons Only (with tooltip)</h3>
-        <ul
-            ui-tab-list
-            data-bspk="tab-group"
-            [label]="'Navigation Icons'"
-            [options]="iconOptions"
-            [value]="selectedIcon()"
-            [iconsOnly]="true"
-            (valueChange)="selectedIcon.set($event)"></ul>
-        <p style="margin-top: var(--spacing-sizing-04);">Selected: {{ selectedIcon() }}</p>
-    `,
-})
-export class UITabListExample {
-    options: TabOption[] = [
-        { value: '1', label: 'Option 1' },
-        { value: '2', label: 'Option 2' },
-        { value: '3', label: 'Option 3' },
-    ];
-
-    iconOptions: TabOption[] = [
-        { value: '1', label: 'Home', icon: IconHome },
-        { value: '2', label: 'Search', icon: IconSearch },
-        { value: '3', label: 'Profile', icon: IconAccountCircle },
-    ] as any;
-
-    readonly selected = model('1');
-    readonly selectedIcon = model('2');
-
-    setSelected(value: string) {
-        this.selected.set(value);
-    }
-}

package/src/lib/tab-list/index.ts

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

package/src/lib/tab-list/tab-list.scss

@@ -1,85 +0,0 @@
-ul[data-bspk-utility='tab-list'] {
-    --item-flex-grow: 0;
-
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    height: var(--height);
-    font: var(--font);
-    width: fit-content; // default to hug content
-
-    &[data-width='fill'] {
-        align-items: stretch;
-        width: 100%;
-
-        --item-flex-grow: 1;
-    }
-
-    --icon-size: var(--spacing-sizing-05);
-    --font: var(--labels-base);
-    --height: var(--spacing-sizing-10);
-
-    &[data-size='small'] {
-        --font: var(--labels-small);
-        --height: var(--spacing-sizing-08);
-        --icon-size: var(--spacing-sizing-04);
-    }
-
-    &[data-size='large'] {
-        --font: var(--labels-large);
-        --height: var(--spacing-sizing-12);
-        --icon-size: var(--spacing-sizing-06);
-    }
-
-    &:has(:focus-visible) {
-        outline: 2px solid var(--stroke-neutral-focus);
-        outline-offset: -1px;
-        position: relative;
-        z-index: var(--z-index-focus);
-    }
-
-    li {
-        list-style: none;
-        cursor: pointer;
-        font: var(--font);
-        white-space: nowrap;
-        outline: none;
-        user-select: none;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--spacing-sizing-02);
-        min-width: 0; // Prevent overflow from long content
-
-        &[aria-disabled] {
-            cursor: not-allowed;
-        }
-
-        span {
-            pointer-events: none;
-        }
-
-        [data-label][style] {
-            justify-content: left;
-            max-width: 200px;
-        }
-
-        svg {
-            width: var(--icon-size);
-        }
-    }
-
-    &:not([data-bspk]):focus-within {
-        li:not([aria-disabled]) {
-            &[data-active] {
-                background-color: var(--interactions-neutral-hover-opacity);
-            }
-
-            &[aria-selected='true'] {
-                background-color: var(--surface-brand-primary-highlight);
-            }
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/tab-list/tab-list.spec.ts

@@ -1,32 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { componentTestProps } from '../../utils/test-props';
-import { UITabList } from './tab-list';
-
-describe('TabList', () => {
-    let component: UITabList;
-    let fixture: ComponentFixture<UITabList>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UITabList],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(
-            UITabList,
-            componentTestProps<UITabList>({
-                label: 'Example',
-                options: [
-                    { value: '1', label: 'One' },
-                    { value: '2', label: 'Two' },
-                ],
-                value: '1',
-            }),
-        );
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});