@doku-com/tala 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,3 @@
+# DOKU Tala
+
+The next generation of Angular UI library.

package/fesm2022/doku-com-tala.mjs

@@ -0,0 +1,142 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class TalaAvatar {
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    status = input('none', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    badgeCount = input(0, ...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    initials = computed(() => this.getInitials(this.name()), ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    bgColor = computed(() => this.src()
+        ? 'transparent'
+        : this.palette[this.hashName(this.name() || 'default') % this.palette.length], ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
+    hasStatus = computed(() => this.status() !== 'none', ...(ngDevMode ? [{ debugName: "hasStatus" }] : /* istanbul ignore next */ []));
+    hasBadge = computed(() => !!this.badgeCount(), ...(ngDevMode ? [{ debugName: "hasBadge" }] : /* istanbul ignore next */ []));
+    displayBadge = computed(() => {
+        const count = this.badgeCount();
+        return count > 99 ? '99+' : String(count);
+    }, ...(ngDevMode ? [{ debugName: "displayBadge" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const parts = [this.name() || 'Avatar'];
+        if (this.hasStatus())
+            parts.push(`Status: ${this.status()}`);
+        const count = this.badgeCount();
+        if (count !== 0)
+            parts.push(`${count} notification${count !== 1 ? 's' : ''}`);
+        return parts.join(', ');
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'tala-avatar',
+        `tala-avatar--${this.size()}`,
+        `tala-avatar--${this.shape()}`,
+        this.src() ? 'tala-avatar--image' : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    palette = [
+        'var(--color-blue-60)',
+        'var(--color-green-60)',
+        'var(--color-red-60)',
+        'var(--color-amber-60)',
+        'var(--color-blue-70)',
+        'var(--color-green-70)',
+        'var(--color-red-70)',
+        'var(--color-amber-70)',
+    ];
+    hashName(name) {
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = (name.charCodeAt(i) + ((hash << 5) - hash)) | 0;
+        }
+        return Math.abs(hash);
+    }
+    getInitials(name) {
+        const words = name.trim().split(/\s+/).filter(Boolean);
+        if (words.length === 0)
+            return '?';
+        if (words.length === 1)
+            return words[0].slice(0, 2).toUpperCase();
+        return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaAvatar, isStandalone: true, selector: "tala-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.background-color": "bgColor()", "attr.role": "\"img\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--color-border-default);--tala-avatar-initials-color: var(--color-neutral-0);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--color-surface-default);--tala-avatar-status-online-color: var(--color-green-40);--tala-avatar-status-offline-color: var(--color-neutral-40);--tala-avatar-status-busy-color: var(--color-red-50);--tala-avatar-status-away-color: var(--color-amber-30);--tala-avatar-badge-bg: var(--color-red-50);--tala-avatar-badge-color: var(--color-neutral-0);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--font-body);font-weight:var(--font-weight-medium);color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:var(--letter-spacing-normal)}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:var(--font-size-11);line-height:var(--line-height-14)}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:var(--font-size-14);line-height:var(--line-height-20)}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:var(--font-size-16);line-height:var(--line-height-20)}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--radius-full);font-family:var(--font-body);font-weight:var(--font-weight-medium);box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'tala-avatar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.background-color]': 'bgColor()',
+                        '[attr.role]': '"img"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--color-border-default);--tala-avatar-initials-color: var(--color-neutral-0);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--color-surface-default);--tala-avatar-status-online-color: var(--color-green-40);--tala-avatar-status-offline-color: var(--color-neutral-40);--tala-avatar-status-busy-color: var(--color-red-50);--tala-avatar-status-away-color: var(--color-amber-30);--tala-avatar-badge-bg: var(--color-red-50);--tala-avatar-badge-color: var(--color-neutral-0);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--font-body);font-weight:var(--font-weight-medium);color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:var(--letter-spacing-normal)}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:var(--font-size-11);line-height:var(--line-height-14)}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:var(--font-size-14);line-height:var(--line-height-20)}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:var(--font-size-16);line-height:var(--line-height-20)}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--radius-full);font-family:var(--font-body);font-weight:var(--font-weight-medium);box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], badgeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCount", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
+
+class TalaAvatarGroup {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: TalaAvatarGroup, isStandalone: true, selector: "tala-avatar-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "\"tala-avatar-group--\" + size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tala-avatar-group{--tala-avatar-group-ring-width: 2px;--tala-avatar-group-ring-color: var(--color-surface-default);display:inline-flex;flex-direction:row;align-items:center}tala-avatar-group tala-avatar{box-shadow:0 0 0 var(--tala-avatar-group-ring-width) var(--tala-avatar-group-ring-color)}tala-avatar-group tala-avatar:not(:first-child){margin-left:var(--avatar-group-overlap)}.tala-avatar-group--xs{--avatar-group-overlap: -7px}.tala-avatar-group--sm{--avatar-group-overlap: -10px}.tala-avatar-group--md{--avatar-group-overlap: -12px}.tala-avatar-group--lg{--avatar-group-overlap: -14px}.tala-avatar-group--xl{--avatar-group-overlap: -19px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'tala-avatar-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
+                        '[class]': '"tala-avatar-group--" + size()',
+                        role: 'group',
+                    }, styles: ["tala-avatar-group{--tala-avatar-group-ring-width: 2px;--tala-avatar-group-ring-color: var(--color-surface-default);display:inline-flex;flex-direction:row;align-items:center}tala-avatar-group tala-avatar{box-shadow:0 0 0 var(--tala-avatar-group-ring-width) var(--tala-avatar-group-ring-color)}tala-avatar-group tala-avatar:not(:first-child){margin-left:var(--avatar-group-overlap)}.tala-avatar-group--xs{--avatar-group-overlap: -7px}.tala-avatar-group--sm{--avatar-group-overlap: -10px}.tala-avatar-group--md{--avatar-group-overlap: -12px}.tala-avatar-group--lg{--avatar-group-overlap: -14px}.tala-avatar-group--xl{--avatar-group-overlap: -19px}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class TalaButton {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'tala-button',
+        `tala-button--${this.variant()}`,
+        `tala-button--${this.size()}`,
+        this.disabled() ? 'tala-button--disabled' : '',
+        this.loading() ? 'tala-button--loading' : '',
+        this.iconOnly() ? 'tala-button--icon-only' : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    _onClick(event) {
+        if (this.disabled() || this.loading()) {
+            event.stopImmediatePropagation();
+        }
+    }
+    _onKeydown(event) {
+        if (this.disabled() || this.loading())
+            return;
+        event.preventDefault();
+        event.currentTarget.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaButton, isStandalone: true, selector: "tala-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onClick($event)", "keydown.enter": "_onKeydown($event)", "keydown.space": "_onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() || null", "attr.aria-busy": "loading() || null" } }, ngImport: i0, template: "@if (loading()) {\n  <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: ["tala-button{--tala-button-bg: transparent;--tala-button-color: var(--color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--color-border-focus);--tala-button-height: 40px;--tala-button-padding-x: var(--space-4);--tala-button-gap: var(--space-2);--tala-button-font-size: var(--text-label-default-size);--tala-button-line-height: var(--text-label-default-height);--tala-button-border-radius: var(--radius-md);--tala-button-spinner-size: 16px;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--font-body);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px}tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}tala-button:hover:not(.tala-button--disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}tala-button.tala-button--primary{--tala-button-bg: var(--color-action-primary-bg);--tala-button-color: var(--color-action-primary-text);--tala-button-hover-bg: var(--color-action-primary-hover)}tala-button.tala-button--secondary{--tala-button-bg: var(--color-action-secondary-bg);--tala-button-color: var(--color-action-secondary-text);--tala-button-border-color: var(--color-action-secondary-border);--tala-button-hover-bg: var(--color-action-secondary-hover)}tala-button.tala-button--ghost{--tala-button-color: var(--color-action-ghost-text);--tala-button-hover-bg: var(--color-action-ghost-hover)}tala-button.tala-button--accent{--tala-button-bg: var(--color-action-accent-bg);--tala-button-color: var(--color-action-accent-text);--tala-button-hover-bg: var(--color-red-60)}tala-button.tala-button--danger{--tala-button-bg: var(--color-action-danger-bg);--tala-button-color: var(--color-action-danger-text);--tala-button-hover-bg: var(--color-red-70)}tala-button.tala-button--link{--tala-button-color: var(--color-text-link);--tala-button-hover-color: var(--color-red-60)}tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--space-2);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-xsmall-size);--tala-button-line-height: var(--text-label-xsmall-height);--tala-button-border-radius: var(--radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--space-3);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-small-size);--tala-button-line-height: var(--text-label-small-height);--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--space-5);--tala-button-font-size: var(--text-label-large-size);--tala-button-line-height: var(--text-label-large-height);--tala-button-border-radius: var(--radius-lg);--tala-button-spinner-size: 18px}tala-button.tala-button--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}tala-button.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tala-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': '"button"',
+                        '[attr.tabindex]': 'disabled() ? "-1" : "0"',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.aria-busy]': 'loading() || null',
+                        '(click)': '_onClick($event)',
+                        '(keydown.enter)': '_onKeydown($event)',
+                        '(keydown.space)': '_onKeydown($event)',
+                    }, template: "@if (loading()) {\n  <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: ["tala-button{--tala-button-bg: transparent;--tala-button-color: var(--color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--color-border-focus);--tala-button-height: 40px;--tala-button-padding-x: var(--space-4);--tala-button-gap: var(--space-2);--tala-button-font-size: var(--text-label-default-size);--tala-button-line-height: var(--text-label-default-height);--tala-button-border-radius: var(--radius-md);--tala-button-spinner-size: 16px;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--font-body);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px}tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}tala-button:hover:not(.tala-button--disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}tala-button.tala-button--primary{--tala-button-bg: var(--color-action-primary-bg);--tala-button-color: var(--color-action-primary-text);--tala-button-hover-bg: var(--color-action-primary-hover)}tala-button.tala-button--secondary{--tala-button-bg: var(--color-action-secondary-bg);--tala-button-color: var(--color-action-secondary-text);--tala-button-border-color: var(--color-action-secondary-border);--tala-button-hover-bg: var(--color-action-secondary-hover)}tala-button.tala-button--ghost{--tala-button-color: var(--color-action-ghost-text);--tala-button-hover-bg: var(--color-action-ghost-hover)}tala-button.tala-button--accent{--tala-button-bg: var(--color-action-accent-bg);--tala-button-color: var(--color-action-accent-text);--tala-button-hover-bg: var(--color-red-60)}tala-button.tala-button--danger{--tala-button-bg: var(--color-action-danger-bg);--tala-button-color: var(--color-action-danger-text);--tala-button-hover-bg: var(--color-red-70)}tala-button.tala-button--link{--tala-button-color: var(--color-text-link);--tala-button-hover-color: var(--color-red-60)}tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--space-2);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-xsmall-size);--tala-button-line-height: var(--text-label-xsmall-height);--tala-button-border-radius: var(--radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--space-3);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-small-size);--tala-button-line-height: var(--text-label-small-height);--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--space-5);--tala-button-font-size: var(--text-label-large-size);--tala-button-line-height: var(--text-label-large-height);--tala-button-border-radius: var(--radius-lg);--tala-button-spinner-size: 18px}tala-button.tala-button--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}tala-button.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
+/*
+ * Public API Surface of doku-tala
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalaAvatar, TalaAvatarGroup, TalaButton };
+//# sourceMappingURL=doku-com-tala.mjs.map

package/fesm2022/doku-com-tala.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doku-com-tala.mjs","sources":["../../../projects/doku-tala/src/lib/components/avatar/avatar.ts","../../../projects/doku-tala/src/lib/components/avatar/avatar.html","../../../projects/doku-tala/src/lib/components/avatar/avatar-group.ts","../../../projects/doku-tala/src/lib/components/button/button.ts","../../../projects/doku-tala/src/lib/components/button/button.html","../../../projects/doku-tala/src/public-api.ts","../../../projects/doku-tala/src/doku-com-tala.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline';\n\n@Component({\n  selector: 'tala-avatar',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  templateUrl: './avatar.html',\n  styleUrl: './avatar.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    '[style.background-color]': 'bgColor()',\n    '[attr.role]': '\"img\"',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class TalaAvatar {\n  readonly name = input<string>('');\n  readonly size = input<AvatarSize>('md');\n  readonly shape = input<AvatarShape>('circle');\n  readonly status = input<AvatarStatus>('none');\n  readonly badgeCount = input<number>(0);\n  readonly src = input<string>('');\n\n  protected readonly initials = computed(() => this.getInitials(this.name()));\n\n  protected readonly bgColor = computed(() =>\n    this.src()\n      ? 'transparent'\n      : this.palette[this.hashName(this.name() || 'default') % this.palette.length],\n  );\n\n  protected readonly hasStatus = computed(() => this.status() !== 'none');\n  protected readonly hasBadge = computed(() => !!this.badgeCount());\n\n  protected readonly displayBadge = computed(() => {\n    const count = this.badgeCount();\n    return count > 99 ? '99+' : String(count);\n  });\n\n  protected readonly ariaLabel = computed(() => {\n    const parts = [this.name() || 'Avatar'];\n    if (this.hasStatus()) parts.push(`Status: ${this.status()}`);\n    const count = this.badgeCount();\n    if (count !== 0) parts.push(`${count} notification${count !== 1 ? 's' : ''}`);\n    return parts.join(', ');\n  });\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'tala-avatar',\n      `tala-avatar--${this.size()}`,\n      `tala-avatar--${this.shape()}`,\n      this.src() ? 'tala-avatar--image' : '',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  private readonly palette = [\n    'var(--color-blue-60)',\n    'var(--color-green-60)',\n    'var(--color-red-60)',\n    'var(--color-amber-60)',\n    'var(--color-blue-70)',\n    'var(--color-green-70)',\n    'var(--color-red-70)',\n    'var(--color-amber-70)',\n  ];\n\n  private hashName(name: string): number {\n    let hash = 0;\n    for (let i = 0; i < name.length; i++) {\n      hash = (name.charCodeAt(i) + ((hash << 5) - hash)) | 0;\n    }\n    return Math.abs(hash);\n  }\n\n  private getInitials(name: string): string {\n    const words = name.trim().split(/\\s+/).filter(Boolean);\n    if (words.length === 0) return '?';\n    if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n    return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n  }\n}\n","@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\nimport type { AvatarSize } from './avatar';\n\n@Component({\n  selector: 'tala-avatar-group',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: `<ng-content />`,\n  styleUrl: './avatar-group.scss',\n  host: {\n    '[class]': '\"tala-avatar-group--\" + size()',\n    role: 'group',\n  },\n})\nexport class TalaAvatarGroup {\n  readonly size = input<AvatarSize>('md');\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'tala-button',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  templateUrl: './button.html',\n  styleUrl: './button.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': '\"button\"',\n    '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '[attr.aria-busy]': 'loading() || null',\n    '(click)': '_onClick($event)',\n    '(keydown.enter)': '_onKeydown($event)',\n    '(keydown.space)': '_onKeydown($event)',\n  },\n})\nexport class TalaButton {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly disabled = input<boolean>(false);\n  readonly loading = input<boolean>(false);\n  readonly iconOnly = input<boolean>(false);\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'tala-button',\n      `tala-button--${this.variant()}`,\n      `tala-button--${this.size()}`,\n      this.disabled() ? 'tala-button--disabled' : '',\n      this.loading() ? 'tala-button--loading' : '',\n      this.iconOnly() ? 'tala-button--icon-only' : '',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  protected _onClick(event: MouseEvent): void {\n    if (this.disabled() || this.loading()) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  protected _onKeydown(event: Event): void {\n    if (this.disabled() || this.loading()) return;\n    event.preventDefault();\n    (event.currentTarget as HTMLElement).click();\n  }\n}\n","@if (loading()) {\n  <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n","/*\n * Public API Surface of doku-tala\n */\n\nexport * from './lib/components/avatar';\nexport * from './lib/components/button';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@doku-com/tala",
+  "version": "1.0.0-alpha.1",
+  "description": "The next generation of Angular UI library",
+  "keywords": [
+    "doku",
+    "angular"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./styles/index.scss",
+      "types": "./types/doku-com-tala.d.ts",
+      "default": "./fesm2022/doku-com-tala.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "module": "fesm2022/doku-com-tala.mjs",
+  "typings": "types/doku-com-tala.d.ts",
+  "type": "module"
+}

package/styles/_color.scss

@@ -0,0 +1,131 @@
+:root {
+  /* ─── Primitive ─── */
+
+  /* Red */
+  --color-red-5: #fff0f0;
+  --color-red-10: #ffd6d5;
+  --color-red-20: #ff9b99;
+  --color-red-30: #f76b68;
+  --color-red-40: #ef4340;
+  --color-red-50: #e1251b;
+  --color-red-60: #c41e15;
+  --color-red-70: #a0170f;
+  --color-red-80: #7d110a;
+  --color-red-90: #5c0b06;
+  --color-red-100: #3a0603;
+
+  /* Neutral */
+  --color-neutral-0: #ffffff;
+  --color-neutral-5: #f7f7f8;
+  --color-neutral-10: #f0f0f2;
+  --color-neutral-20: #e2e2e6;
+  --color-neutral-30: #c8c8cf;
+  --color-neutral-40: #ababb5;
+  --color-neutral-50: #8e8e9a;
+  --color-neutral-60: #6e6e7c;
+  --color-neutral-70: #52525e;
+  --color-neutral-80: #363640;
+  --color-neutral-90: #1e1e26;
+  --color-neutral-100: #09090d;
+
+  /* Green */
+  --color-green-5: #f0fbf6;
+  --color-green-10: #d1f0e3;
+  --color-green-20: #a3dbca;
+  --color-green-30: #4ab98a;
+  --color-green-40: #22a470;
+  --color-green-50: #008856;
+  --color-green-60: #006b44;
+  --color-green-70: #005436;
+  --color-green-80: #003d28;
+  --color-green-90: #00261a;
+  --color-green-100: #00100c;
+
+  /* Amber */
+  --color-amber-5: #fffbf0;
+  --color-amber-10: #fef3c7;
+  --color-amber-20: #fde68a;
+  --color-amber-30: #ffd24a;
+  --color-amber-40: #d97706;
+  --color-amber-50: #b45309;
+  --color-amber-60: #92400e;
+  --color-amber-70: #78350f;
+  --color-amber-80: #5e2a0c;
+  --color-amber-90: #451e08;
+  --color-amber-100: #2d1206;
+
+  /* Blue */
+  --color-blue-5: #f0f6ff;
+  --color-blue-10: #dbeafe;
+  --color-blue-20: #bfdbfe;
+  --color-blue-30: #6aabfd;
+  --color-blue-40: #3b82f6;
+  --color-blue-50: #1d4ed8;
+  --color-blue-60: #1e40af;
+  --color-blue-70: #1e3a8a;
+  --color-blue-80: #1a3070;
+  --color-blue-90: #142558;
+  --color-blue-100: #0c1840;
+
+  /* ─── Semantic ─── */
+
+  /* Background */
+  --color-background-base: var(--color-neutral-0);
+  --color-background-subtle: var(--color-neutral-5);
+  --color-background-muted: var(--color-neutral-10);
+  --color-background-inverse: var(--color-neutral-100);
+
+  /* Surface */
+  --color-surface-default: var(--color-neutral-0);
+  --color-surface-raised: var(--color-neutral-0);
+  --color-surface-overlay: var(--color-neutral-0);
+  --color-surface-sunken: var(--color-neutral-5);
+
+  /* Border */
+  --color-border-default: var(--color-neutral-20);
+  --color-border-strong: var(--color-neutral-30);
+  --color-border-focus: var(--color-neutral-100);
+  --color-border-danger: var(--color-red-50);
+
+  /* Text */
+  --color-text-primary: var(--color-neutral-100);
+  --color-text-secondary: var(--color-neutral-60);
+  --color-text-tertiary: var(--color-neutral-50);
+  --color-text-disabled: var(--color-neutral-30);
+  --color-text-inverse: var(--color-neutral-0);
+  --color-text-accent: var(--color-red-50);
+  --color-text-link: var(--color-red-50);
+  --color-text-placeholder: var(--color-neutral-40);
+
+  /* Action */
+  --color-action-primary-bg: var(--color-neutral-100);
+  --color-action-primary-text: var(--color-neutral-0);
+  --color-action-primary-hover: var(--color-neutral-90);
+  --color-action-secondary-bg: var(--color-neutral-0);
+  --color-action-secondary-border: var(--color-neutral-20);
+  --color-action-secondary-text: var(--color-neutral-100);
+  --color-action-secondary-hover: var(--color-neutral-20);
+  --color-action-ghost-text: var(--color-neutral-100);
+  --color-action-ghost-hover: var(--color-neutral-10);
+  --color-action-danger-bg: var(--color-red-60);
+  --color-action-danger-text: var(--color-neutral-0);
+  --color-action-accent-bg: var(--color-red-50);
+  --color-action-accent-text: var(--color-neutral-0);
+
+  /* Status */
+  --color-status-success-bg: var(--color-green-5);
+  --color-status-success-text: var(--color-green-70);
+  --color-status-success-border: var(--color-green-30);
+  --color-status-warning-bg: var(--color-amber-5);
+  --color-status-warning-text: var(--color-amber-70);
+  --color-status-warning-border: var(--color-amber-30);
+  --color-status-danger-bg: var(--color-red-5);
+  --color-status-danger-text: var(--color-red-70);
+  --color-status-danger-border: var(--color-red-30);
+  --color-status-info-bg: var(--color-blue-5);
+  --color-status-info-text: var(--color-blue-70);
+  --color-status-info-border: var(--color-blue-30);
+  --color-status-neutral-bg: var(--color-neutral-5);
+  --color-status-neutral-text: var(--color-neutral-60);
+  --color-status-neutral-border: var(--color-neutral-20);
+}

package/styles/_radius.scss

@@ -0,0 +1,10 @@
+:root {
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-full: 9999px;
+}

package/styles/_reset.scss

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

package/styles/_shadow.scss

@@ -0,0 +1,7 @@
+:root {
+  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-neutral-100) 5%, transparent);
+  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
+  --shadow-md: 0 4px 6px color-mix(in srgb, var(--color-neutral-100) 7%, transparent);
+  --shadow-lg: 0 10px 15px color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
+  --shadow-xl: 0 20px 25px color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
+}

package/styles/_spacing.scss

@@ -0,0 +1,12 @@
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+}

package/styles/_typography.scss

@@ -0,0 +1,312 @@
+/* ═══════════════════════════════════════════════
+   LOADING FONTS
+   DIN Next LT Pro — headings (H1–H6)
+   Inter — body, caption, label, doc
+   JetBrains Mono — code
+   ═══════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
+@font-face {
+  font-family: 'DIN Next LT Pro';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/DINNextLTPro-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'DIN Next LT Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/DINNextLTPro-Bold.woff2') format('woff2');
+}
+
+/* ═══════════════════════════════════════════════
+   PRIMITIVE
+   Raw scale values. Don't use directly in
+   components — reference semantic tokens instead.
+   ═══════════════════════════════════════════════ */
+
+:root {
+  /* Font families */
+  --font-family-din: 'DIN Next LT Pro', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  --font-family-inter: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+  --font-family-jetbrains: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* Font size scale */
+  --font-size-11: 11px;
+  --font-size-12: 12px;
+  --font-size-13: 13px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-24: 24px;
+  --font-size-28: 28px;
+  --font-size-30: 30px;
+  --font-size-32: 32px;
+  --font-size-36: 36px;
+  --font-size-40: 40px;
+
+  /* Line height scale */
+  --line-height-14: 14px;
+  --line-height-16: 16px;
+  --line-height-18: 18px;
+  --line-height-20: 20px;
+  --line-height-24: 24px;
+  --line-height-26: 26px;
+  --line-height-30: 30px;
+  --line-height-32: 32px;
+  --line-height-34: 34px;
+  --line-height-36: 36px;
+  --line-height-40: 40px;
+  --line-height-44: 44px;
+
+  /* Font weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Letter spacings */
+  --letter-spacing-normal: 0px;
+  --letter-spacing-snug: -0.3px;
+  --letter-spacing-tight: -0.7px;
+  --letter-spacing-tighter: -0.8px;
+}
+
+/* ═══════════════════════════════════════════════
+   SEMANTIC
+   Role-based tokens that give meaning to
+   primitives. Use these in components.
+   ═══════════════════════════════════════════════ */
+
+:root {
+  /* Font families */
+  --font-heading: var(--font-family-din);
+  --font-body: var(--font-family-inter);
+  --font-code: var(--font-family-jetbrains);
+
+  /* ── Heading (DIN Next LT Pro) ── */
+  --text-h1-size: var(--font-size-40);
+  --text-h1-height: var(--line-height-44);
+  --text-h1-spacing: var(--letter-spacing-tighter);
+  --text-h1-weight: var(--font-weight-bold);
+
+  --text-h2-size: var(--font-size-36);
+  --text-h2-height: var(--line-height-40);
+  --text-h2-spacing: var(--letter-spacing-tight);
+  --text-h2-weight: var(--font-weight-bold);
+
+  --text-h3-size: var(--font-size-32);
+  --text-h3-height: var(--line-height-36);
+  --text-h3-spacing: var(--letter-spacing-snug);
+  --text-h3-weight: var(--font-weight-medium);
+
+  --text-h4-size: var(--font-size-30);
+  --text-h4-height: var(--line-height-34);
+  --text-h4-spacing: var(--letter-spacing-snug);
+  --text-h4-weight: var(--font-weight-medium);
+
+  --text-h5-size: var(--font-size-24);
+  --text-h5-height: var(--line-height-30);
+  --text-h5-weight: var(--font-weight-medium);
+
+  --text-h6-size: var(--font-size-20);
+  --text-h6-height: var(--line-height-26);
+  --text-h6-weight: var(--font-weight-medium);
+
+  /* ── Body (Inter) ── */
+  --text-body-large-size: var(--font-size-18);
+  --text-body-large-height: var(--line-height-24);
+
+  --text-body-default-size: var(--font-size-16);
+  --text-body-default-height: var(--line-height-20);
+
+  --text-body-small-size: var(--font-size-14);
+  --text-body-small-height: var(--line-height-20);
+
+  /* ── Caption (Inter, 400) ── */
+  --text-caption-large-size: var(--font-size-12);
+  --text-caption-large-height: var(--line-height-16);
+
+  --text-caption-small-size: var(--font-size-11);
+  --text-caption-small-height: var(--line-height-14);
+
+  /* ── Label (Inter, 500) ── */
+  --text-label-large-size: var(--font-size-14);
+  --text-label-large-height: var(--line-height-20);
+
+  --text-label-default-size: var(--font-size-13);
+  --text-label-default-height: var(--line-height-18);
+
+  --text-label-small-size: var(--font-size-12);
+  --text-label-small-height: var(--line-height-16);
+
+  --text-label-xsmall-size: var(--font-size-11);
+  --text-label-xsmall-height: var(--line-height-14);
+
+  --text-label-sm-bold-size: var(--font-size-12);
+  --text-label-sm-bold-height: var(--line-height-16);
+
+  /* ── Doc (Inter) ── */
+  --text-doc-title-size: var(--font-size-28);
+  --text-doc-title-height: var(--line-height-32);
+  --text-doc-title-weight: var(--font-weight-bold);
+
+  --text-doc-section-size: var(--font-size-11);
+  --text-doc-section-height: var(--line-height-14);
+  --text-doc-section-weight: var(--font-weight-semibold);
+
+  /* ── Code (JetBrains Mono, 400) ── */
+  --text-code-size: var(--font-size-13);
+  --text-code-height: var(--line-height-20);
+}
+
+/* ═══════════════════════════════════════════════
+   UTILITIES / DEFAULTS
+   Helper classes and element defaults. Use utilities for one-off exceptions; use semantic tokens for
+   components. Don't use primitives directly in components — reference semantic tokens instead.
+   ═══════════════════════════════════════════════ */
+
+/* Heading */
+.text-h1,
+h1 {
+  font-family: var(--font-heading);
+  font-size: var(--text-h1-size);
+  line-height: var(--text-h1-height);
+  letter-spacing: var(--text-h1-spacing);
+  font-weight: var(--text-h1-weight);
+}
+.text-h2,
+h2 {
+  font-family: var(--font-heading);
+  font-size: var(--text-h2-size);
+  line-height: var(--text-h2-height);
+  letter-spacing: var(--text-h2-spacing);
+  font-weight: var(--text-h2-weight);
+}
+.text-h3,
+h3 {
+  font-family: var(--font-heading);
+  font-size: var(--text-h3-size);
+  line-height: var(--text-h3-height);
+  letter-spacing: var(--text-h3-spacing);
+  font-weight: var(--text-h3-weight);
+}
+.text-h4,
+h4 {
+  font-family: var(--font-heading);
+  font-size: var(--text-h4-size);
+  line-height: var(--text-h4-height);
+  letter-spacing: var(--text-h4-spacing);
+  font-weight: var(--text-h4-weight);
+}
+.text-h5,
+h5 {
+  font-family: var(--font-heading);
+  font-size: var(--text-h5-size);
+  line-height: var(--text-h5-height);
+  font-weight: var(--text-h5-weight);
+}
+.text-h6,
+h6 {
+  font-family: var(--font-heading);
+  font-size: var(--text-h6-size);
+  line-height: var(--text-h6-height);
+  font-weight: var(--text-h6-weight);
+}
+
+/* Body */
+.text-body-large {
+  font-family: var(--font-body);
+  font-size: var(--text-body-large-size);
+  line-height: var(--text-body-large-height);
+  font-weight: var(--font-weight-regular);
+}
+.text-body-default,
+body {
+  font-family: var(--font-body);
+  font-size: var(--text-body-default-size);
+  line-height: var(--text-body-default-height);
+  font-weight: var(--font-weight-regular);
+}
+.text-body-small {
+  font-family: var(--font-body);
+  font-size: var(--text-body-small-size);
+  line-height: var(--text-body-small-height);
+  font-weight: var(--font-weight-regular);
+}
+
+/* Caption */
+.text-caption-large {
+  font-family: var(--font-body);
+  font-size: var(--text-caption-large-size);
+  line-height: var(--text-caption-large-height);
+  font-weight: var(--font-weight-regular);
+}
+.text-caption-small,
+caption {
+  font-family: var(--font-body);
+  font-size: var(--text-caption-small-size);
+  line-height: var(--text-caption-small-height);
+  font-weight: var(--font-weight-regular);
+}
+
+/* Label */
+.text-label-large {
+  font-family: var(--font-body);
+  font-size: var(--text-label-large-size);
+  line-height: var(--text-label-large-height);
+  font-weight: var(--font-weight-medium);
+}
+.text-label-default,
+label {
+  font-family: var(--font-body);
+  font-size: var(--text-label-default-size);
+  line-height: var(--text-label-default-height);
+  font-weight: var(--font-weight-medium);
+}
+.text-label-small {
+  font-family: var(--font-body);
+  font-size: var(--text-label-small-size);
+  line-height: var(--text-label-small-height);
+  font-weight: var(--font-weight-medium);
+}
+.text-label-xsmall {
+  font-family: var(--font-body);
+  font-size: var(--text-label-xsmall-size);
+  line-height: var(--text-label-xsmall-height);
+  font-weight: var(--font-weight-medium);
+}
+.text-label-sm-bold {
+  font-family: var(--font-body);
+  font-size: var(--text-label-sm-bold-size);
+  line-height: var(--text-label-sm-bold-height);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Doc */
+.text-doc-title {
+  font-family: var(--font-body);
+  font-size: var(--text-doc-title-size);
+  line-height: var(--text-doc-title-height);
+  font-weight: var(--text-doc-title-weight);
+}
+.text-doc-section {
+  font-family: var(--font-body);
+  font-size: var(--text-doc-section-size);
+  line-height: var(--text-doc-section-height);
+  font-weight: var(--text-doc-section-weight);
+}
+
+/* Code */
+.text-code,
+code {
+  font-family: var(--font-code);
+  font-size: var(--text-code-size);
+  line-height: var(--text-code-height);
+  font-weight: var(--font-weight-regular);
+}

package/styles/index.scss

@@ -0,0 +1,6 @@
+@forward 'reset';
+@forward 'color';
+@forward 'typography';
+@forward 'spacing';
+@forward 'radius';
+@forward 'shadow';

package/types/doku-com-tala.d.ts

@@ -0,0 +1,49 @@
+import * as _angular_core from '@angular/core';
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline';
+declare class TalaAvatar {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<AvatarSize>;
+    readonly shape: _angular_core.InputSignal<AvatarShape>;
+    readonly status: _angular_core.InputSignal<AvatarStatus>;
+    readonly badgeCount: _angular_core.InputSignal<number>;
+    readonly src: _angular_core.InputSignal<string>;
+    protected readonly initials: _angular_core.Signal<string>;
+    protected readonly bgColor: _angular_core.Signal<string>;
+    protected readonly hasStatus: _angular_core.Signal<boolean>;
+    protected readonly hasBadge: _angular_core.Signal<boolean>;
+    protected readonly displayBadge: _angular_core.Signal<string>;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    private readonly palette;
+    private hashName;
+    private getInitials;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaAvatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaAvatar, "tala-avatar", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "badgeCount": { "alias": "badgeCount"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class TalaAvatarGroup {
+    readonly size: _angular_core.InputSignal<AvatarSize>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaAvatarGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaAvatarGroup, "tala-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+declare class TalaButton {
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly iconOnly: _angular_core.InputSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected _onClick(event: MouseEvent): void;
+    protected _onKeydown(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "tala-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
+}
+
+export { TalaAvatar, TalaAvatarGroup, TalaButton };
+export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonVariant };