@frame-kit/ui-ng 0.0.1

package/docs/endpoint-link/README.md

@@ -0,0 +1,142 @@
+# fk-endpoint-link
+
+A sidebar row for an API endpoint in developer documentation. Combines an
+`fk-method-badge` with a label inside a single clickable router link, and
+tracks active state from the current URL.
+
+---
+
+## API
+
+### Inputs
+
+| Input        | Type                 | Default      | Description                                             |
+| ------------ | -------------------- | ------------ | ------------------------------------------------------- |
+| `method`     | `EndpointLinkMethod` | **required** | HTTP method shown in the badge                          |
+| `label`      | `string`             | **required** | Endpoint description (e.g. operation summary)           |
+| `routerLink` | `string \| any[]`    | **required** | Target route — passed through to Angular's `routerLink` |
+| `exact`      | `boolean`            | `false`      | Require exact URL match to apply the active state       |
+| `className`  | `string`             | `""`         | Additional CSS classes merged onto the host element     |
+
+### Outputs
+
+None.
+
+### Content
+
+`fk-endpoint-link` does not project content.
+
+---
+
+## Features
+
+- Active state tracked from `Router.url` via `NavigationEnd` (avoids known
+  `routerLinkActive` quirks with signal-based `[routerLink]` inputs)
+- Prefix-matching by default so sub-paths still highlight; opt into exact
+  matching with `exact`
+- Uses `fk-method-badge` so method colors and tokens stay consistent
+- Ellipsis-truncated label keeps dense nav columns clean
+
+---
+
+## Quick Start
+
+```html
+<fk-endpoint-link method="get" label="List users" [routerLink]="['/docs/api-reference', 'List_users']" />
+```
+
+---
+
+## Import
+
+```ts
+import { EndpointLinkComponent } from '@frame-kit/ui-ng';
+```
+
+```ts
+@Component({
+  selector: 'app-example',
+  imports: [EndpointLinkComponent],
+  templateUrl: './example.component.html',
+})
+export class ExampleComponent {}
+```
+
+---
+
+## Selector
+
+```html
+<fk-endpoint-link method="get" label="..." [routerLink]="[...]" />
+```
+
+---
+
+## Examples
+
+### Verbs across methods
+
+```html
+<fk-endpoint-link method="get" label="List widgets" [routerLink]="['/list']" />
+<fk-endpoint-link method="post" label="Create widget" [routerLink]="['/create']" />
+<fk-endpoint-link method="delete" label="Delete widget" [routerLink]="['/delete']" />
+```
+
+### Exact URL matching
+
+```html
+<fk-endpoint-link method="get" label="Overview" [routerLink]="['/docs/api-reference']" [exact]="true" />
+```
+
+---
+
+## Accessibility
+
+- Renders as a semantic `<a>` element with a real `routerLink` target —
+  keyboard navigation works with Tab + Enter
+- Focus ring uses `--fk-focus-ring` tokens
+- Active state is communicated visually via color and font weight; the route
+  itself is the authoritative signal for assistive technology
+
+---
+
+## Design Tokens
+
+```scss
+--fk-endpoint-link-gap;
+--fk-endpoint-link-padding-block;
+--fk-endpoint-link-padding-inline;
+--fk-endpoint-link-radius;
+--fk-endpoint-link-font-size;
+--fk-endpoint-link-color;
+--fk-endpoint-link-bg-hover;
+--fk-endpoint-link-bg-active;
+--fk-endpoint-link-color-active;
+--fk-endpoint-link-font-weight-active;
+--fk-endpoint-link-focus-ring;
+```
+
+Override in your app stylesheet:
+
+```scss
+:root {
+  --fk-endpoint-link-bg-active: #dbeafe;
+  --fk-endpoint-link-color-active: #1e3a8a;
+}
+```
+
+---
+
+## Behavior Notes
+
+- Active detection compares the current URL (after redirects) against the
+  target derived from `routerLink`. String and array forms are both
+  supported
+- Clicks call `stopPropagation` so the link doesn't re-trigger click
+  handlers on wrapping rows (useful when nested inside expandable groups)
+- When rendered inside an `fk-app-shell`, clicks also call
+  `dismissSidenav()` on the ancestor shell. On mobile, this closes the
+  sidenav overlay so the user lands on the endpoint content; on desktop
+  it's a no-op because `dismissSidenav` only affects the mobile temporary
+  state. The ancestor shell is optional — the link works standalone too
+- The label is truncated with ellipsis when it exceeds the available width

package/docs/method-badge/README.md

@@ -0,0 +1,154 @@
+# fk-method-badge
+
+A token-driven HTTP method badge for developer documentation. Renders a
+compact, colored label (`GET`, `POST`, `PUT`, etc.) so readers can scan an
+endpoint list and identify verbs at a glance.
+
+---
+
+## API
+
+### Inputs
+
+| Input       | Type                | Default      | Description                                         |
+| ----------- | ------------------- | ------------ | --------------------------------------------------- |
+| `method`    | `MethodBadgeMethod` | **required** | HTTP method (lowercase to match OpenAPI)            |
+| `className` | `string`            | `""`         | Additional CSS classes merged onto the host element |
+| `id`        | `string \| null`    | `null`       | Optional ID applied to the inner label span         |
+| `ariaLabel` | `string \| null`    | `null`       | Accessible label for the badge                      |
+
+### Outputs
+
+None.
+
+### Content
+
+`fk-method-badge` does not project content — the label is derived from
+`method` and rendered in uppercase.
+
+---
+
+## Features
+
+- Per-method pastel color palette baked in as fallbacks
+- Token-driven background and text colors with dark-mode overrides
+- Monospace label for consistent width across methods
+- Works standalone or inside other components (e.g. `fk-endpoint-link`)
+
+---
+
+## Quick Start
+
+```html
+<fk-method-badge method="get" />
+```
+
+```html
+<fk-method-badge method="post" />
+```
+
+---
+
+## Import
+
+```ts
+import { MethodBadgeComponent } from '@frame-kit/ui-ng';
+```
+
+```ts
+@Component({
+  selector: 'app-example',
+  imports: [MethodBadgeComponent],
+  templateUrl: './example.component.html',
+})
+export class ExampleComponent {}
+```
+
+---
+
+## Selector
+
+```html
+<fk-method-badge method="get" />
+```
+
+---
+
+## Examples
+
+### All supported methods
+
+```html
+<fk-method-badge method="get" />
+<fk-method-badge method="post" />
+<fk-method-badge method="put" />
+<fk-method-badge method="patch" />
+<fk-method-badge method="delete" />
+<fk-method-badge method="head" />
+<fk-method-badge method="options" />
+```
+
+### Inside an endpoint list
+
+```html
+<fk-endpoint-link method="get" label="List users" [routerLink]="['/docs/api-reference', 'List_users']" />
+```
+
+---
+
+## Accessibility
+
+- Renders as an inline span element inside the host
+- Set `ariaLabel` for screen readers when the verb alone is not enough
+  context (e.g. `ariaLabel="HTTP GET"`)
+- Color alone does not convey meaning — the verb is always present as text
+
+---
+
+## Design Tokens
+
+```scss
+--fk-method-badge-min-width;
+--fk-method-badge-padding-block;
+--fk-method-badge-padding-inline;
+--fk-method-badge-radius;
+--fk-method-badge-font-size;
+--fk-method-badge-font-weight;
+--fk-method-badge-color;
+
+--fk-method-badge-bg-neutral;
+--fk-method-badge-bg-get;
+--fk-method-badge-bg-post;
+--fk-method-badge-bg-put;
+--fk-method-badge-bg-patch;
+--fk-method-badge-bg-delete;
+--fk-method-badge-bg-head;
+--fk-method-badge-bg-options;
+
+--fk-method-badge-color-get;
+--fk-method-badge-color-post;
+--fk-method-badge-color-put;
+--fk-method-badge-color-patch;
+--fk-method-badge-color-delete;
+--fk-method-badge-color-head;
+--fk-method-badge-color-options;
+```
+
+Override in your app stylesheet:
+
+```scss
+:root {
+  --fk-method-badge-radius: 9999px;
+  --fk-method-badge-bg-get: #a7f3d0;
+}
+```
+
+---
+
+## Behavior Notes
+
+- Method names are lowercase on input to match OpenAPI conventions; the
+  rendered label is automatically uppercased
+- `head` and `options` fall back to the neutral background by default
+- Typography is locked to a monospace stack so labels align vertically in
+  dense lists

package/fesm2022/frame-kit-ui-ng-core-headline.mjs

@@ -0,0 +1,122 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, inject, Injector, computed, isDevMode, runInInjectionContext, afterNextRender, effect, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+// headline.component.ts
+class HeadlineComponent {
+    // Inputs
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Custom font-size override applied directly to the host element. */
+    fontSize = input(null, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Semantic heading level rendered in the DOM (h1–h6). */
+    level = input(2, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    /** Visual style applied to the heading — `"muted"` reduces contrast. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Hides the heading visually while keeping it in the accessibility tree. */
+    visuallyHidden = input(false, ...(ngDevMode ? [{ debugName: "visuallyHidden" }] : /* istanbul ignore next */ []));
+    // Template refs (signals)
+    h1 = viewChild.required('h1');
+    h2 = viewChild.required('h2');
+    h3 = viewChild.required('h3');
+    h4 = viewChild.required('h4');
+    h5 = viewChild.required('h5');
+    h6 = viewChild.required('h6');
+    injector = inject(Injector);
+    // Inject document (SSR-safe-ish if consumers provide it; still guard usage)
+    doc = inject(DOCUMENT, { optional: true });
+    // Host classes — single source of truth
+    classes = computed(() => {
+        return [
+            'fk-headline',
+            `fk-headline--h${this.level()}`,
+            this.variant() === 'muted' ? 'fk-headline--muted' : '',
+            this.visuallyHidden() ? 'sr-only' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostFontSize() {
+        return this.fontSize();
+    }
+    // Choose the correct heading template
+    template = computed(() => {
+        switch (this.level()) {
+            case 1:
+                return this.h1();
+            case 2:
+                return this.h2();
+            case 3:
+                return this.h3();
+            case 4:
+                return this.h4();
+            case 5:
+                return this.h5();
+            case 6:
+                return this.h6();
+            default:
+                return this.h2();
+        }
+    }, ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    // Dev-only: avoid spamming the console for the same count
+    static lastWarnedH1Count = null;
+    constructor() {
+        // Run once after first render, then re-check after render whenever `level()` changes.
+        // We schedule the DOM query after rendering to ensure this component’s heading exists.
+        const scheduleCheck = () => {
+            if (!isDevMode()) {
+                return;
+            }
+            const doc = this.doc;
+            if (!doc) {
+                return;
+            }
+            // afterNextRender() requires injection context; effect() runs outside it
+            runInInjectionContext(this.injector, () => {
+                afterNextRender(() => {
+                    if (this.level() !== 1) {
+                        return;
+                    }
+                    const h1Count = doc.querySelectorAll('h1').length;
+                    if (h1Count > 1 && HeadlineComponent.lastWarnedH1Count !== h1Count) {
+                        HeadlineComponent.lastWarnedH1Count = h1Count;
+                        console.warn(`[fk-headline] Detected ${h1Count} <h1> elements on the page. ` +
+                            `Best practice is usually a single <h1> per page. ` +
+                            `Consider lowering some headline levels to <h2>+ (or ensure only one top-level heading).`);
+                    }
+                });
+            });
+        };
+        // initial
+        scheduleCheck();
+        // when level changes
+        effect(() => {
+            this.level();
+            scheduleCheck();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HeadlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: HeadlineComponent, isStandalone: true, selector: "fk-headline", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, visuallyHidden: { classPropertyName: "visuallyHidden", publicName: "visuallyHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.font-size": "this.hostFontSize" } }, viewQueries: [{ propertyName: "h1", first: true, predicate: ["h1"], descendants: true, isSignal: true }, { propertyName: "h2", first: true, predicate: ["h2"], descendants: true, isSignal: true }, { propertyName: "h3", first: true, predicate: ["h3"], descendants: true, isSignal: true }, { propertyName: "h4", first: true, predicate: ["h4"], descendants: true, isSignal: true }, { propertyName: "h5", first: true, predicate: ["h5"], descendants: true, isSignal: true }, { propertyName: "h6", first: true, predicate: ["h6"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Stable projection point -->\n<ng-template #projected>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen heading template -->\n<ng-container\n  [ngTemplateOutlet]=\"template()\"\n  [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Heading templates -->\n<ng-template #h1 let-content>\n  <h1 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #h2 let-content>\n  <h2 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h2>\n</ng-template>\n\n<ng-template #h3 let-content>\n  <h3 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h3>\n</ng-template>\n\n<ng-template #h4 let-content>\n  <h4 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h4>\n</ng-template>\n\n<ng-template #h5 let-content>\n  <h5 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h5>\n</ng-template>\n\n<ng-template #h6 let-content>\n  <h6 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h6>\n</ng-template>\n", styles: [":host h1,:host h2,:host h3,:host h4,:host h5,:host h6{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:var(--fk-headline-color-default, var(--fk-color-text, #1a1a1a))}:host{display:block;margin-block:var(--fk-headline-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-headline-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-headline--h1{font-size:var(--fk-typography-h1-font-size, 2.25rem);font-weight:var(--fk-typography-h1-font-weight, var(--fk-font-weight-bold, 700));line-height:var(--fk-typography-h1-line-height, 1.05);letter-spacing:var(--fk-typography-h1-letter-spacing, -.02em)}:host.fk-headline--h2{font-size:var(--fk-typography-h2-font-size, 1.75rem);font-weight:var(--fk-typography-h2-font-weight, var(--fk-font-weight-bold, 700));line-height:var(--fk-typography-h2-line-height, 1.1);letter-spacing:var(--fk-typography-h2-letter-spacing, -.01em)}:host.fk-headline--h3{font-size:var(--fk-typography-h3-font-size, 1.375rem);font-weight:var(--fk-typography-h3-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h3-line-height, 1.2);letter-spacing:var(--fk-typography-h3-letter-spacing, 0em)}:host.fk-headline--h4{font-size:var(--fk-typography-h4-font-size, 1.125rem);font-weight:var(--fk-typography-h4-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h4-line-height, 1.25);letter-spacing:var(--fk-typography-h4-letter-spacing, 0em)}:host.fk-headline--h5{font-size:var(--fk-typography-h5-font-size, .9375rem);font-weight:var(--fk-typography-h5-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h5-line-height, 1.3);letter-spacing:var(--fk-typography-h5-letter-spacing, .01em)}:host.fk-headline--h6{font-size:var(--fk-typography-h6-font-size, .8125rem);font-weight:var(--fk-typography-h6-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h6-line-height, 1.4);letter-spacing:var(--fk-typography-h6-letter-spacing, .02em)}:host.fk-headline--muted h1,:host.fk-headline--muted h2,:host.fk-headline--muted h3,:host.fk-headline--muted h4,:host.fk-headline--muted h5,:host.fk-headline--muted h6{color:var(--fk-headline-color-muted, var(--fk-color-muted, #6b7280))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HeadlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-headline', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Stable projection point -->\n<ng-template #projected>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen heading template -->\n<ng-container\n  [ngTemplateOutlet]=\"template()\"\n  [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Heading templates -->\n<ng-template #h1 let-content>\n  <h1 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #h2 let-content>\n  <h2 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h2>\n</ng-template>\n\n<ng-template #h3 let-content>\n  <h3 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h3>\n</ng-template>\n\n<ng-template #h4 let-content>\n  <h4 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h4>\n</ng-template>\n\n<ng-template #h5 let-content>\n  <h5 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h5>\n</ng-template>\n\n<ng-template #h6 let-content>\n  <h6 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h6>\n</ng-template>\n", styles: [":host h1,:host h2,:host h3,:host h4,:host h5,:host h6{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:var(--fk-headline-color-default, var(--fk-color-text, #1a1a1a))}:host{display:block;margin-block:var(--fk-headline-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-headline-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-headline--h1{font-size:var(--fk-typography-h1-font-size, 2.25rem);font-weight:var(--fk-typography-h1-font-weight, var(--fk-font-weight-bold, 700));line-height:var(--fk-typography-h1-line-height, 1.05);letter-spacing:var(--fk-typography-h1-letter-spacing, -.02em)}:host.fk-headline--h2{font-size:var(--fk-typography-h2-font-size, 1.75rem);font-weight:var(--fk-typography-h2-font-weight, var(--fk-font-weight-bold, 700));line-height:var(--fk-typography-h2-line-height, 1.1);letter-spacing:var(--fk-typography-h2-letter-spacing, -.01em)}:host.fk-headline--h3{font-size:var(--fk-typography-h3-font-size, 1.375rem);font-weight:var(--fk-typography-h3-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h3-line-height, 1.2);letter-spacing:var(--fk-typography-h3-letter-spacing, 0em)}:host.fk-headline--h4{font-size:var(--fk-typography-h4-font-size, 1.125rem);font-weight:var(--fk-typography-h4-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h4-line-height, 1.25);letter-spacing:var(--fk-typography-h4-letter-spacing, 0em)}:host.fk-headline--h5{font-size:var(--fk-typography-h5-font-size, .9375rem);font-weight:var(--fk-typography-h5-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h5-line-height, 1.3);letter-spacing:var(--fk-typography-h5-letter-spacing, .01em)}:host.fk-headline--h6{font-size:var(--fk-typography-h6-font-size, .8125rem);font-weight:var(--fk-typography-h6-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h6-line-height, 1.4);letter-spacing:var(--fk-typography-h6-letter-spacing, .02em)}:host.fk-headline--muted h1,:host.fk-headline--muted h2,:host.fk-headline--muted h3,:host.fk-headline--muted h4,:host.fk-headline--muted h5,:host.fk-headline--muted h6{color:var(--fk-headline-color-muted, var(--fk-color-muted, #6b7280))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], visuallyHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "visuallyHidden", required: false }] }], h1: [{ type: i0.ViewChild, args: ['h1', { isSignal: true }] }], h2: [{ type: i0.ViewChild, args: ['h2', { isSignal: true }] }], h3: [{ type: i0.ViewChild, args: ['h3', { isSignal: true }] }], h4: [{ type: i0.ViewChild, args: ['h4', { isSignal: true }] }], h5: [{ type: i0.ViewChild, args: ['h5', { isSignal: true }] }], h6: [{ type: i0.ViewChild, args: ['h6', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostFontSize: [{
+                type: HostBinding,
+                args: ['style.font-size']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HeadlineComponent };
+//# sourceMappingURL=frame-kit-ui-ng-core-headline.mjs.map

package/fesm2022/frame-kit-ui-ng-core-headline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-core-headline.mjs","sources":["../../../../packages/ui-ng/core/headline/headline.component.ts","../../../../packages/ui-ng/core/headline/headline.component.html","../../../../packages/ui-ng/core/headline/frame-kit-ui-ng-core-headline.ts"],"sourcesContent":["// headline.component.ts\nimport { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  HostBinding,\n  inject,\n  Injector,\n  input,\n  isDevMode,\n  runInInjectionContext,\n  TemplateRef,\n  viewChild,\n} from '@angular/core';\n\nimport type { HeadlineLevel, HeadlineVariant } from './headline.types';\n\n@Component({\n  selector: 'fk-headline',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './headline.component.scss',\n  templateUrl: './headline.component.html',\n})\nexport class HeadlineComponent {\n  // Inputs\n  readonly ariaLabel = input<string | null>(null);\n  readonly className = input<string>('');\n  /** Custom font-size override applied directly to the host element. */\n  readonly fontSize = input<string | null>(null);\n  readonly id = input<string | null>(null);\n  /** Semantic heading level rendered in the DOM (h1–h6). */\n  readonly level = input<HeadlineLevel>(2);\n  /** Visual style applied to the heading — `\"muted\"` reduces contrast. */\n  readonly variant = input<HeadlineVariant>('default');\n  /** Hides the heading visually while keeping it in the accessibility tree. */\n  readonly visuallyHidden = input(false);\n\n  // Template refs (signals)\n  private readonly h1 = viewChild.required<TemplateRef<unknown>>('h1');\n  private readonly h2 = viewChild.required<TemplateRef<unknown>>('h2');\n  private readonly h3 = viewChild.required<TemplateRef<unknown>>('h3');\n  private readonly h4 = viewChild.required<TemplateRef<unknown>>('h4');\n  private readonly h5 = viewChild.required<TemplateRef<unknown>>('h5');\n  private readonly h6 = viewChild.required<TemplateRef<unknown>>('h6');\n\n  private readonly injector = inject(Injector);\n\n  // Inject document (SSR-safe-ish if consumers provide it; still guard usage)\n  private readonly doc = inject(DOCUMENT, { optional: true });\n\n  // Host classes — single source of truth\n  readonly classes = computed(() => {\n    return [\n      'fk-headline',\n      `fk-headline--h${this.level()}`,\n      this.variant() === 'muted' ? 'fk-headline--muted' : '',\n      this.visuallyHidden() ? 'sr-only' : '',\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('style.font-size')\n  get hostFontSize(): string | null {\n    return this.fontSize();\n  }\n\n  // Choose the correct heading template\n  readonly template = computed(() => {\n    switch (this.level()) {\n      case 1:\n        return this.h1();\n      case 2:\n        return this.h2();\n      case 3:\n        return this.h3();\n      case 4:\n        return this.h4();\n      case 5:\n        return this.h5();\n      case 6:\n        return this.h6();\n      default:\n        return this.h2();\n    }\n  });\n\n  // Dev-only: avoid spamming the console for the same count\n  private static lastWarnedH1Count: number | null = null;\n\n  constructor() {\n    // Run once after first render, then re-check after render whenever `level()` changes.\n    // We schedule the DOM query after rendering to ensure this component’s heading exists.\n    const scheduleCheck = () => {\n      if (!isDevMode()) {\n        return;\n      }\n\n      const doc = this.doc;\n\n      if (!doc) {\n        return;\n      }\n\n      // afterNextRender() requires injection context; effect() runs outside it\n      runInInjectionContext(this.injector, () => {\n        afterNextRender(() => {\n          if (this.level() !== 1) {\n            return;\n          }\n\n          const h1Count = doc.querySelectorAll('h1').length;\n\n          if (h1Count > 1 && HeadlineComponent.lastWarnedH1Count !== h1Count) {\n            HeadlineComponent.lastWarnedH1Count = h1Count;\n\n            console.warn(\n              `[fk-headline] Detected ${h1Count} <h1> elements on the page. ` +\n                `Best practice is usually a single <h1> per page. ` +\n                `Consider lowering some headline levels to <h2>+ (or ensure only one top-level heading).`,\n            );\n          }\n        });\n      });\n    };\n\n    // initial\n    scheduleCheck();\n\n    // when level changes\n    effect(() => {\n      this.level();\n\n      scheduleCheck();\n    });\n  }\n}\n","<!-- Stable projection point -->\n<ng-template #projected>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen heading template -->\n<ng-container\n  [ngTemplateOutlet]=\"template()\"\n  [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Heading templates -->\n<ng-template #h1 let-content>\n  <h1 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #h2 let-content>\n  <h2 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h2>\n</ng-template>\n\n<ng-template #h3 let-content>\n  <h3 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h3>\n</ng-template>\n\n<ng-template #h4 let-content>\n  <h4 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h4>\n</ng-template>\n\n<ng-template #h5 let-content>\n  <h5 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h5>\n</ng-template>\n\n<ng-template #h6 let-content>\n  <h6 [id]=\"id() || null\" [attr.aria-label]=\"ariaLabel() || null\">\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </h6>\n</ng-template>\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-core-icon.mjs

@@ -0,0 +1,189 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, computed, isDevMode, HostBinding, ChangeDetectionStrategy, Component, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+class IconRegistryService {
+    icons = new Map();
+    sanitizer = inject(DomSanitizer);
+    registerIcon(name, svgContent) {
+        const normalized = this.normalizeSvg(svgContent);
+        this.icons.set(name, this.sanitizer.bypassSecurityTrustHtml(normalized));
+    }
+    normalizeSvg(svg) {
+        const svgStart = svg.indexOf('<svg');
+        const svgOnly = svgStart > 0 ? svg.slice(svgStart) : svg;
+        return svgOnly
+            .replace(/<svg([^>]*)>/, (_match, attrs) => {
+            const cleaned = attrs.replace(/\s*(?:width|height)="[^"]*"/gi, '');
+            const hasFill = /\bfill\s*=/i.test(cleaned);
+            return `<svg${cleaned}${hasFill ? '' : ' fill="currentColor"'}>`;
+        })
+            .replace(/\b(stroke|fill)="(?!none|currentColor)[^"]*"/gi, '$1="currentColor"');
+    }
+    registerIcons(icons) {
+        for (const [name, svg] of Object.entries(icons)) {
+            this.registerIcon(name, svg);
+        }
+    }
+    getIcon(name) {
+        return this.icons.get(name) ?? null;
+    }
+    hasIcon(name) {
+        return this.icons.has(name);
+    }
+    getRegisteredNames() {
+        return Array.from(this.icons.keys());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class IconComponent {
+    registry = inject(IconRegistryService);
+    // ===== INPUTS =====
+    /** Registry key for the SVG icon to render. */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Preset size token applied as a CSS class; pass a CSS value for custom sizes. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Icon color — preset token names resolve to design-token colors, any other string is applied as a literal CSS `color`. */
+    color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : /* 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 */ []));
+    /** Explicitly sets `aria-hidden`; when null, the directive infers it from `ariaLabel`. */
+    ariaHidden = input(null, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    svgContent = computed(() => {
+        const name = this.name();
+        // No name bound (e.g. an optional/absent icon) — render nothing, no warning.
+        if (!name) {
+            return null;
+        }
+        const content = this.registry.getIcon(name);
+        if (!content && isDevMode()) {
+            console.warn(`[fk-icon] Icon "${name}" not found in registry. ` +
+                `Register it via IconRegistryService.registerIcon() before use.`);
+        }
+        return content;
+    }, ...(ngDevMode ? [{ debugName: "svgContent" }] : /* istanbul ignore next */ []));
+    effectiveAriaHidden = computed(() => {
+        const explicit = this.ariaHidden();
+        if (explicit !== null) {
+            return explicit;
+        }
+        return this.ariaLabel() === null;
+    }, ...(ngDevMode ? [{ debugName: "effectiveAriaHidden" }] : /* istanbul ignore next */ []));
+    sizePresets = ['xs', 'sm', 'md', 'lg', 'xl'];
+    isCustomSize = computed(() => !this.sizePresets.includes(this.size()), ...(ngDevMode ? [{ debugName: "isCustomSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-icon',
+            this.isCustomSize() ? '' : `fk-icon--${this.size()}`,
+            this.color() !== 'inherit' ? `fk-icon--${this.color()}` : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostFontSize() {
+        return this.isCustomSize() ? this.size() : null;
+    }
+    get hostRole() {
+        return this.ariaLabel() ? 'img' : null;
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    get hostAriaHidden() {
+        return this.effectiveAriaHidden() ? 'true' : null;
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostColor() {
+        const color = this.color();
+        const presets = [
+            'inherit',
+            'default',
+            'muted',
+            'primary',
+            'danger',
+            'success',
+        ];
+        if (presets.includes(color)) {
+            return null;
+        }
+        return color;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IconComponent, isStandalone: true, selector: "fk-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.font-size": "this.hostFontSize", "attr.role": "this.hostRole", "attr.aria-label": "this.hostAriaLabel", "attr.aria-hidden": "this.hostAriaHidden", "attr.id": "this.hostId", "style.color": "this.hostColor" } }, ngImport: i0, template: "@if (svgContent()) {\n  <span class=\"fk-icon__svg\" [innerHTML]=\"svgContent()\"></span>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.fk-icon__svg{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep svg{width:1em;height:1em;display:block}:host.fk-icon--xs{font-size:var(--fk-icon-size-xs, .75rem)}:host.fk-icon--sm{font-size:var(--fk-icon-size-sm, 1rem)}:host.fk-icon--md{font-size:var(--fk-icon-size-md, 1.25rem)}:host.fk-icon--lg{font-size:var(--fk-icon-size-lg, 1.5rem)}:host.fk-icon--xl{font-size:var(--fk-icon-size-xl, 2rem)}:host.fk-icon--default{color:var(--fk-icon-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-icon--muted{color:var(--fk-icon-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-icon--primary{color:var(--fk-icon-color-primary, var(--fk-color-primary, #0a84ff))}:host.fk-icon--danger{color:var(--fk-icon-color-danger, var(--fk-color-danger, #e02424))}:host.fk-icon--success{color:var(--fk-icon-color-success, var(--fk-color-success, #10b981))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (svgContent()) {\n  <span class=\"fk-icon__svg\" [innerHTML]=\"svgContent()\"></span>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.fk-icon__svg{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep svg{width:1em;height:1em;display:block}:host.fk-icon--xs{font-size:var(--fk-icon-size-xs, .75rem)}:host.fk-icon--sm{font-size:var(--fk-icon-size-sm, 1rem)}:host.fk-icon--md{font-size:var(--fk-icon-size-md, 1.25rem)}:host.fk-icon--lg{font-size:var(--fk-icon-size-lg, 1.5rem)}:host.fk-icon--xl{font-size:var(--fk-icon-size-xl, 2rem)}:host.fk-icon--default{color:var(--fk-icon-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-icon--muted{color:var(--fk-icon-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-icon--primary{color:var(--fk-icon-color-primary, var(--fk-color-primary, #0a84ff))}:host.fk-icon--danger{color:var(--fk-icon-color-danger, var(--fk-color-danger, #e02424))}:host.fk-icon--success{color:var(--fk-icon-color-success, var(--fk-color-success, #10b981))}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostFontSize: [{
+                type: HostBinding,
+                args: ['style.font-size']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostAriaHidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }] } });
+
+/**
+ * Registers icons into the `IconRegistryService` via Angular DI.
+ *
+ * Icons are provided as a record of name → SVG string pairs.
+ * This is tree-shakeable: only icons you import and pass here are bundled.
+ *
+ * @example
+ * ```ts
+ * import { searchIcon, lockIcon } from '@my-app/icons';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideIcons({
+ *       search: searchIcon,
+ *       lock: lockIcon,
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+function provideIcons(icons) {
+    return makeEnvironmentProviders([
+        IconRegistryService,
+        provideAppInitializer(() => {
+            inject(IconRegistryService).registerIcons(icons);
+        }),
+    ]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IconComponent, IconRegistryService, provideIcons };
+//# sourceMappingURL=frame-kit-ui-ng-core-icon.mjs.map