@frame-kit/ui-ng-patterns 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FrameKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# @frame-kit/ui-ng-patterns
+
+Opinionated, **dashboard-ready Angular components** composed from
+[`@frame-kit/ui-ng`](https://www.npmjs.com/package/@frame-kit/ui-ng) primitives. Where `ui-ng` is
+deliberately unstyled (structure, accessibility, behavior), this layer adds the **composition, layout,
+and sensible defaults** you'd otherwise rebuild on every dashboard — while staying fully themeable
+through the same `--fk-*` token contract.
+
+```
+@frame-kit/tokens        design variables (--fk-*)
+        ↓
+@frame-kit/ui-ng         unstyled primitives (button, card, icon, …)
+        ↓
+@frame-kit/ui-ng-patterns  ← you are here: composed, styled patterns
+        ↓
+   your app              domain-specific glue only
+```
+
+## Install
+
+```bash
+npm i @frame-kit/ui-ng-patterns @frame-kit/ui-ng @frame-kit/tokens
+```
+
+`@frame-kit/ui-ng` and the Angular packages are peer dependencies. Load the `@frame-kit/tokens`
+stylesheets (and any brand overrides) as described in the
+[theming guide](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/THEMING.md).
+
+## Usage
+
+Patterns use the **`fk-`** selector prefix, the same as `ui-ng` primitives. Each layer ships as its
+own entry point for tree-shaking:
+
+```ts
+import { PageHeaderComponent } from '@frame-kit/ui-ng-patterns/dashboard';
+import { EndpointLinkComponent } from '@frame-kit/ui-ng-patterns/docs';
+```
+
+## What belongs here
+
+A component is promoted into this package when it:
+
+- Composes **two or more** `ui-ng` primitives/layouts,
+- Would be reused across **two or more** apps/dashboards,
+- Carries **no domain data** (no app APIs, enums, or business concepts),
+- Is **token-driven** (`--fk-*` plus component-scoped `--fk-<component>-*` with two-tier fallbacks).
+
+Domain-specific UI (auth banners, business cards, feature-flagged screens) stays in the consuming app.
+
+## Building components
+
+See the [Component Development Guide](./DEVELOPMENT_GUIDE.md) for this package's
+conventions. It inherits the [ui-ng guide](../ui-ng/DEVELOPMENT_GUIDE.md) and
+documents the package-specific differences (layers, one entry point per layer,
+selector prefix, story/token rules) plus the ui-ng rules that do **not** apply here.
+
+## Status
+
+Early — components are being added one at a time. See the
+[patterns catalog](./COMPONENTS.md) and the
+[ui-ng primitive catalog](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/COMPONENTS.md).
+
+## License
+
+MIT

package/fesm2022/frame-kit-ui-ng-patterns-dashboard.mjs

@@ -0,0 +1,279 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, HostBinding } from '@angular/core';
+import { HeadlineComponent } from '@frame-kit/ui-ng/core/headline';
+import { TextComponent } from '@frame-kit/ui-ng/core/text';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+
+/**
+ * Page-level dashboard header: title + optional description on the left, up to
+ * ~3 actions on the right.
+ *
+ * When the header's own width gets tight, the actions drop below the text and
+ * go full-width (mobile-style). The break is driven by a CSS container query on
+ * the host, so it responds to the content region's width — not the viewport,
+ * which means it behaves correctly inside a narrow panel.
+ *
+ * Project actions by tagging each button with `pageHeaderActions`:
+ *
+ *   <fk-page-header title="Users" description="...">
+ *     <fk-button pageHeaderActions variant="outline" size="sm">Import</fk-button>
+ *     <fk-button pageHeaderActions variant="primary" size="sm">Create user</fk-button>
+ *   </fk-page-header>
+ *
+ * Tagging each button (rather than wrapping them in a div) makes every button a
+ * direct flex child, so full-width stacking falls out of `align-items: stretch`
+ * with no `::ng-deep` reach-in.
+ *
+ * The title row has two projected slots — `[pageHeaderLeading]` before the
+ * title and `[pageHeaderTrailing]` after it. Project a plain `fk-icon` for a
+ * decorative mark, or a `button` for a clickable one (the consumer owns the
+ * interaction, focus ring, and aria-label):
+ *
+ *   <fk-page-header title="Permissions">
+ *     <fk-icon pageHeaderLeading name="key-outline" />
+ *     <button pageHeaderTrailing type="button" aria-label="Docs" (click)="openDocs()">
+ *       <fk-icon name="view-api" />
+ *     </button>
+ *   </fk-page-header>
+ */
+class PageHeaderComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    headingLevel = input(1, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PageHeaderComponent, isStandalone: true, selector: "fk-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"fk-page-header\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }, { kind: "component", type: TextComponent, selector: "fk-text", inputs: ["as", "variant", "tone", "align", "weight", "truncate", "maxLines", "gutterBottom", "italic", "visuallyHidden", "className", "id", "ariaLabel", "ariaDescribedBy", "role", "htmlFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-page-header', standalone: true, imports: [HeadlineComponent, TextComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fk-page-header\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n", styles: [":host{display:block;container-type:inline-size}.fk-page-header{display:flex;flex-direction:column;gap:var(--fk-rhythm-4, 1rem)}.fk-page-header__text{min-width:0}.fk-page-header__title-row{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-page-header__title-row fk-headline{margin-block:0}.fk-page-header__description{display:block;margin-top:var(--fk-rhythm-2, .5rem);max-width:60ch;line-height:1.5}.fk-page-header__actions{display:flex;flex-direction:column;gap:var(--fk-rhythm-3, .75rem)}@container (min-width: 40rem){.fk-page-header{flex-direction:row;align-items:flex-start;justify-content:space-between}.fk-page-header__actions{flex-direction:row;flex-shrink:0;align-items:center}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+
+/**
+ * Empty-state panel for dashboard tables and lists: a centered icon, a title,
+ * an optional description, and a projected actions slot (typically one primary
+ * fk-button). Bordered-card styling, meant to stand in for a table body when
+ * there are no rows.
+ *
+ * The action row flips from a horizontal row to a centered vertical stack on
+ * narrow widths, driven by a container query on the host — so it reacts to the
+ * empty-state's own width (e.g. inside a split column) rather than the viewport.
+ *
+ *   <fk-table-empty-state
+ *     icon="globe"
+ *     title="No webhooks configured"
+ *     description="Add a webhook to receive events."
+ *   >
+ *     <fk-button variant="primary" size="sm">Add webhook</fk-button>
+ *   </fk-table-empty-state>
+ *
+ * The actions slot is an open `ng-content`, so project as many actions as the
+ * design needs (one primary is the norm; two reads cleanly).
+ */
+class TableEmptyStateComponent {
+    // ===== INPUTS =====
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* 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(() => ['fk-table-empty-state', 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: TableEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TableEmptyStateComponent, isStandalone: true, selector: "fk-table-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", 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", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"fk-table-empty-state__icon\">\n    <fk-icon [name]=\"icon()!\" size=\"lg\" />\n  </div>\n}\n\n<h3 class=\"fk-table-empty-state__title\">{{ title() }}</h3>\n\n@if (description()) {\n  <p class=\"fk-table-empty-state__description\">{{ description() }}</p>\n}\n\n<div class=\"fk-table-empty-state__actions\">\n  <ng-content />\n</div>\n", styles: [":host{container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--fk-table-empty-state-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-table-empty-state-padding-block, var(--fk-rhythm-8, 2rem)) var(--fk-table-empty-state-padding-inline, var(--fk-rhythm-4, 1rem));border:1px solid var(--fk-table-empty-state-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-table-empty-state-radius, var(--fk-radius-lg, .75rem));background:var(--fk-table-empty-state-bg, var(--fk-color-surface, #ffffff))}.fk-table-empty-state__icon{color:var(--fk-table-empty-state-icon-color, var(--fk-color-muted, #8a98a8))}.fk-table-empty-state__title{margin:0;font-size:var(--fk-table-empty-state-title-font-size, var(--fk-typography-body-font-size, .9375rem));font-weight:var(--fk-table-empty-state-title-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-table-empty-state-title-color, var(--fk-color-text-strong, #0b1420))}.fk-table-empty-state__description{margin:0;font-size:var(--fk-table-empty-state-description-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-table-empty-state-description-color, var(--fk-color-muted, #8a98a8));max-width:var(--fk-table-empty-state-description-max-width, 24rem)}.fk-table-empty-state__actions{display:flex;gap:var(--fk-table-empty-state-actions-gap, var(--fk-rhythm-2, .5rem));margin-top:var(--fk-table-empty-state-actions-margin-top, var(--fk-rhythm-1, .25rem))}.fk-table-empty-state__actions:empty{display:none}@container (max-width: 28rem){.fk-table-empty-state__actions{flex-direction:column;align-self:stretch;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-table-empty-state', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon()) {\n  <div class=\"fk-table-empty-state__icon\">\n    <fk-icon [name]=\"icon()!\" size=\"lg\" />\n  </div>\n}\n\n<h3 class=\"fk-table-empty-state__title\">{{ title() }}</h3>\n\n@if (description()) {\n  <p class=\"fk-table-empty-state__description\">{{ description() }}</p>\n}\n\n<div class=\"fk-table-empty-state__actions\">\n  <ng-content />\n</div>\n", styles: [":host{container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--fk-table-empty-state-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-table-empty-state-padding-block, var(--fk-rhythm-8, 2rem)) var(--fk-table-empty-state-padding-inline, var(--fk-rhythm-4, 1rem));border:1px solid var(--fk-table-empty-state-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-table-empty-state-radius, var(--fk-radius-lg, .75rem));background:var(--fk-table-empty-state-bg, var(--fk-color-surface, #ffffff))}.fk-table-empty-state__icon{color:var(--fk-table-empty-state-icon-color, var(--fk-color-muted, #8a98a8))}.fk-table-empty-state__title{margin:0;font-size:var(--fk-table-empty-state-title-font-size, var(--fk-typography-body-font-size, .9375rem));font-weight:var(--fk-table-empty-state-title-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-table-empty-state-title-color, var(--fk-color-text-strong, #0b1420))}.fk-table-empty-state__description{margin:0;font-size:var(--fk-table-empty-state-description-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-table-empty-state-description-color, var(--fk-color-muted, #8a98a8));max-width:var(--fk-table-empty-state-description-max-width, 24rem)}.fk-table-empty-state__actions{display:flex;gap:var(--fk-table-empty-state-actions-gap, var(--fk-rhythm-2, .5rem));margin-top:var(--fk-table-empty-state-actions-margin-top, var(--fk-rhythm-1, .25rem))}.fk-table-empty-state__actions:empty{display:none}@container (max-width: 28rem){.fk-table-empty-state__actions{flex-direction:column;align-self:stretch;align-items:stretch}}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", 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']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Two-column split layout with container-query responsive stacking.
+ *
+ * Projects content into `[start]` (grows to fill) and `[end]` (content-sized or
+ * fixed width). Below 700px container width, columns stack vertically.
+ *
+ * A standalone layout primitive for custom dashboard rows.
+ */
+class ContentSplitLayoutComponent {
+    endWidth = input(null, ...(ngDevMode ? [{ debugName: "endWidth" }] : /* istanbul ignore next */ []));
+    gap = input('var(--fk-rhythm-4, 1rem)', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    hostClass = 'fk-content-split-layout';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContentSplitLayoutComponent, isStandalone: true, selector: "fk-content-split-layout", inputs: { endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentSplitLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-content-split-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.fk-content-split-layout__row{display:flex;flex-direction:column;gap:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__row{flex-direction:row;align-items:flex-start}}.fk-content-split-layout__start{display:flex;flex-direction:column;padding-top:var(--fk-rhythm-4, 1rem);width:100%}.fk-content-split-layout__start>*+*{margin-top:var(--fk-content-split-gap, var(--fk-rhythm-4, 1rem))}@container (min-width: 700px){.fk-content-split-layout__start{flex:1;min-width:0}}.fk-content-split-layout__end{width:100%}@container (min-width: 700px){.fk-content-split-layout__end{flex:0 0 auto}}@container (min-width: 700px){.fk-content-split-layout__end--fixed{flex:0 0 var(--fk-content-split-end-width)}}\n"] }]
+        }], propDecorators: { endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Responsive column layout for dashboard content. Lays projected children out
+ * in equal-width columns that wrap — and ultimately collapse to a single
+ * stacked column — based on the layout's *own* available width, never the
+ * viewport. So it reacts correctly when the dashboard content region is
+ * squeezed (sidenav open, a drawer pushed in, a split pane) while the viewport
+ * still reports "desktop".
+ *
+ * Implemented with an intrinsic CSS grid — `repeat(auto-fit, minmax(min, 1fr))`
+ * — so there is no container query, no JS, and no viewport breakpoint to keep
+ * in sync. `minColumnWidth` is the smallest a column may shrink to before the
+ * grid drops a column; empty tracks collapse, so N children never produce more
+ * than N columns. Spacing on both axes is a single `gutter` gap, so wrapped
+ * rows and side-by-side columns separate consistently with no edge artifacts.
+ *
+ *   <fk-columns minColumnWidth="18rem">
+ *     <fk-field-group>…</fk-field-group>
+ *     <fk-field-group>…</fk-field-group>
+ *   </fk-columns>
+ */
+class ColumnsComponent {
+    // ===== INPUTS =====
+    /**
+     * The smallest width a column may shrink to before the grid drops to fewer
+     * columns. This is the single knob that controls when columns wrap/stack.
+     */
+    minColumnWidth = input('16rem', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : /* istanbul ignore next */ []));
+    /** Gap between side-by-side columns and between wrapped rows. */
+    gutter = input('var(--fk-rhythm-4, 1rem)', ...(ngDevMode ? [{ debugName: "gutter" }] : /* 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(() => ['fk-columns', 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();
+    }
+    get hostMin() {
+        return this.minColumnWidth();
+    }
+    get hostGutter() {
+        return this.gutter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ColumnsComponent, isStandalone: true, selector: "fk-columns", inputs: { minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, gutter: { classPropertyName: "gutter", publicName: "gutter", 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", "attr.aria-label": "this.hostAriaLabel", "style.--fk-columns-min": "this.hostMin", "style.--fk-columns-gutter": "this.hostGutter" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--fk-columns-min, 16rem),100%),1fr));gap:var(--fk-columns-gutter, var(--fk-rhythm-4, 1rem));align-items:start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-columns', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--fk-columns-min, 16rem),100%),1fr));gap:var(--fk-columns-gutter, var(--fk-rhythm-4, 1rem));align-items:start}\n"] }]
+        }], propDecorators: { minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", 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']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostMin: [{
+                type: HostBinding,
+                args: ['style.--fk-columns-min']
+            }], hostGutter: [{
+                type: HostBinding,
+                args: ['style.--fk-columns-gutter']
+            }] } });
+
+/**
+ * Padded container for an expanded dashboard detail region — typically the body
+ * of a data-table row expansion, holding an `fk-columns` of form controls.
+ *
+ * The `disabled` input greys the panel and makes its entire subtree `inert`
+ * (non-interactive, unfocusable, hidden from assistive technology) — for
+ * controls gated behind a feature toggle that must not be editable until the
+ * feature is enabled.
+ *
+ *   <fk-detail-panel [disabled]="!feature.enabled">
+ *     <fk-columns>…</fk-columns>
+ *   </fk-detail-panel>
+ */
+class DetailPanelComponent {
+    // ===== INPUTS =====
+    /**
+     * Greys the panel and makes its content inert (locked) — for feature-gated
+     * controls that should not be editable until the feature is enabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* 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(() => [
+        'fk-detail-panel',
+        this.disabled() ? 'fk-detail-panel--disabled' : '',
+        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();
+    }
+    /**
+     * Lock the whole subtree when disabled. `inert` blocks pointer interaction,
+     * focus, and assistive-tech access in one attribute — stronger and more
+     * correct than `pointer-events: none`, which only blocks the mouse.
+     */
+    get hostInert() {
+        return this.disabled() ? '' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DetailPanelComponent, isStandalone: true, selector: "fk-detail-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", 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", "attr.aria-label": "this.hostAriaLabel", "attr.inert": "this.hostInert" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;padding:var(--fk-detail-panel-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-detail-panel-padding-inline, var(--fk-rhythm-1, .25rem))}:host.fk-detail-panel--disabled{opacity:var(--fk-detail-panel-disabled-opacity, .55)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DetailPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-detail-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;padding:var(--fk-detail-panel-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-detail-panel-padding-inline, var(--fk-rhythm-1, .25rem))}:host.fk-detail-panel--disabled{opacity:var(--fk-detail-panel-disabled-opacity, .55)}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostInert: [{
+                type: HostBinding,
+                args: ['attr.inert']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnsComponent, ContentSplitLayoutComponent, DetailPanelComponent, PageHeaderComponent, TableEmptyStateComponent };
+//# sourceMappingURL=frame-kit-ui-ng-patterns-dashboard.mjs.map

package/fesm2022/frame-kit-ui-ng-patterns-dashboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-patterns-dashboard.mjs","sources":["../../../../packages/ui-ng-patterns/dashboard/page-header/page-header.component.ts","../../../../packages/ui-ng-patterns/dashboard/page-header/page-header.component.html","../../../../packages/ui-ng-patterns/dashboard/table-empty-state/table-empty-state.component.ts","../../../../packages/ui-ng-patterns/dashboard/table-empty-state/table-empty-state.component.html","../../../../packages/ui-ng-patterns/dashboard/content-split-layout/content-split-layout.component.ts","../../../../packages/ui-ng-patterns/dashboard/content-split-layout/content-split-layout.component.html","../../../../packages/ui-ng-patterns/dashboard/columns/columns.component.ts","../../../../packages/ui-ng-patterns/dashboard/columns/columns.component.html","../../../../packages/ui-ng-patterns/dashboard/detail-panel/detail-panel.component.ts","../../../../packages/ui-ng-patterns/dashboard/detail-panel/detail-panel.component.html","../../../../packages/ui-ng-patterns/dashboard/frame-kit-ui-ng-patterns-dashboard.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport type { HeadlineLevel } from '@frame-kit/ui-ng/core/headline';\nimport { HeadlineComponent } from '@frame-kit/ui-ng/core/headline';\nimport { TextComponent } from '@frame-kit/ui-ng/core/text';\n\n/**\n * Page-level dashboard header: title + optional description on the left, up to\n * ~3 actions on the right.\n *\n * When the header's own width gets tight, the actions drop below the text and\n * go full-width (mobile-style). The break is driven by a CSS container query on\n * the host, so it responds to the content region's width — not the viewport,\n * which means it behaves correctly inside a narrow panel.\n *\n * Project actions by tagging each button with `pageHeaderActions`:\n *\n *   <fk-page-header title=\"Users\" description=\"...\">\n *     <fk-button pageHeaderActions variant=\"outline\" size=\"sm\">Import</fk-button>\n *     <fk-button pageHeaderActions variant=\"primary\" size=\"sm\">Create user</fk-button>\n *   </fk-page-header>\n *\n * Tagging each button (rather than wrapping them in a div) makes every button a\n * direct flex child, so full-width stacking falls out of `align-items: stretch`\n * with no `::ng-deep` reach-in.\n *\n * The title row has two projected slots — `[pageHeaderLeading]` before the\n * title and `[pageHeaderTrailing]` after it. Project a plain `fk-icon` for a\n * decorative mark, or a `button` for a clickable one (the consumer owns the\n * interaction, focus ring, and aria-label):\n *\n *   <fk-page-header title=\"Permissions\">\n *     <fk-icon pageHeaderLeading name=\"key-outline\" />\n *     <button pageHeaderTrailing type=\"button\" aria-label=\"Docs\" (click)=\"openDocs()\">\n *       <fk-icon name=\"view-api\" />\n *     </button>\n *   </fk-page-header>\n */\n@Component({\n  selector: 'fk-page-header',\n  standalone: true,\n  imports: [HeadlineComponent, TextComponent],\n  // Emulated (not None) so `:host` works — `:host { display: block }` is what\n  // keeps the custom element from defaulting to `display: inline` and\n  // collapsing to min-content under the container query below.\n  encapsulation: ViewEncapsulation.Emulated,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './page-header.component.html',\n  styleUrl: './page-header.component.scss',\n})\nexport class PageHeaderComponent {\n  readonly title = input.required<string>();\n  readonly description = input<string | null>(null);\n  readonly headingLevel = input<HeadlineLevel>(1);\n}\n","<header class=\"fk-page-header\">\n  <div class=\"fk-page-header__text\">\n    <div class=\"fk-page-header__title-row\">\n      <ng-content select=\"[pageHeaderLeading]\" />\n\n      <fk-headline [level]=\"headingLevel()\">{{ title() }}</fk-headline>\n\n      <ng-content select=\"[pageHeaderTrailing]\" />\n    </div>\n\n    @if (description()) {\n      <fk-text class=\"fk-page-header__description\" tone=\"muted\">{{\n        description()\n      }}</fk-text>\n    }\n  </div>\n\n  <div class=\"fk-page-header__actions\">\n    <ng-content select=\"[pageHeaderActions]\" />\n  </div>\n</header>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\n\n/**\n * Empty-state panel for dashboard tables and lists: a centered icon, a title,\n * an optional description, and a projected actions slot (typically one primary\n * fk-button). Bordered-card styling, meant to stand in for a table body when\n * there are no rows.\n *\n * The action row flips from a horizontal row to a centered vertical stack on\n * narrow widths, driven by a container query on the host — so it reacts to the\n * empty-state's own width (e.g. inside a split column) rather than the viewport.\n *\n *   <fk-table-empty-state\n *     icon=\"globe\"\n *     title=\"No webhooks configured\"\n *     description=\"Add a webhook to receive events.\"\n *   >\n *     <fk-button variant=\"primary\" size=\"sm\">Add webhook</fk-button>\n *   </fk-table-empty-state>\n *\n * The actions slot is an open `ng-content`, so project as many actions as the\n * design needs (one primary is the norm; two reads cleanly).\n */\n@Component({\n  selector: 'fk-table-empty-state',\n  standalone: true,\n  imports: [IconComponent],\n  // Emulated (default) so `:host` works — the host is the bordered flex card\n  // and establishes the container-query context the actions break against.\n  encapsulation: ViewEncapsulation.Emulated,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './table-empty-state.component.html',\n  styleUrl: './table-empty-state.component.scss',\n})\nexport class TableEmptyStateComponent {\n  // ===== INPUTS =====\n  readonly icon = input<string | null>(null);\n  readonly title = input.required<string>();\n  readonly description = 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    ['fk-table-empty-state', this.className()].filter(Boolean).join(' '),\n  );\n\n  @HostBinding('class')\n  get hostClass(): string {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel(): string | null {\n    return this.ariaLabel();\n  }\n}\n","@if (icon()) {\n  <div class=\"fk-table-empty-state__icon\">\n    <fk-icon [name]=\"icon()!\" size=\"lg\" />\n  </div>\n}\n\n<h3 class=\"fk-table-empty-state__title\">{{ title() }}</h3>\n\n@if (description()) {\n  <p class=\"fk-table-empty-state__description\">{{ description() }}</p>\n}\n\n<div class=\"fk-table-empty-state__actions\">\n  <ng-content />\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  input,\n} from '@angular/core';\n\n/**\n * Two-column split layout with container-query responsive stacking.\n *\n * Projects content into `[start]` (grows to fill) and `[end]` (content-sized or\n * fixed width). Below 700px container width, columns stack vertically.\n *\n * A standalone layout primitive for custom dashboard rows.\n */\n@Component({\n  selector: 'fk-content-split-layout',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './content-split-layout.component.html',\n  styleUrl: './content-split-layout.component.scss',\n})\nexport class ContentSplitLayoutComponent {\n  readonly endWidth = input<string | null>(null);\n  readonly gap = input<string>('var(--fk-rhythm-4, 1rem)');\n\n  @HostBinding('class')\n  readonly hostClass = 'fk-content-split-layout';\n}\n","<div\n  class=\"fk-content-split-layout__row\"\n  [style.--fk-content-split-gap]=\"gap()\"\n>\n  <div class=\"fk-content-split-layout__start\">\n    <ng-content select=\"[start]\" />\n  </div>\n\n  <div\n    class=\"fk-content-split-layout__end\"\n    [class.fk-content-split-layout__end--fixed]=\"endWidth()\"\n    [style.--fk-content-split-end-width]=\"endWidth()\"\n  >\n    <ng-content select=\"[end]\" />\n  </div>\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\n/**\n * Responsive column layout for dashboard content. Lays projected children out\n * in equal-width columns that wrap — and ultimately collapse to a single\n * stacked column — based on the layout's *own* available width, never the\n * viewport. So it reacts correctly when the dashboard content region is\n * squeezed (sidenav open, a drawer pushed in, a split pane) while the viewport\n * still reports \"desktop\".\n *\n * Implemented with an intrinsic CSS grid — `repeat(auto-fit, minmax(min, 1fr))`\n * — so there is no container query, no JS, and no viewport breakpoint to keep\n * in sync. `minColumnWidth` is the smallest a column may shrink to before the\n * grid drops a column; empty tracks collapse, so N children never produce more\n * than N columns. Spacing on both axes is a single `gutter` gap, so wrapped\n * rows and side-by-side columns separate consistently with no edge artifacts.\n *\n *   <fk-columns minColumnWidth=\"18rem\">\n *     <fk-field-group>…</fk-field-group>\n *     <fk-field-group>…</fk-field-group>\n *   </fk-columns>\n */\n@Component({\n  selector: 'fk-columns',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './columns.component.html',\n  styleUrl: './columns.component.scss',\n})\nexport class ColumnsComponent {\n  // ===== INPUTS =====\n  /**\n   * The smallest width a column may shrink to before the grid drops to fewer\n   * columns. This is the single knob that controls when columns wrap/stack.\n   */\n  readonly minColumnWidth = input<string>('16rem');\n  /** Gap between side-by-side columns and between wrapped rows. */\n  readonly gutter = input<string>('var(--fk-rhythm-4, 1rem)');\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    ['fk-columns', this.className()].filter(Boolean).join(' '),\n  );\n\n  @HostBinding('class')\n  get hostClass(): string {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel(): string | null {\n    return this.ariaLabel();\n  }\n\n  @HostBinding('style.--fk-columns-min')\n  get hostMin(): string {\n    return this.minColumnWidth();\n  }\n\n  @HostBinding('style.--fk-columns-gutter')\n  get hostGutter(): string {\n    return this.gutter();\n  }\n}\n","<ng-content />\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\n/**\n * Padded container for an expanded dashboard detail region — typically the body\n * of a data-table row expansion, holding an `fk-columns` of form controls.\n *\n * The `disabled` input greys the panel and makes its entire subtree `inert`\n * (non-interactive, unfocusable, hidden from assistive technology) — for\n * controls gated behind a feature toggle that must not be editable until the\n * feature is enabled.\n *\n *   <fk-detail-panel [disabled]=\"!feature.enabled\">\n *     <fk-columns>…</fk-columns>\n *   </fk-detail-panel>\n */\n@Component({\n  selector: 'fk-detail-panel',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './detail-panel.component.html',\n  styleUrl: './detail-panel.component.scss',\n})\nexport class DetailPanelComponent {\n  // ===== INPUTS =====\n  /**\n   * Greys the panel and makes its content inert (locked) — for feature-gated\n   * controls that should not be editable until the feature is enabled.\n   */\n  readonly disabled = input<boolean>(false);\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    [\n      'fk-detail-panel',\n      this.disabled() ? 'fk-detail-panel--disabled' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  @HostBinding('class')\n  get hostClass(): string {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel(): string | null {\n    return this.ariaLabel();\n  }\n\n  /**\n   * Lock the whole subtree when disabled. `inert` blocks pointer interaction,\n   * focus, and assistive-tech access in one attribute — stronger and more\n   * correct than `pointer-events: none`, which only blocks the mouse.\n   */\n  @HostBinding('attr.inert')\n  get hostInert(): '' | null {\n    return this.disabled() ? '' : null;\n  }\n}\n","<ng-content />\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-patterns-docs.mjs

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';
+
+/**
+ * Small rectangular badge showing an HTTP method label (e.g. `GET`, `POST`).
+ *
+ * Each method has its own hue so consumers can identify the verb in a dense
+ * list. Background colors are exposed as CSS variables
+ * (`--fk-method-badge-bg-get`, etc.) with defaults baked in so the component
+ * renders correctly without a theme.
+ */
+class MethodBadgeComponent {
+    // ===== INPUTS =====
+    method = input.required(...(ngDevMode ? [{ debugName: "method" }] : /* 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(() => ['fk-method-badge', `fk-method-badge--${this.method()}`, this.className()]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.method().toUpperCase(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MethodBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MethodBadgeComponent, isStandalone: true, selector: "fk-method-badge", inputs: { method: { classPropertyName: "method", publicName: "method", isSignal: true, isRequired: true, 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" } }, ngImport: i0, template: "<span\n  class=\"fk-method-badge__label\"\n  [id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  >{{ label() }}</span\n>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fk-method-badge-min-width, 3rem);padding:var(--fk-method-badge-padding-block, 2px) var(--fk-method-badge-padding-inline, var(--fk-rhythm-2, .5rem));border-radius:var(--fk-method-badge-radius, var(--fk-radius-sm, .25rem));background-color:var(--fk-method-badge-bg, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color, var(--fk-color-text, #1f2d3d));font-family:var(--fk-method-badge-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace));font-size:var(--fk-method-badge-font-size, .6875rem);font-weight:var(--fk-method-badge-font-weight, var(--fk-font-weight-bold, 700));letter-spacing:.05em;line-height:1.4;text-transform:uppercase}:host.fk-method-badge--get{background-color:var(--fk-method-badge-bg-get, #89ecac);color:var(--fk-method-badge-color-get, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--post{background-color:var(--fk-method-badge-bg-post, #94c4fd);color:var(--fk-method-badge-color-post, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--put{background-color:var(--fk-method-badge-bg-put, #fbb972);color:var(--fk-method-badge-color-put, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--patch{background-color:var(--fk-method-badge-bg-patch, #c8a7fb);color:var(--fk-method-badge-color-patch, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--delete{background-color:var(--fk-method-badge-bg-delete, #fb8d8d);color:var(--fk-method-badge-color-delete, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--head{background-color:var(--fk-method-badge-bg-head, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-head, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--options{background-color:var(--fk-method-badge-bg-options, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-options, var(--fk-color-text, #1f2d3d))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MethodBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-method-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"fk-method-badge__label\"\n  [id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  >{{ label() }}</span\n>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fk-method-badge-min-width, 3rem);padding:var(--fk-method-badge-padding-block, 2px) var(--fk-method-badge-padding-inline, var(--fk-rhythm-2, .5rem));border-radius:var(--fk-method-badge-radius, var(--fk-radius-sm, .25rem));background-color:var(--fk-method-badge-bg, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color, var(--fk-color-text, #1f2d3d));font-family:var(--fk-method-badge-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace));font-size:var(--fk-method-badge-font-size, .6875rem);font-weight:var(--fk-method-badge-font-weight, var(--fk-font-weight-bold, 700));letter-spacing:.05em;line-height:1.4;text-transform:uppercase}:host.fk-method-badge--get{background-color:var(--fk-method-badge-bg-get, #89ecac);color:var(--fk-method-badge-color-get, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--post{background-color:var(--fk-method-badge-bg-post, #94c4fd);color:var(--fk-method-badge-color-post, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--put{background-color:var(--fk-method-badge-bg-put, #fbb972);color:var(--fk-method-badge-color-put, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--patch{background-color:var(--fk-method-badge-bg-patch, #c8a7fb);color:var(--fk-method-badge-color-patch, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--delete{background-color:var(--fk-method-badge-bg-delete, #fb8d8d);color:var(--fk-method-badge-color-delete, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--head{background-color:var(--fk-method-badge-bg-head, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-head, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--options{background-color:var(--fk-method-badge-bg-options, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-options, var(--fk-color-text, #1f2d3d))}\n"] }]
+        }], propDecorators: { method: [{ type: i0.Input, args: [{ isSignal: true, alias: "method", required: true }] }], 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']
+            }] } });
+
+/**
+ * Sidebar/list item for an API endpoint in developer documentation.
+ *
+ * Renders a leading `fk-method-badge` followed by the endpoint label as a
+ * single clickable router link. Used to list operations (e.g. "GET List
+ * permissions", "POST Create identity") in a documentation sidebar or any
+ * denser endpoint index.
+ *
+ * Active state is driven by `routerLinkActive`, matching the behavior of
+ * `fk-sidenav-link` so every router-aware nav item in the library resolves
+ * active state the same way.
+ *
+ * When rendered inside an `fk-app-shell`, clicks also call `dismissSidenav`
+ * on the ancestor shell — this closes the mobile overlay so the user lands
+ * directly on the selected endpoint. On desktop it's a no-op.
+ */
+class EndpointLinkComponent {
+    shell = inject(AppShellComponent, { optional: true });
+    // ===== INPUTS =====
+    method = input.required(...(ngDevMode ? [{ debugName: "method" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    routerLink = input.required(...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to require an exact URL match for the active state. Defaults to
+     * false — each endpoint has a unique final path segment so prefix matching
+     * resolves to the same thing in practice.
+     */
+    exact = input(false, ...(ngDevMode ? [{ debugName: "exact" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => ['fk-endpoint-link', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    activeOptions = computed(() => ({ exact: this.exact() }), ...(ngDevMode ? [{ debugName: "activeOptions" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    dismiss() {
+        this.shell?.dismissSidenav();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EndpointLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: EndpointLinkComponent, isStandalone: true, selector: "fk-endpoint-link", inputs: { method: { classPropertyName: "method", publicName: "method", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: true, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<a\n  class=\"fk-endpoint-link__anchor\"\n  [routerLink]=\"routerLink()\"\n  routerLinkActive=\"fk-endpoint-link__anchor--active\"\n  [routerLinkActiveOptions]=\"activeOptions()\"\n  (click)=\"$event.stopPropagation(); dismiss()\"\n>\n  <fk-method-badge [method]=\"method()\" class=\"fk-endpoint-link__badge\" />\n  <span class=\"fk-endpoint-link__label\">{{ label() }}</span>\n</a>\n", styles: [".fk-endpoint-link{display:block}.fk-endpoint-link__anchor{display:flex;align-items:center;gap:var(--fk-endpoint-link-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-endpoint-link-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-endpoint-link-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-endpoint-link-radius, var(--fk-radius-md, .5rem));color:var(--fk-endpoint-link-color, var(--fk-color-text, #1f2d3d));font-size:var(--fk-endpoint-link-font-size, .875rem);line-height:1.4;text-decoration:none;transition:background-color .15s ease}.fk-endpoint-link__anchor:hover{background-color:var(--fk-endpoint-link-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}.fk-endpoint-link__anchor:focus-visible{outline:none;box-shadow:var(--fk-endpoint-link-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-endpoint-link__anchor--active,.fk-endpoint-link__anchor--active:hover{background-color:var(--fk-endpoint-link-bg-active, var(--fk-color-primary-light, #dbeafe));color:var(--fk-endpoint-link-color-active, var(--fk-color-primary, #1e3a8a));font-weight:var(--fk-endpoint-link-font-weight-active, var(--fk-font-weight-semibold, 600))}.fk-endpoint-link__badge{flex-shrink:0}.fk-endpoint-link__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MethodBadgeComponent, selector: "fk-method-badge", inputs: ["method", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EndpointLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-endpoint-link', standalone: true, imports: [RouterLink, RouterLinkActive, MethodBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"fk-endpoint-link__anchor\"\n  [routerLink]=\"routerLink()\"\n  routerLinkActive=\"fk-endpoint-link__anchor--active\"\n  [routerLinkActiveOptions]=\"activeOptions()\"\n  (click)=\"$event.stopPropagation(); dismiss()\"\n>\n  <fk-method-badge [method]=\"method()\" class=\"fk-endpoint-link__badge\" />\n  <span class=\"fk-endpoint-link__label\">{{ label() }}</span>\n</a>\n", styles: [".fk-endpoint-link{display:block}.fk-endpoint-link__anchor{display:flex;align-items:center;gap:var(--fk-endpoint-link-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-endpoint-link-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-endpoint-link-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-endpoint-link-radius, var(--fk-radius-md, .5rem));color:var(--fk-endpoint-link-color, var(--fk-color-text, #1f2d3d));font-size:var(--fk-endpoint-link-font-size, .875rem);line-height:1.4;text-decoration:none;transition:background-color .15s ease}.fk-endpoint-link__anchor:hover{background-color:var(--fk-endpoint-link-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}.fk-endpoint-link__anchor:focus-visible{outline:none;box-shadow:var(--fk-endpoint-link-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-endpoint-link__anchor--active,.fk-endpoint-link__anchor--active:hover{background-color:var(--fk-endpoint-link-bg-active, var(--fk-color-primary-light, #dbeafe));color:var(--fk-endpoint-link-color-active, var(--fk-color-primary, #1e3a8a));font-weight:var(--fk-endpoint-link-font-weight-active, var(--fk-font-weight-semibold, 600))}.fk-endpoint-link__badge{flex-shrink:0}.fk-endpoint-link__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { method: [{ type: i0.Input, args: [{ isSignal: true, alias: "method", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: true }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EndpointLinkComponent, MethodBadgeComponent };
+//# sourceMappingURL=frame-kit-ui-ng-patterns-docs.mjs.map

package/fesm2022/frame-kit-ui-ng-patterns-docs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-patterns-docs.mjs","sources":["../../../../packages/ui-ng-patterns/docs/method-badge/method-badge.component.ts","../../../../packages/ui-ng-patterns/docs/method-badge/method-badge.component.html","../../../../packages/ui-ng-patterns/docs/endpoint-link/endpoint-link.component.ts","../../../../packages/ui-ng-patterns/docs/endpoint-link/endpoint-link.component.html","../../../../packages/ui-ng-patterns/docs/frame-kit-ui-ng-patterns-docs.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { MethodBadgeMethod } from './method-badge.types';\n\n/**\n * Small rectangular badge showing an HTTP method label (e.g. `GET`, `POST`).\n *\n * Each method has its own hue so consumers can identify the verb in a dense\n * list. Background colors are exposed as CSS variables\n * (`--fk-method-badge-bg-get`, etc.) with defaults baked in so the component\n * renders correctly without a theme.\n */\n@Component({\n  selector: 'fk-method-badge',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './method-badge.component.html',\n  styleUrl: './method-badge.component.scss',\n})\nexport class MethodBadgeComponent {\n  // ===== INPUTS =====\n  readonly method = input.required<MethodBadgeMethod>();\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    ['fk-method-badge', `fk-method-badge--${this.method()}`, this.className()]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  readonly label = computed(() => this.method().toUpperCase());\n\n  @HostBinding('class')\n  get hostClass(): string {\n    return this.classes();\n  }\n}\n","<span\n  class=\"fk-method-badge__label\"\n  [id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  >{{ label() }}</span\n>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  inject,\n  input,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';\nimport { MethodBadgeComponent } from '../method-badge/method-badge.component';\nimport type { MethodBadgeMethod } from '../method-badge/method-badge.types';\n\n/**\n * Sidebar/list item for an API endpoint in developer documentation.\n *\n * Renders a leading `fk-method-badge` followed by the endpoint label as a\n * single clickable router link. Used to list operations (e.g. \"GET List\n * permissions\", \"POST Create identity\") in a documentation sidebar or any\n * denser endpoint index.\n *\n * Active state is driven by `routerLinkActive`, matching the behavior of\n * `fk-sidenav-link` so every router-aware nav item in the library resolves\n * active state the same way.\n *\n * When rendered inside an `fk-app-shell`, clicks also call `dismissSidenav`\n * on the ancestor shell — this closes the mobile overlay so the user lands\n * directly on the selected endpoint. On desktop it's a no-op.\n */\n@Component({\n  selector: 'fk-endpoint-link',\n  standalone: true,\n  imports: [RouterLink, RouterLinkActive, MethodBadgeComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './endpoint-link.component.html',\n  styleUrl: './endpoint-link.component.scss',\n})\nexport class EndpointLinkComponent {\n  private readonly shell = inject(AppShellComponent, { optional: true });\n\n  // ===== INPUTS =====\n  readonly method = input.required<MethodBadgeMethod>();\n  readonly label = input.required<string>();\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  readonly routerLink = input.required<string | any[]>();\n\n  /**\n   * Whether to require an exact URL match for the active state. Defaults to\n   * false — each endpoint has a unique final path segment so prefix matching\n   * resolves to the same thing in practice.\n   */\n  readonly exact = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() =>\n    ['fk-endpoint-link', this.className()].filter(Boolean).join(' '),\n  );\n\n  readonly activeOptions = computed(() => ({ exact: this.exact() }));\n\n  @HostBinding('class')\n  get hostClass(): string {\n    return this.classes();\n  }\n\n  protected dismiss(): void {\n    this.shell?.dismissSidenav();\n  }\n}\n","<a\n  class=\"fk-endpoint-link__anchor\"\n  [routerLink]=\"routerLink()\"\n  routerLinkActive=\"fk-endpoint-link__anchor--active\"\n  [routerLinkActiveOptions]=\"activeOptions()\"\n  (click)=\"$event.stopPropagation(); dismiss()\"\n>\n  <fk-method-badge [method]=\"method()\" class=\"fk-endpoint-link__badge\" />\n  <span class=\"fk-endpoint-link__label\">{{ label() }}</span>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAUA;;;;;;;AAOG;MASU,oBAAoB,CAAA;;AAEtB,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAqB;;AAG5C,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;IAGtC,OAAO,GAAG,QAAQ,CAAC,MAC1B,CAAC,iBAAiB,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,EAAE,CAAA,CAAE,EAAE,IAAI,CAAC,SAAS,EAAE;SACtE,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACb;AAEQ,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,4EAAC;AAE5D,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;uGArBW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,6nBC1BjC,2IAMA,EAAA,MAAA,EAAA,CAAA,k6DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDoBa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,cACf,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2IAAA,EAAA,MAAA,EAAA,CAAA,k6DAAA,CAAA,EAAA;;sBAsB9C,WAAW;uBAAC,OAAO;;;AE9BtB;;;;;;;;;;;;;;;AAeG;MASU,qBAAqB,CAAA;IACf,KAAK,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;AAG7D,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAqB;AAC5C,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,IAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,gFAAkB;AAEtD;;;;AAIG;AACM,IAAA,KAAK,GAAG,KAAK,CAAU,KAAK,4EAAC;;AAG7B,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;IAG7B,OAAO,GAAG,QAAQ,CAAC,MAC1B,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACjE;AAEQ,IAAA,aAAa,GAAG,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,oFAAC;AAElE,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;IAEU,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE;IAC9B;uGAlCW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,gwBCtClC,kYAUA,EAAA,MAAA,EAAA,CAAA,myCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDuBY,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,8MAAE,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,WAAA,EAAA,IAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKjD,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,OAAA,EACP,CAAC,UAAU,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,EAAA,eAAA,EAC5C,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kYAAA,EAAA,MAAA,EAAA,CAAA,myCAAA,CAAA,EAAA;;sBA+B9C,WAAW;uBAAC,OAAO;;;AEjEtB;;AAEG;;;;"}

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

@@ -0,0 +1,13 @@
+export * from '@frame-kit/ui-ng-patterns/dashboard';
+export * from '@frame-kit/ui-ng-patterns/docs';
+
+// @frame-kit/ui-ng-patterns
+//
+// Opinionated, dashboard-ready components composed from @frame-kit/ui-ng primitives.
+// Most components get their own secondary entry point (packages/ui-ng-patterns/<area>/<name>/).
+// The docs/ and dashboard/ layers are single entry points, like forms/ in ui-ng.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=frame-kit-ui-ng-patterns.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-patterns.mjs","sources":["../../../../packages/ui-ng-patterns/index.ts","../../../../packages/ui-ng-patterns/frame-kit-ui-ng-patterns.ts"],"sourcesContent":["// @frame-kit/ui-ng-patterns\n//\n// Opinionated, dashboard-ready components composed from @frame-kit/ui-ng primitives.\n// Most components get their own secondary entry point (packages/ui-ng-patterns/<area>/<name>/).\n// The docs/ and dashboard/ layers are single entry points, like forms/ in ui-ng.\n\nexport * from '@frame-kit/ui-ng-patterns/dashboard';\nexport * from '@frame-kit/ui-ng-patterns/docs';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;;ACJA;;AAEG"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@frame-kit/ui-ng-patterns",
+  "version": "0.0.2",
+  "description": "Opinionated, dashboard-ready Angular component patterns composed from @frame-kit/ui-ng.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frame-kit/packages.git",
+    "directory": "packages/ui-ng-patterns"
+  },
+  "homepage": "https://github.com/frame-kit/packages/tree/main/packages/ui-ng-patterns#readme",
+  "bugs": "https://github.com/frame-kit/packages/issues",
+  "peerDependencies": {
+    "@angular/cdk": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@frame-kit/ui-ng": "^0.0.2",
+    "rxjs": "^7.0.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/frame-kit-ui-ng-patterns.mjs",
+  "typings": "types/frame-kit-ui-ng-patterns.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/frame-kit-ui-ng-patterns.d.ts",
+      "default": "./fesm2022/frame-kit-ui-ng-patterns.mjs"
+    },
+    "./dashboard": {
+      "types": "./types/frame-kit-ui-ng-patterns-dashboard.d.ts",
+      "default": "./fesm2022/frame-kit-ui-ng-patterns-dashboard.mjs"
+    },
+    "./docs": {
+      "types": "./types/frame-kit-ui-ng-patterns-docs.d.ts",
+      "default": "./fesm2022/frame-kit-ui-ng-patterns-docs.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/frame-kit-ui-ng-patterns-dashboard.d.ts

@@ -0,0 +1,173 @@
+import * as _angular_core from '@angular/core';
+import { HeadlineLevel } from '@frame-kit/ui-ng/core/headline';
+
+/**
+ * Page-level dashboard header: title + optional description on the left, up to
+ * ~3 actions on the right.
+ *
+ * When the header's own width gets tight, the actions drop below the text and
+ * go full-width (mobile-style). The break is driven by a CSS container query on
+ * the host, so it responds to the content region's width — not the viewport,
+ * which means it behaves correctly inside a narrow panel.
+ *
+ * Project actions by tagging each button with `pageHeaderActions`:
+ *
+ *   <fk-page-header title="Users" description="...">
+ *     <fk-button pageHeaderActions variant="outline" size="sm">Import</fk-button>
+ *     <fk-button pageHeaderActions variant="primary" size="sm">Create user</fk-button>
+ *   </fk-page-header>
+ *
+ * Tagging each button (rather than wrapping them in a div) makes every button a
+ * direct flex child, so full-width stacking falls out of `align-items: stretch`
+ * with no `::ng-deep` reach-in.
+ *
+ * The title row has two projected slots — `[pageHeaderLeading]` before the
+ * title and `[pageHeaderTrailing]` after it. Project a plain `fk-icon` for a
+ * decorative mark, or a `button` for a clickable one (the consumer owns the
+ * interaction, focus ring, and aria-label):
+ *
+ *   <fk-page-header title="Permissions">
+ *     <fk-icon pageHeaderLeading name="key-outline" />
+ *     <button pageHeaderTrailing type="button" aria-label="Docs" (click)="openDocs()">
+ *       <fk-icon name="view-api" />
+ *     </button>
+ *   </fk-page-header>
+ */
+declare class PageHeaderComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | null>;
+    readonly headingLevel: _angular_core.InputSignal<HeadlineLevel>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "fk-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["[pageHeaderLeading]", "[pageHeaderTrailing]", "[pageHeaderActions]"], true, never>;
+}
+
+/**
+ * Empty-state panel for dashboard tables and lists: a centered icon, a title,
+ * an optional description, and a projected actions slot (typically one primary
+ * fk-button). Bordered-card styling, meant to stand in for a table body when
+ * there are no rows.
+ *
+ * The action row flips from a horizontal row to a centered vertical stack on
+ * narrow widths, driven by a container query on the host — so it reacts to the
+ * empty-state's own width (e.g. inside a split column) rather than the viewport.
+ *
+ *   <fk-table-empty-state
+ *     icon="globe"
+ *     title="No webhooks configured"
+ *     description="Add a webhook to receive events."
+ *   >
+ *     <fk-button variant="primary" size="sm">Add webhook</fk-button>
+ *   </fk-table-empty-state>
+ *
+ * The actions slot is an open `ng-content`, so project as many actions as the
+ * design needs (one primary is the norm; two reads cleanly).
+ */
+declare class TableEmptyStateComponent {
+    readonly icon: _angular_core.InputSignal<string | null>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableEmptyStateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableEmptyStateComponent, "fk-table-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Two-column split layout with container-query responsive stacking.
+ *
+ * Projects content into `[start]` (grows to fill) and `[end]` (content-sized or
+ * fixed width). Below 700px container width, columns stack vertically.
+ *
+ * A standalone layout primitive for custom dashboard rows.
+ */
+declare class ContentSplitLayoutComponent {
+    readonly endWidth: _angular_core.InputSignal<string | null>;
+    readonly gap: _angular_core.InputSignal<string>;
+    readonly hostClass = "fk-content-split-layout";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentSplitLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSplitLayoutComponent, "fk-content-split-layout", never, { "endWidth": { "alias": "endWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[start]", "[end]"], true, never>;
+}
+
+/**
+ * Responsive column layout for dashboard content. Lays projected children out
+ * in equal-width columns that wrap — and ultimately collapse to a single
+ * stacked column — based on the layout's *own* available width, never the
+ * viewport. So it reacts correctly when the dashboard content region is
+ * squeezed (sidenav open, a drawer pushed in, a split pane) while the viewport
+ * still reports "desktop".
+ *
+ * Implemented with an intrinsic CSS grid — `repeat(auto-fit, minmax(min, 1fr))`
+ * — so there is no container query, no JS, and no viewport breakpoint to keep
+ * in sync. `minColumnWidth` is the smallest a column may shrink to before the
+ * grid drops a column; empty tracks collapse, so N children never produce more
+ * than N columns. Spacing on both axes is a single `gutter` gap, so wrapped
+ * rows and side-by-side columns separate consistently with no edge artifacts.
+ *
+ *   <fk-columns minColumnWidth="18rem">
+ *     <fk-field-group>…</fk-field-group>
+ *     <fk-field-group>…</fk-field-group>
+ *   </fk-columns>
+ */
+declare class ColumnsComponent {
+    /**
+     * The smallest width a column may shrink to before the grid drops to fewer
+     * columns. This is the single knob that controls when columns wrap/stack.
+     */
+    readonly minColumnWidth: _angular_core.InputSignal<string>;
+    /** Gap between side-by-side columns and between wrapped rows. */
+    readonly gutter: _angular_core.InputSignal<string>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    get hostMin(): string;
+    get hostGutter(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColumnsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColumnsComponent, "fk-columns", never, { "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "gutter": { "alias": "gutter"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Padded container for an expanded dashboard detail region — typically the body
+ * of a data-table row expansion, holding an `fk-columns` of form controls.
+ *
+ * The `disabled` input greys the panel and makes its entire subtree `inert`
+ * (non-interactive, unfocusable, hidden from assistive technology) — for
+ * controls gated behind a feature toggle that must not be editable until the
+ * feature is enabled.
+ *
+ *   <fk-detail-panel [disabled]="!feature.enabled">
+ *     <fk-columns>…</fk-columns>
+ *   </fk-detail-panel>
+ */
+declare class DetailPanelComponent {
+    /**
+     * Greys the panel and makes its content inert (locked) — for feature-gated
+     * controls that should not be editable until the feature is enabled.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    /**
+     * Lock the whole subtree when disabled. `inert` blocks pointer interaction,
+     * focus, and assistive-tech access in one attribute — stronger and more
+     * correct than `pointer-events: none`, which only blocks the mouse.
+     */
+    get hostInert(): '' | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DetailPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DetailPanelComponent, "fk-detail-panel", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { ColumnsComponent, ContentSplitLayoutComponent, DetailPanelComponent, PageHeaderComponent, TableEmptyStateComponent };

package/types/frame-kit-ui-ng-patterns-docs.d.ts

@@ -0,0 +1,68 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Supported HTTP methods for `fk-method-badge`. Lowercased to match OpenAPI
+ * conventions so consumers can pass spec values directly without translation.
+ */
+type MethodBadgeMethod = 'get' | 'post' | 'put' | 'patch' | 'delete' | 'head' | 'options';
+
+/**
+ * Sidebar/list item for an API endpoint in developer documentation.
+ *
+ * Renders a leading `fk-method-badge` followed by the endpoint label as a
+ * single clickable router link. Used to list operations (e.g. "GET List
+ * permissions", "POST Create identity") in a documentation sidebar or any
+ * denser endpoint index.
+ *
+ * Active state is driven by `routerLinkActive`, matching the behavior of
+ * `fk-sidenav-link` so every router-aware nav item in the library resolves
+ * active state the same way.
+ *
+ * When rendered inside an `fk-app-shell`, clicks also call `dismissSidenav`
+ * on the ancestor shell — this closes the mobile overlay so the user lands
+ * directly on the selected endpoint. On desktop it's a no-op.
+ */
+declare class EndpointLinkComponent {
+    private readonly shell;
+    readonly method: _angular_core.InputSignal<MethodBadgeMethod>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly routerLink: _angular_core.InputSignal<string | any[]>;
+    /**
+     * Whether to require an exact URL match for the active state. Defaults to
+     * false — each endpoint has a unique final path segment so prefix matching
+     * resolves to the same thing in practice.
+     */
+    readonly exact: _angular_core.InputSignal<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    readonly activeOptions: _angular_core.Signal<{
+        exact: boolean;
+    }>;
+    get hostClass(): string;
+    protected dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EndpointLinkComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EndpointLinkComponent, "fk-endpoint-link", never, { "method": { "alias": "method"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": true; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Small rectangular badge showing an HTTP method label (e.g. `GET`, `POST`).
+ *
+ * Each method has its own hue so consumers can identify the verb in a dense
+ * list. Background colors are exposed as CSS variables
+ * (`--fk-method-badge-bg-get`, etc.) with defaults baked in so the component
+ * renders correctly without a theme.
+ */
+declare class MethodBadgeComponent {
+    readonly method: _angular_core.InputSignal<MethodBadgeMethod>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    readonly label: _angular_core.Signal<string>;
+    get hostClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MethodBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MethodBadgeComponent, "fk-method-badge", never, { "method": { "alias": "method"; "required": true; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { EndpointLinkComponent, MethodBadgeComponent };
+export type { MethodBadgeMethod as EndpointLinkMethod, MethodBadgeMethod };

package/types/frame-kit-ui-ng-patterns.d.ts

@@ -0,0 +1,2 @@
+export * from '@frame-kit/ui-ng-patterns/dashboard';
+export * from '@frame-kit/ui-ng-patterns/docs';