@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-alert.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, input, contentChild, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+const FK_ALERT_ICON_START = new InjectionToken('FK_ALERT_ICON_START');
+class FkAlertIconStartDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkAlertIconStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkAlertIconStartDirective, isStandalone: true, selector: "[fkAlertIconStart]", host: { attributes: { "aria-hidden": "true" } }, providers: [
+            { provide: FK_ALERT_ICON_START, useExisting: FkAlertIconStartDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkAlertIconStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkAlertIconStart]',
+                    standalone: true,
+                    providers: [
+                        { provide: FK_ALERT_ICON_START, useExisting: FkAlertIconStartDirective },
+                    ],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class AlertComponent {
+    // ===== INPUTS =====
+    /** Semantic variant that drives the alert color scheme and icon. */
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Override the text color as a CSS value, bypassing the variant token. */
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Override the background color as a CSS value, bypassing the variant token. */
+    backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    /** Override the border color as a CSS value, bypassing the variant token. */
+    borderColor = input(null, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
+    // ===== CONTENT CHILDREN =====
+    iconStartRef = contentChild(FK_ALERT_ICON_START, ...(ngDevMode ? [{ debugName: "iconStartRef" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-alert', `fk-alert--${this.variant()}`, this.className()]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostColor() {
+        return this.color();
+    }
+    get hostBackgroundColor() {
+        return this.backgroundColor();
+    }
+    get hostBorderColor() {
+        return this.borderColor();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "fk-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.color": "this.hostColor", "style.background-color": "this.hostBackgroundColor", "style.border-color": "this.hostBorderColor" } }, queries: [{ propertyName: "iconStartRef", first: true, predicate: FK_ALERT_ICON_START, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[fkAlertIconStart]\" />\n<span class=\"fk-alert__content\">\n  <ng-content />\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--fk-alert-icon-gap, .5rem);padding:var(--fk-alert-padding, var(--fk-rhythm-4, 1rem));border:1px solid transparent;border-radius:var(--fk-alert-border-radius, var(--fk-radius-md, .375rem));font-size:var(--fk-alert-font-size, var(--fk-typography-small-font-size, .8125rem));line-height:1.5}.fk-alert__content{flex:1}:host.fk-alert--info{background-color:var(--fk-alert-info-bg, #e8f4fd);border-color:var(--fk-alert-info-border-color, #b6e0fe);color:var(--fk-alert-info-color, #084298)}:host.fk-alert--success{background-color:var(--fk-alert-success-bg, #e6f4ea);border-color:var(--fk-alert-success-border-color, #a3d9a5);color:var(--fk-alert-success-color, #1e7e34)}:host.fk-alert--warning{background-color:var(--fk-alert-warning-bg, #fff4e5);border-color:var(--fk-alert-warning-border-color, #ffd8a8);color:var(--fk-alert-warning-color, #8a5700)}:host.fk-alert--error{background-color:var(--fk-alert-error-bg, #fdecea);border-color:var(--fk-alert-error-border-color, #f5c2c7);color:var(--fk-alert-error-color, #842029)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-alert', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[fkAlertIconStart]\" />\n<span class=\"fk-alert__content\">\n  <ng-content />\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--fk-alert-icon-gap, .5rem);padding:var(--fk-alert-padding, var(--fk-rhythm-4, 1rem));border:1px solid transparent;border-radius:var(--fk-alert-border-radius, var(--fk-radius-md, .375rem));font-size:var(--fk-alert-font-size, var(--fk-typography-small-font-size, .8125rem));line-height:1.5}.fk-alert__content{flex:1}:host.fk-alert--info{background-color:var(--fk-alert-info-bg, #e8f4fd);border-color:var(--fk-alert-info-border-color, #b6e0fe);color:var(--fk-alert-info-color, #084298)}:host.fk-alert--success{background-color:var(--fk-alert-success-bg, #e6f4ea);border-color:var(--fk-alert-success-border-color, #a3d9a5);color:var(--fk-alert-success-color, #1e7e34)}:host.fk-alert--warning{background-color:var(--fk-alert-warning-bg, #fff4e5);border-color:var(--fk-alert-warning-border-color, #ffd8a8);color:var(--fk-alert-warning-color, #8a5700)}:host.fk-alert--error{background-color:var(--fk-alert-error-bg, #fdecea);border-color:var(--fk-alert-error-border-color, #f5c2c7);color:var(--fk-alert-error-color, #842029)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], iconStartRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_ALERT_ICON_START), { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }], hostBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], hostBorderColor: [{
+                type: HostBinding,
+                args: ['style.border-color']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent, FK_ALERT_ICON_START, FkAlertIconStartDirective };
+//# sourceMappingURL=frame-kit-ui-ng-ui-alert.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-alert.mjs","sources":["../../../../packages/ui-ng/ui/alert/alert-icon.directive.ts","../../../../packages/ui-ng/ui/alert/alert.component.ts","../../../../packages/ui-ng/ui/alert/alert.component.html","../../../../packages/ui-ng/ui/alert/frame-kit-ui-ng-ui-alert.ts"],"sourcesContent":["import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_ALERT_ICON_START =\n  new InjectionToken<FkAlertIconStartDirective>('FK_ALERT_ICON_START');\n\n@Directive({\n  selector: '[fkAlertIconStart]',\n  standalone: true,\n  providers: [\n    { provide: FK_ALERT_ICON_START, useExisting: FkAlertIconStartDirective },\n  ],\n  host: {\n    'aria-hidden': 'true',\n  },\n})\nexport class FkAlertIconStartDirective {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { AlertVariant } from './alert.types';\nimport { FK_ALERT_ICON_START } from './alert-icon.directive';\n\n@Component({\n  selector: 'fk-alert',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './alert.component.html',\n  styleUrl: './alert.component.scss',\n})\nexport class AlertComponent {\n  // ===== INPUTS =====\n  /** Semantic variant that drives the alert color scheme and icon. */\n  readonly variant = input<AlertVariant>('info');\n  /** Override the text color as a CSS value, bypassing the variant token. */\n  readonly color = input<string | null>(null);\n  /** Override the background color as a CSS value, bypassing the variant token. */\n  readonly backgroundColor = input<string | null>(null);\n  /** Override the border color as a CSS value, bypassing the variant token. */\n  readonly borderColor = input<string | null>(null);\n\n  // ===== CONTENT CHILDREN =====\n  readonly iconStartRef = contentChild(FK_ALERT_ICON_START);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-alert', `fk-alert--${this.variant()}`, this.className()]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.color')\n  get hostColor() {\n    return this.color();\n  }\n\n  @HostBinding('style.background-color')\n  get hostBackgroundColor() {\n    return this.backgroundColor();\n  }\n\n  @HostBinding('style.border-color')\n  get hostBorderColor() {\n    return this.borderColor();\n  }\n}\n","<ng-content select=\"[fkAlertIconStart]\" />\n<span class=\"fk-alert__content\">\n  <ng-content />\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-avatar-stack.mjs

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';
+import { AvatarComponent } from '@frame-kit/ui-ng/ui/avatar';
+
+class AvatarStackComponent {
+    // ===== INPUTS =====
+    /** Array of user objects to render as overlapping avatars. */
+    users = input([], ...(ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []));
+    /** Maximum number of avatars displayed before an overflow counter appears. */
+    maxVisible = input(5, ...(ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []));
+    /** Size applied to every avatar in the stack. */
+    size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the user clicks an individual avatar, emitting that user's data. */
+    avatarClick = output();
+    /** Fires when the user clicks the overflow counter showing hidden avatars. */
+    overflowClick = output();
+    // ===== COMPUTED =====
+    visibleUsers = computed(() => {
+        return this.users().slice(0, this.maxVisible());
+    }, ...(ngDevMode ? [{ debugName: "visibleUsers" }] : /* istanbul ignore next */ []));
+    overflowCount = computed(() => {
+        const total = this.users().length;
+        const max = this.maxVisible();
+        return total > max ? total - max : 0;
+    }, ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
+    overflowTooltip = computed(() => {
+        const hidden = this.users().slice(this.maxVisible());
+        return hidden.map((u) => u.name).join(', ');
+    }, ...(ngDevMode ? [{ debugName: "overflowTooltip" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-avatar-stack',
+            `fk-avatar-stack--${this.size()}`,
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AvatarStackComponent, isStandalone: true, selector: "fk-avatar-stack", inputs: { users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick", overflowClick: "overflowClick" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "@for (user of visibleUsers(); track user.id) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"fk-avatar-stack__item\"\n    [fkTooltip]=\"user.name\"\n    (click)=\"avatarClick.emit(user)\"\n  >\n    <fk-avatar\n      [name]=\"user.name\"\n      [avatarUrl]=\"user.avatarUrl ?? null\"\n      [size]=\"size()\"\n    />\n  </div>\n}\n\n@if (overflowCount() > 0) {\n  <button\n    class=\"fk-avatar-stack__overflow\"\n    type=\"button\"\n    [fkTooltip]=\"overflowTooltip()\"\n    aria-label=\"Show all users\"\n    (click)=\"overflowClick.emit()\"\n  >\n    +{{ overflowCount() }}\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center}.fk-avatar-stack__item{position:relative;display:inline-flex;cursor:pointer}.fk-avatar-stack__item:not(:first-child){margin-left:calc(-1 * var(--fk-avatar-stack-overlap, .5rem))}.fk-avatar-stack__item:hover{z-index:10}.fk-avatar-stack__item fk-avatar{box-shadow:var(--fk-avatar-stack-ring, 0 0 0 2px var(--fk-color-surface, #ffffff));border-radius:50%}.fk-avatar-stack__overflow{display:inline-flex;align-items:center;justify-content:center;margin-left:calc(-1 * var(--fk-avatar-stack-overlap, .5rem));border-radius:50%;border:none;cursor:pointer;font-weight:var(--fk-font-weight-semibold, 600);color:var(--fk-avatar-stack-overflow-color, var(--fk-color-text, #1f2d3d));background:var(--fk-avatar-stack-overflow-bg, var(--fk-color-surface-muted, #f1f5f9));box-shadow:var(--fk-avatar-stack-ring, 0 0 0 2px var(--fk-color-surface, #ffffff))}.fk-avatar-stack__overflow:hover{z-index:10;background:var(--fk-avatar-stack-overflow-bg-hover, var(--fk-color-surface-hover, #e2e8f0))}.fk-avatar-stack__overflow:focus-visible{outline:none;box-shadow:var(--fk-avatar-stack-overflow-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host.fk-avatar-stack--sm .fk-avatar-stack__overflow{width:var(--fk-avatar-size-sm, 1.75rem);height:var(--fk-avatar-size-sm, 1.75rem);font-size:var(--fk-avatar-stack-overflow-font-size-sm, .625rem)}:host.fk-avatar-stack--md .fk-avatar-stack__overflow{width:var(--fk-avatar-size-md, 2.25rem);height:var(--fk-avatar-size-md, 2.25rem);font-size:var(--fk-avatar-stack-overflow-font-size-md, .75rem)}:host.fk-avatar-stack--lg .fk-avatar-stack__overflow{width:var(--fk-avatar-size-lg, 3rem);height:var(--fk-avatar-size-lg, 3rem);font-size:var(--fk-avatar-stack-overflow-font-size-lg, .875rem)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "fk-avatar", inputs: ["name", "avatarUrl", "initials", "status", "showStatus", "size", "className", "id", "ariaLabel"] }, { kind: "directive", type: TooltipDirective, selector: "[fkTooltip]", inputs: ["fkTooltip", "fkTooltipPosition", "fkTooltipOffset", "fkTooltipShowDelay", "fkTooltipHideDelay", "fkTooltipDisabled", "fkTooltipClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-avatar-stack', standalone: true, imports: [AvatarComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (user of visibleUsers(); track user.id) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"fk-avatar-stack__item\"\n    [fkTooltip]=\"user.name\"\n    (click)=\"avatarClick.emit(user)\"\n  >\n    <fk-avatar\n      [name]=\"user.name\"\n      [avatarUrl]=\"user.avatarUrl ?? null\"\n      [size]=\"size()\"\n    />\n  </div>\n}\n\n@if (overflowCount() > 0) {\n  <button\n    class=\"fk-avatar-stack__overflow\"\n    type=\"button\"\n    [fkTooltip]=\"overflowTooltip()\"\n    aria-label=\"Show all users\"\n    (click)=\"overflowClick.emit()\"\n  >\n    +{{ overflowCount() }}\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center}.fk-avatar-stack__item{position:relative;display:inline-flex;cursor:pointer}.fk-avatar-stack__item:not(:first-child){margin-left:calc(-1 * var(--fk-avatar-stack-overlap, .5rem))}.fk-avatar-stack__item:hover{z-index:10}.fk-avatar-stack__item fk-avatar{box-shadow:var(--fk-avatar-stack-ring, 0 0 0 2px var(--fk-color-surface, #ffffff));border-radius:50%}.fk-avatar-stack__overflow{display:inline-flex;align-items:center;justify-content:center;margin-left:calc(-1 * var(--fk-avatar-stack-overlap, .5rem));border-radius:50%;border:none;cursor:pointer;font-weight:var(--fk-font-weight-semibold, 600);color:var(--fk-avatar-stack-overflow-color, var(--fk-color-text, #1f2d3d));background:var(--fk-avatar-stack-overflow-bg, var(--fk-color-surface-muted, #f1f5f9));box-shadow:var(--fk-avatar-stack-ring, 0 0 0 2px var(--fk-color-surface, #ffffff))}.fk-avatar-stack__overflow:hover{z-index:10;background:var(--fk-avatar-stack-overflow-bg-hover, var(--fk-color-surface-hover, #e2e8f0))}.fk-avatar-stack__overflow:focus-visible{outline:none;box-shadow:var(--fk-avatar-stack-overflow-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host.fk-avatar-stack--sm .fk-avatar-stack__overflow{width:var(--fk-avatar-size-sm, 1.75rem);height:var(--fk-avatar-size-sm, 1.75rem);font-size:var(--fk-avatar-stack-overflow-font-size-sm, .625rem)}:host.fk-avatar-stack--md .fk-avatar-stack__overflow{width:var(--fk-avatar-size-md, 2.25rem);height:var(--fk-avatar-size-md, 2.25rem);font-size:var(--fk-avatar-stack-overflow-font-size-md, .75rem)}:host.fk-avatar-stack--lg .fk-avatar-stack__overflow{width:var(--fk-avatar-size-lg, 3rem);height:var(--fk-avatar-size-lg, 3rem);font-size:var(--fk-avatar-stack-overflow-font-size-lg, .875rem)}\n"] }]
+        }], propDecorators: { users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }], overflowClick: [{ type: i0.Output, args: ["overflowClick"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarStackComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-avatar-stack.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-avatar-stack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-avatar-stack.mjs","sources":["../../../../packages/ui-ng/ui/avatar-stack/avatar-stack.component.ts","../../../../packages/ui-ng/ui/avatar-stack/avatar-stack.component.html","../../../../packages/ui-ng/ui/avatar-stack/frame-kit-ui-ng-ui-avatar-stack.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\n\nimport { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';\nimport { AvatarComponent } from '@frame-kit/ui-ng/ui/avatar';\nimport type { AvatarStackSize, AvatarStackUser } from './avatar-stack.types';\n\n@Component({\n  selector: 'fk-avatar-stack',\n  standalone: true,\n  imports: [AvatarComponent, TooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './avatar-stack.component.html',\n  styleUrl: './avatar-stack.component.scss',\n})\nexport class AvatarStackComponent {\n  // ===== INPUTS =====\n  /** Array of user objects to render as overlapping avatars. */\n  readonly users = input<AvatarStackUser[]>([]);\n  /** Maximum number of avatars displayed before an overflow counter appears. */\n  readonly maxVisible = input<number>(5);\n  /** Size applied to every avatar in the stack. */\n  readonly size = input<AvatarStackSize>('sm');\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user clicks an individual avatar, emitting that user's data. */\n  readonly avatarClick = output<AvatarStackUser>();\n  /** Fires when the user clicks the overflow counter showing hidden avatars. */\n  readonly overflowClick = output<void>();\n\n  // ===== COMPUTED =====\n  readonly visibleUsers = computed(() => {\n    return this.users().slice(0, this.maxVisible());\n  });\n\n  readonly overflowCount = computed(() => {\n    const total = this.users().length;\n    const max = this.maxVisible();\n\n    return total > max ? total - max : 0;\n  });\n\n  readonly overflowTooltip = computed(() => {\n    const hidden = this.users().slice(this.maxVisible());\n\n    return hidden.map((u) => u.name).join(', ');\n  });\n\n  readonly classes = computed(() => {\n    return [\n      'fk-avatar-stack',\n      `fk-avatar-stack--${this.size()}`,\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n}\n","@for (user of visibleUsers(); track user.id) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"fk-avatar-stack__item\"\n    [fkTooltip]=\"user.name\"\n    (click)=\"avatarClick.emit(user)\"\n  >\n    <fk-avatar\n      [name]=\"user.name\"\n      [avatarUrl]=\"user.avatarUrl ?? null\"\n      [size]=\"size()\"\n    />\n  </div>\n}\n\n@if (overflowCount() > 0) {\n  <button\n    class=\"fk-avatar-stack__overflow\"\n    type=\"button\"\n    [fkTooltip]=\"overflowTooltip()\"\n    aria-label=\"Show all users\"\n    (click)=\"overflowClick.emit()\"\n  >\n    +{{ overflowCount() }}\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-avatar.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class AvatarComponent {
+    // ===== IDENTITY =====
+    /** Full display name used to derive initials when no explicit initials or image are provided. */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** URL of the avatar image; falls back to initials when the image fails to load. */
+    avatarUrl = input(null, ...(ngDevMode ? [{ debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
+    /** Explicit two-character initials that override the name-derived fallback. */
+    initials = input(null, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    // ===== STATUS =====
+    /** Online/offline/away status to reflect on the indicator dot. */
+    status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** When true, renders the status indicator dot over the avatar. */
+    showStatus = input(false, ...(ngDevMode ? [{ debugName: "showStatus" }] : /* istanbul ignore next */ []));
+    // ===== DISPLAY =====
+    /** Controls the avatar size. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    derivedInitials = computed(() => {
+        const explicit = this.initials();
+        if (explicit) {
+            return explicit;
+        }
+        const name = this.name();
+        if (!name) {
+            return '?';
+        }
+        const parts = name.trim().split(/\s+/);
+        if (parts.length >= 2) {
+            return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+        }
+        return parts[0].substring(0, 2).toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "derivedInitials" }] : /* istanbul ignore next */ []));
+    showIndicator = computed(() => this.showStatus() && this.status() !== null, ...(ngDevMode ? [{ debugName: "showIndicator" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-avatar',
+            `fk-avatar--${this.size()}`,
+            this.showIndicator() ? `fk-avatar--status-${this.status()}` : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    // Tracks whether the image failed to load
+    imgError = { value: false };
+    onImgError() {
+        this.imgError.value = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AvatarComponent, isStandalone: true, selector: "fk-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<!-- Avatar circle -->\n<span\n  class=\"fk-avatar__circle\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Avatar for ' + name()\"\n  role=\"img\"\n>\n  @if (avatarUrl() && !imgError.value) {\n    <img\n      class=\"fk-avatar__image\"\n      [src]=\"avatarUrl()\"\n      [alt]=\"name()\"\n      (error)=\"onImgError()\"\n    />\n  } @else {\n    <span class=\"fk-avatar__initials\" aria-hidden=\"true\">\n      {{ derivedInitials() }}\n    </span>\n  }\n</span>\n\n<!-- Status indicator -->\n@if (showIndicator()) {\n  <span\n    class=\"fk-avatar__status\"\n    [attr.aria-label]=\"status() + ' status'\"\n    role=\"status\"\n  ></span>\n}\n", styles: [":host{display:inline-flex;position:relative;flex-shrink:0}.fk-avatar__circle{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--fk-avatar-radius, var(--fk-radius-full, 9999px));background-color:var(--fk-avatar-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-avatar-color, var(--fk-color-muted, #8a98a8));font-family:var(--fk-avatar-font-family, var(--fk-font-family-base));font-weight:var(--fk-avatar-font-weight, var(--fk-font-weight-semibold, 600));line-height:1;-webkit-user-select:none;user-select:none}.fk-avatar__image{width:100%;height:100%;object-fit:cover;display:block}.fk-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}.fk-avatar__status{position:absolute;border-radius:var(--fk-radius-full, 9999px);border:2px solid var(--fk-avatar-status-border, var(--fk-color-surface, #ffffff))}:host.fk-avatar--sm .fk-avatar__circle{width:var(--fk-avatar-size-sm, 1.75rem);height:var(--fk-avatar-size-sm, 1.75rem);font-size:var(--fk-avatar-font-size-sm, .6875rem)}:host.fk-avatar--sm .fk-avatar__status{width:.5rem;height:.5rem;bottom:-1px;right:-1px}:host.fk-avatar--md .fk-avatar__circle{width:var(--fk-avatar-size-md, 2.25rem);height:var(--fk-avatar-size-md, 2.25rem);font-size:var(--fk-avatar-font-size-md, .8125rem)}:host.fk-avatar--md .fk-avatar__status{width:.625rem;height:.625rem;bottom:0;right:0}:host.fk-avatar--lg .fk-avatar__circle{width:var(--fk-avatar-size-lg, 3rem);height:var(--fk-avatar-size-lg, 3rem);font-size:var(--fk-avatar-font-size-lg, 1rem)}:host.fk-avatar--lg .fk-avatar__status{width:.75rem;height:.75rem;bottom:0;right:0}:host.fk-avatar--status-online .fk-avatar__status{background-color:var(--fk-avatar-status-online, var(--fk-color-success, #10b981))}:host.fk-avatar--status-offline .fk-avatar__status{background-color:var(--fk-avatar-status-offline, var(--fk-color-muted, #8a98a8))}:host.fk-avatar--status-away .fk-avatar__status{background-color:var(--fk-avatar-status-away, var(--fk-color-warning, #f59e0b))}:host.fk-avatar--status-busy .fk-avatar__status{background-color:var(--fk-avatar-status-busy, var(--fk-color-danger, #e02424))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-avatar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Avatar circle -->\n<span\n  class=\"fk-avatar__circle\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Avatar for ' + name()\"\n  role=\"img\"\n>\n  @if (avatarUrl() && !imgError.value) {\n    <img\n      class=\"fk-avatar__image\"\n      [src]=\"avatarUrl()\"\n      [alt]=\"name()\"\n      (error)=\"onImgError()\"\n    />\n  } @else {\n    <span class=\"fk-avatar__initials\" aria-hidden=\"true\">\n      {{ derivedInitials() }}\n    </span>\n  }\n</span>\n\n<!-- Status indicator -->\n@if (showIndicator()) {\n  <span\n    class=\"fk-avatar__status\"\n    [attr.aria-label]=\"status() + ' status'\"\n    role=\"status\"\n  ></span>\n}\n", styles: [":host{display:inline-flex;position:relative;flex-shrink:0}.fk-avatar__circle{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--fk-avatar-radius, var(--fk-radius-full, 9999px));background-color:var(--fk-avatar-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-avatar-color, var(--fk-color-muted, #8a98a8));font-family:var(--fk-avatar-font-family, var(--fk-font-family-base));font-weight:var(--fk-avatar-font-weight, var(--fk-font-weight-semibold, 600));line-height:1;-webkit-user-select:none;user-select:none}.fk-avatar__image{width:100%;height:100%;object-fit:cover;display:block}.fk-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}.fk-avatar__status{position:absolute;border-radius:var(--fk-radius-full, 9999px);border:2px solid var(--fk-avatar-status-border, var(--fk-color-surface, #ffffff))}:host.fk-avatar--sm .fk-avatar__circle{width:var(--fk-avatar-size-sm, 1.75rem);height:var(--fk-avatar-size-sm, 1.75rem);font-size:var(--fk-avatar-font-size-sm, .6875rem)}:host.fk-avatar--sm .fk-avatar__status{width:.5rem;height:.5rem;bottom:-1px;right:-1px}:host.fk-avatar--md .fk-avatar__circle{width:var(--fk-avatar-size-md, 2.25rem);height:var(--fk-avatar-size-md, 2.25rem);font-size:var(--fk-avatar-font-size-md, .8125rem)}:host.fk-avatar--md .fk-avatar__status{width:.625rem;height:.625rem;bottom:0;right:0}:host.fk-avatar--lg .fk-avatar__circle{width:var(--fk-avatar-size-lg, 3rem);height:var(--fk-avatar-size-lg, 3rem);font-size:var(--fk-avatar-font-size-lg, 1rem)}:host.fk-avatar--lg .fk-avatar__status{width:.75rem;height:.75rem;bottom:0;right:0}:host.fk-avatar--status-online .fk-avatar__status{background-color:var(--fk-avatar-status-online, var(--fk-color-success, #10b981))}:host.fk-avatar--status-offline .fk-avatar__status{background-color:var(--fk-avatar-status-offline, var(--fk-color-muted, #8a98a8))}:host.fk-avatar--status-away .fk-avatar__status{background-color:var(--fk-avatar-status-away, var(--fk-color-warning, #f59e0b))}:host.fk-avatar--status-busy .fk-avatar__status{background-color:var(--fk-avatar-status-busy, var(--fk-color-danger, #e02424))}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-avatar.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-avatar.mjs","sources":["../../../../packages/ui-ng/ui/avatar/avatar.component.ts","../../../../packages/ui-ng/ui/avatar/avatar.component.html","../../../../packages/ui-ng/ui/avatar/frame-kit-ui-ng-ui-avatar.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { AvatarSize, AvatarStatus } from './avatar.types';\n\n@Component({\n  selector: 'fk-avatar',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './avatar.component.html',\n  styleUrl: './avatar.component.scss',\n})\nexport class AvatarComponent {\n  // ===== IDENTITY =====\n  /** Full display name used to derive initials when no explicit initials or image are provided. */\n  readonly name = input.required<string>();\n  /** URL of the avatar image; falls back to initials when the image fails to load. */\n  readonly avatarUrl = input<string | null>(null);\n  /** Explicit two-character initials that override the name-derived fallback. */\n  readonly initials = input<string | null>(null);\n\n  // ===== STATUS =====\n  /** Online/offline/away status to reflect on the indicator dot. */\n  readonly status = input<AvatarStatus | null>(null);\n  /** When true, renders the status indicator dot over the avatar. */\n  readonly showStatus = input<boolean>(false);\n\n  // ===== DISPLAY =====\n  /** Controls the avatar size. */\n  readonly size = input<AvatarSize>('md');\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n\n  readonly derivedInitials = computed(() => {\n    const explicit = this.initials();\n\n    if (explicit) {\n      return explicit;\n    }\n\n    const name = this.name();\n\n    if (!name) {\n      return '?';\n    }\n\n    const parts = name.trim().split(/\\s+/);\n\n    if (parts.length >= 2) {\n      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n    }\n\n    return parts[0].substring(0, 2).toUpperCase();\n  });\n\n  readonly showIndicator = computed(\n    () => this.showStatus() && this.status() !== null,\n  );\n\n  readonly classes = computed(() => {\n    return [\n      'fk-avatar',\n      `fk-avatar--${this.size()}`,\n      this.showIndicator() ? `fk-avatar--status-${this.status()}` : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  // Tracks whether the image failed to load\n  readonly imgError = { value: false };\n\n  onImgError(): void {\n    this.imgError.value = true;\n  }\n}\n","<!-- Avatar circle -->\n<span\n  class=\"fk-avatar__circle\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Avatar for ' + name()\"\n  role=\"img\"\n>\n  @if (avatarUrl() && !imgError.value) {\n    <img\n      class=\"fk-avatar__image\"\n      [src]=\"avatarUrl()\"\n      [alt]=\"name()\"\n      (error)=\"onImgError()\"\n    />\n  } @else {\n    <span class=\"fk-avatar__initials\" aria-hidden=\"true\">\n      {{ derivedInitials() }}\n    </span>\n  }\n</span>\n\n<!-- Status indicator -->\n@if (showIndicator()) {\n  <span\n    class=\"fk-avatar__status\"\n    [attr.aria-label]=\"status() + ' status'\"\n    role=\"status\"\n  ></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-badge.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class BadgeComponent {
+    // ===== INPUTS =====
+    /** Visual style variant that drives the badge color scheme. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Override the text color as a CSS value. */
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Override the background color as a CSS value. */
+    backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    /** Override the border color as a CSS value; renders as a 1px solid border. */
+    borderColor = input(null, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
+    /** Custom padding shorthand applied to all sides. */
+    padding = input(null, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Custom inline (left/right) padding applied independently. */
+    paddingInline = input(null, ...(ngDevMode ? [{ debugName: "paddingInline" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-badge', `fk-badge--${this.variant()}`, this.className()]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostColor() {
+        return this.color();
+    }
+    get hostBackgroundColor() {
+        return this.backgroundColor();
+    }
+    get hostBorder() {
+        const bc = this.borderColor();
+        if (!bc) {
+            return null;
+        }
+        return `1px solid ${bc}`;
+    }
+    get hostPadding() {
+        return this.padding();
+    }
+    get hostPaddingInline() {
+        return this.paddingInline();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: BadgeComponent, isStandalone: true, selector: "fk-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingInline: { classPropertyName: "paddingInline", publicName: "paddingInline", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.color": "this.hostColor", "style.background-color": "this.hostBackgroundColor", "style.border": "this.hostBorder", "style.padding": "this.hostPadding", "style.padding-inline": "this.hostPaddingInline" } }, ngImport: i0, template: "<span [id]=\"id() ?? undefined\" [attr.aria-label]=\"ariaLabel()\"\n  ><ng-content\n/></span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;height:var(--fk-badge-height, 1.5rem);border-radius:var(--fk-badge-border-radius, 999px);padding-inline:var(--fk-badge-padding-inline, .5rem);font-size:var(--fk-badge-font-size, .75rem);font-weight:var(--fk-badge-font-weight, var(--fk-font-weight-medium, 500));line-height:1;white-space:nowrap;vertical-align:middle}:host.fk-badge--default{background-color:var(--fk-badge-default-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-badge-default-color, var(--fk-color-text, #1f2d3d))}:host.fk-badge--primary{background-color:var(--fk-badge-primary-bg, var(--fk-color-primary-subtle, #e8f4ff));color:var(--fk-badge-primary-color, var(--fk-color-primary, #0a84ff))}:host.fk-badge--success{background-color:var(--fk-badge-success-bg, var(--fk-color-success-subtle, #e6f9ed));color:var(--fk-badge-success-color, var(--fk-color-success, #16a34a))}:host.fk-badge--warning{background-color:var(--fk-badge-warning-bg, var(--fk-color-warning-subtle, #fff8e6));color:var(--fk-badge-warning-color, var(--fk-color-warning, #d97706))}:host.fk-badge--danger{background-color:var(--fk-badge-danger-bg, var(--fk-color-danger-subtle, #fde8e8));color:var(--fk-badge-danger-color, var(--fk-color-danger, #e02424))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [id]=\"id() ?? undefined\" [attr.aria-label]=\"ariaLabel()\"\n  ><ng-content\n/></span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;height:var(--fk-badge-height, 1.5rem);border-radius:var(--fk-badge-border-radius, 999px);padding-inline:var(--fk-badge-padding-inline, .5rem);font-size:var(--fk-badge-font-size, .75rem);font-weight:var(--fk-badge-font-weight, var(--fk-font-weight-medium, 500));line-height:1;white-space:nowrap;vertical-align:middle}:host.fk-badge--default{background-color:var(--fk-badge-default-bg, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-badge-default-color, var(--fk-color-text, #1f2d3d))}:host.fk-badge--primary{background-color:var(--fk-badge-primary-bg, var(--fk-color-primary-subtle, #e8f4ff));color:var(--fk-badge-primary-color, var(--fk-color-primary, #0a84ff))}:host.fk-badge--success{background-color:var(--fk-badge-success-bg, var(--fk-color-success-subtle, #e6f9ed));color:var(--fk-badge-success-color, var(--fk-color-success, #16a34a))}:host.fk-badge--warning{background-color:var(--fk-badge-warning-bg, var(--fk-color-warning-subtle, #fff8e6));color:var(--fk-badge-warning-color, var(--fk-color-warning, #d97706))}:host.fk-badge--danger{background-color:var(--fk-badge-danger-bg, var(--fk-color-danger-subtle, #fde8e8));color:var(--fk-badge-danger-color, var(--fk-color-danger, #e02424))}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingInline", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }], hostBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], hostBorder: [{
+                type: HostBinding,
+                args: ['style.border']
+            }], hostPadding: [{
+                type: HostBinding,
+                args: ['style.padding']
+            }], hostPaddingInline: [{
+                type: HostBinding,
+                args: ['style.padding-inline']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BadgeComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-badge.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-badge.mjs","sources":["../../../../packages/ui-ng/ui/badge/badge.component.ts","../../../../packages/ui-ng/ui/badge/badge.component.html","../../../../packages/ui-ng/ui/badge/frame-kit-ui-ng-ui-badge.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { BadgeVariant } from './badge.types';\n\n@Component({\n  selector: 'fk-badge',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './badge.component.scss',\n  templateUrl: './badge.component.html',\n})\nexport class BadgeComponent {\n  // ===== INPUTS =====\n  /** Visual style variant that drives the badge color scheme. */\n  readonly variant = input<BadgeVariant>('default');\n  /** Override the text color as a CSS value. */\n  readonly color = input<string | null>(null);\n  /** Override the background color as a CSS value. */\n  readonly backgroundColor = input<string | null>(null);\n  /** Override the border color as a CSS value; renders as a 1px solid border. */\n  readonly borderColor = input<string | null>(null);\n  /** Custom padding shorthand applied to all sides. */\n  readonly padding = input<string | null>(null);\n  /** Custom inline (left/right) padding applied independently. */\n  readonly paddingInline = input<string | null>(null);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-badge', `fk-badge--${this.variant()}`, this.className()]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.color')\n  get hostColor() {\n    return this.color();\n  }\n\n  @HostBinding('style.background-color')\n  get hostBackgroundColor() {\n    return this.backgroundColor();\n  }\n\n  @HostBinding('style.border')\n  get hostBorder() {\n    const bc = this.borderColor();\n\n    if (!bc) {\n      return null;\n    }\n\n    return `1px solid ${bc}`;\n  }\n\n  @HostBinding('style.padding')\n  get hostPadding() {\n    return this.padding();\n  }\n\n  @HostBinding('style.padding-inline')\n  get hostPaddingInline() {\n    return this.paddingInline();\n  }\n}\n","<span [id]=\"id() ?? undefined\" [attr.aria-label]=\"ariaLabel()\"\n  ><ng-content\n/></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAkBa,cAAc,CAAA;;;AAGhB,IAAA,OAAO,GAAG,KAAK,CAAe,SAAS,8EAAC;;AAExC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;;AAElC,IAAA,eAAe,GAAG,KAAK,CAAgB,IAAI,sFAAC;;AAE5C,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;;AAExC,IAAA,OAAO,GAAG,KAAK,CAAgB,IAAI,8EAAC;;AAEpC,IAAA,aAAa,GAAG,KAAK,CAAgB,IAAI,oFAAC;;AAG1C,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;AAGtC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,OAAO,CAAC,UAAU,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,EAAE,IAAI,CAAC,SAAS,EAAE;aAChE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;IACrB;AAEA,IAAA,IACI,mBAAmB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,eAAe,EAAE;IAC/B;AAEA,IAAA,IACI,UAAU,GAAA;AACZ,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE;QAE7B,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,OAAO,IAAI;QACb;QAEA,OAAO,CAAA,UAAA,EAAa,EAAE,CAAA,CAAE;IAC1B;AAEA,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,iBAAiB,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;IAC7B;uGA7DW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,i/CClB3B,iGAGA,EAAA,MAAA,EAAA,CAAA,0vCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDea,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iGAAA,EAAA,MAAA,EAAA,CAAA,0vCAAA,CAAA,EAAA;;sBA+B9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,aAAa;;sBAKzB,WAAW;uBAAC,wBAAwB;;sBAKpC,WAAW;uBAAC,cAAc;;sBAW1B,WAAW;uBAAC,eAAe;;sBAK3B,WAAW;uBAAC,sBAAsB;;;AE5ErC;;AAEG;;;;"}

package/fesm2022/frame-kit-ui-ng-ui-breadcrumb.mjs

@@ -0,0 +1,68 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, contentChild, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+/**
+ * Generic route-driven breadcrumb.
+ *
+ * Consumers pass an ordered list of crumbs — the final crumb is always the
+ * "current location" (rendered as plain text with `aria-current="page"`),
+ * every earlier crumb with a `routerLink` renders as an `<a [routerLink]>`
+ * and navigates via the Angular router. Earlier crumbs without a
+ * `routerLink` render as plain text so consumers can include
+ * non-navigable ancestors (e.g. a section header) when needed.
+ *
+ * The chevron separator between crumbs ships as an inline SVG so the
+ * component renders correctly with no consumer setup. Consumers can
+ * replace the separator by projecting an `<ng-template #fkBreadcrumbSeparator>`
+ * with any content — the template is instantiated once per gap between
+ * crumbs.
+ *
+ * For breadcrumbs that reflect a tree/hierarchy selection (e.g. org nodes),
+ * use `fk-node-tree-breadcrumb` instead — that component walks a `TreeNode`
+ * array by `parentId` and emits node-select events rather than navigating.
+ */
+class BreadcrumbComponent {
+    // ===== INPUTS =====
+    /** Ordered list of crumb items; the last item is always treated as the current page. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== CONTENT CHILDREN =====
+    separatorRef = contentChild('fkBreadcrumbSeparator', ...(ngDevMode ? [{ debugName: "separatorRef" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-breadcrumb', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    role = 'navigation';
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BreadcrumbComponent, isStandalone: true, selector: "fk-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.aria-label": "this.hostAriaLabel" } }, queries: [{ propertyName: "separatorRef", first: true, predicate: ["fkBreadcrumbSeparator"], descendants: true, isSignal: true }], ngImport: i0, template: "<ol class=\"fk-breadcrumb__list\">\n  @for (crumb of items(); track $index; let last = $last) {\n    <li class=\"fk-breadcrumb__item\">\n      @if (last) {\n        <span class=\"fk-breadcrumb__current\" aria-current=\"page\">\n          {{ crumb.label }}\n        </span>\n      } @else {\n        @if (crumb.routerLink) {\n          <a class=\"fk-breadcrumb__link\" [routerLink]=\"crumb.routerLink\">\n            {{ crumb.label }}\n          </a>\n        } @else {\n          <span class=\"fk-breadcrumb__text\">{{ crumb.label }}</span>\n        }\n\n        <span class=\"fk-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separatorRef(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M6 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          }\n        </span>\n      }\n    </li>\n  }\n</ol>\n", styles: [".fk-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fk-breadcrumb-gap, var(--fk-rhythm-1, .25rem));margin:0;padding:0;list-style:none;font-size:var(--fk-breadcrumb-font-size, var(--fk-typography-caption-font-size, .75rem));line-height:1.5}.fk-breadcrumb__item{display:flex;align-items:center;gap:var(--fk-breadcrumb-gap, var(--fk-rhythm-1, .25rem))}.fk-breadcrumb__link{display:inline-flex;align-items:center;color:var(--fk-breadcrumb-link-color, var(--fk-color-muted, #64748b));text-decoration:none;cursor:pointer}.fk-breadcrumb__link:hover{color:var(--fk-breadcrumb-link-color-hover, var(--fk-color-text, #1f2d3d));text-decoration:underline}.fk-breadcrumb__link:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-radius-sm, .25rem)}.fk-breadcrumb__text{display:inline-flex;align-items:center;color:var(--fk-breadcrumb-link-color, var(--fk-color-muted, #64748b))}.fk-breadcrumb__current{display:inline-flex;align-items:center;color:var(--fk-breadcrumb-current-color, var(--fk-color-text, #1f2d3d));font-weight:var(--fk-breadcrumb-current-font-weight, var(--fk-font-weight-medium, 500))}.fk-breadcrumb__separator{display:flex;align-items:center;color:var(--fk-breadcrumb-separator-color, var(--fk-color-muted, #64748b));-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-breadcrumb', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"fk-breadcrumb__list\">\n  @for (crumb of items(); track $index; let last = $last) {\n    <li class=\"fk-breadcrumb__item\">\n      @if (last) {\n        <span class=\"fk-breadcrumb__current\" aria-current=\"page\">\n          {{ crumb.label }}\n        </span>\n      } @else {\n        @if (crumb.routerLink) {\n          <a class=\"fk-breadcrumb__link\" [routerLink]=\"crumb.routerLink\">\n            {{ crumb.label }}\n          </a>\n        } @else {\n          <span class=\"fk-breadcrumb__text\">{{ crumb.label }}</span>\n        }\n\n        <span class=\"fk-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separatorRef(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M6 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          }\n        </span>\n      }\n    </li>\n  }\n</ol>\n", styles: [".fk-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fk-breadcrumb-gap, var(--fk-rhythm-1, .25rem));margin:0;padding:0;list-style:none;font-size:var(--fk-breadcrumb-font-size, var(--fk-typography-caption-font-size, .75rem));line-height:1.5}.fk-breadcrumb__item{display:flex;align-items:center;gap:var(--fk-breadcrumb-gap, var(--fk-rhythm-1, .25rem))}.fk-breadcrumb__link{display:inline-flex;align-items:center;color:var(--fk-breadcrumb-link-color, var(--fk-color-muted, #64748b));text-decoration:none;cursor:pointer}.fk-breadcrumb__link:hover{color:var(--fk-breadcrumb-link-color-hover, var(--fk-color-text, #1f2d3d));text-decoration:underline}.fk-breadcrumb__link:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-radius-sm, .25rem)}.fk-breadcrumb__text{display:inline-flex;align-items:center;color:var(--fk-breadcrumb-link-color, var(--fk-color-muted, #64748b))}.fk-breadcrumb__current{display:inline-flex;align-items:center;color:var(--fk-breadcrumb-current-color, var(--fk-color-text, #1f2d3d));font-weight:var(--fk-breadcrumb-current-font-weight, var(--fk-font-weight-medium, 500))}.fk-breadcrumb__separator{display:flex;align-items:center;color:var(--fk-breadcrumb-separator-color, var(--fk-color-muted, #64748b));-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separatorRef: [{ type: i0.ContentChild, args: ['fkBreadcrumbSeparator', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-breadcrumb.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-breadcrumb.mjs","sources":["../../../../packages/ui-ng/ui/breadcrumb/breadcrumb.component.ts","../../../../packages/ui-ng/ui/breadcrumb/breadcrumb.component.html","../../../../packages/ui-ng/ui/breadcrumb/frame-kit-ui-ng-ui-breadcrumb.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  HostBinding,\n  input,\n  TemplateRef,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport type { BreadcrumbItem } from './breadcrumb.types';\n\n/**\n * Generic route-driven breadcrumb.\n *\n * Consumers pass an ordered list of crumbs — the final crumb is always the\n * \"current location\" (rendered as plain text with `aria-current=\"page\"`),\n * every earlier crumb with a `routerLink` renders as an `<a [routerLink]>`\n * and navigates via the Angular router. Earlier crumbs without a\n * `routerLink` render as plain text so consumers can include\n * non-navigable ancestors (e.g. a section header) when needed.\n *\n * The chevron separator between crumbs ships as an inline SVG so the\n * component renders correctly with no consumer setup. Consumers can\n * replace the separator by projecting an `<ng-template #fkBreadcrumbSeparator>`\n * with any content — the template is instantiated once per gap between\n * crumbs.\n *\n * For breadcrumbs that reflect a tree/hierarchy selection (e.g. org nodes),\n * use `fk-node-tree-breadcrumb` instead — that component walks a `TreeNode`\n * array by `parentId` and emits node-select events rather than navigating.\n */\n@Component({\n  selector: 'fk-breadcrumb',\n  standalone: true,\n  imports: [NgTemplateOutlet, RouterLink],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './breadcrumb.component.html',\n  styleUrl: './breadcrumb.component.scss',\n})\nexport class BreadcrumbComponent {\n  // ===== INPUTS =====\n  /** Ordered list of crumb items; the last item is always treated as the current page. */\n  readonly items = input.required<readonly BreadcrumbItem[]>();\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly ariaLabel = input<string>('Breadcrumb');\n\n  // ===== CONTENT CHILDREN =====\n  readonly separatorRef = contentChild<TemplateRef<unknown>>(\n    'fkBreadcrumbSeparator',\n  );\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-breadcrumb', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.role')\n  readonly role = 'navigation';\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel(): string {\n    return this.ariaLabel();\n  }\n}\n","<ol class=\"fk-breadcrumb__list\">\n  @for (crumb of items(); track $index; let last = $last) {\n    <li class=\"fk-breadcrumb__item\">\n      @if (last) {\n        <span class=\"fk-breadcrumb__current\" aria-current=\"page\">\n          {{ crumb.label }}\n        </span>\n      } @else {\n        @if (crumb.routerLink) {\n          <a class=\"fk-breadcrumb__link\" [routerLink]=\"crumb.routerLink\">\n            {{ crumb.label }}\n          </a>\n        } @else {\n          <span class=\"fk-breadcrumb__text\">{{ crumb.label }}</span>\n        }\n\n        <span class=\"fk-breadcrumb__separator\" aria-hidden=\"true\">\n          @if (separatorRef(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M6 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          }\n        </span>\n      }\n    </li>\n  }\n</ol>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}