@frame-kit/ui-ng 0.0.1 → 0.0.2

package/COMPONENTS.md

@@ -2,7 +2,7 @@
 
 FrameKit UI-ng is a token-driven Angular component library that provides a consistent set of building blocks for data entry, layout, navigation, and complex form workflows, all designed to be themeable via `--fk-*` design tokens.
 
-Organized by **purpose** (not Atomic Design) into seven layers with strict dependency rules — see [the development guide](./DEVELOPMENT_GUIDE.md) for the architecture overview.
+Organized by **purpose** (not Atomic Design) into six layers with strict dependency rules — see [the development guide](./DEVELOPMENT_GUIDE.md) for the architecture overview.
 
 ---
 
@@ -104,11 +104,6 @@ Organized by **purpose** (not Atomic Design) into seven layers with strict depen
 - [fk-app-shell](#fk-app-shell)
 - [fk-content-split](#fk-content-split)
 
-### Docs — API-reference UI
-
-- [fk-endpoint-link](#fk-endpoint-link)
-- [fk-method-badge](#fk-method-badge)
-
 ---
 
 ## Core
@@ -663,21 +658,3 @@ Coordinates a single global "active key" with reference-counted holders, so unre
 
 Global notification queue. Severity helpers (`success` / `error` / `warning` / `info`) for default toasts, plus `open()` for custom-component toasts with embedded actions like retry buttons.
 [README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/services/toast/README.md)
-
----
-
-## Docs
-
----
-
-### fk-endpoint-link
-
-A sidebar row for an API endpoint in developer documentation — pairs an HTTP method badge with the endpoint path.
-[README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/docs/endpoint-link/README.md)
-
----
-
-### fk-method-badge
-
-A token-driven HTTP method badge for developer documentation — a colored GET/POST/PUT/DELETE pill.
-[README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/docs/method-badge/README.md)

package/DEVELOPMENT_GUIDE.md

@@ -47,7 +47,6 @@ packages/ui-ng/
   core/          — raw primitives, no other lib component deps (icon, text, headline, link, image, separator)
   ui/            — composed reusable UI (button, dialog, drawer, toast, tabs, data-table, etc.)
   directives/    — standalone behavior directives (tooltip, infinite-scroll, spotlight)
-  docs/          — API-reference UI (endpoint-link, method-badge)
   forms/         — self-contained form system; packaged as ONE entry point (holds its own primitives)
     engine/      — schema parser, field registry, validation, error messages, field state
     fields/      — 16 form-field components (input, select, checkbox, etc.)
@@ -61,7 +60,7 @@ packages/ui-ng/
 **Dependency rules:**
 
 - `core` imports nothing from the lib.
-- `ui`, `directives`, and `docs` may use `core` and `services`.
+- `ui` and `directives` may use `core` and `services`.
 - `forms` may use `core`, `ui`, `directives`, and `services`.
 - `layouts` may use anything; nothing imports from `layouts`.
 
@@ -100,7 +99,7 @@ See [Public API Exports](#public-api-exports) for the files each new component m
 
 ## Folder and File Structure
 
-Every component must have this exact file set, placed in the correct layer (`core/`, `ui/`, `directives/`, `docs/`, `forms/{engine,fields,composition}/`, `layouts/`):
+Every component must have this exact file set, placed in the correct layer (`core/`, `ui/`, `directives/`, `forms/{engine,fields,composition}/`, `layouts/`):
 
 ```
 packages/ui-ng/<layer>/<name>/
@@ -970,7 +969,7 @@ There are two levels of barrel: the component's own entry-point `index.ts`, and
 
 ### Adding a new component to the public API
 
-For a component in `core/ui/directives/docs/layouts/services` (its own entry point):
+For a component in `core/ui/directives/layouts/services` (its own entry point):
 
 1. **Write the entry-point `index.ts`** in the component folder, exporting its public files:
 
@@ -1036,7 +1035,7 @@ Before a component can be merged, every item must be checked:
 
 ### Structure
 
-- [ ] Placed in the correct layer (`core/`, `ui/`, `directives/`, `docs/`, `forms/{engine,fields,composition}/`, or `layouts/`) following the dependency rules
+- [ ] Placed in the correct layer (`core/`, `ui/`, `directives/`, `forms/{engine,fields,composition}/`, or `layouts/`) following the dependency rules
 - [ ] All required files present (`.ts`, `.html`, `.scss`, `.spec.ts`, `.stories.ts`, `.types.ts`, `README.md`)
 - [ ] Entry-point files present (`index.ts` + `ng-package.json`) — for non-`forms` layers; `forms` components are added to the forms sub-barrels instead
 - [ ] Cross-component imports use the `@frame-kit/ui-ng/<layer>/<name>` package path, never a relative `../` across an entry-point boundary

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

@@ -11,6 +11,8 @@ class CardComponent {
     transparent = input(false, ...(ngDevMode ? [{ debugName: "transparent" }] : /* istanbul ignore next */ []));
     /** When true, the card has no border or shadow. */
     borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
+    /** When true, the card clips projected content to its rounded corners (`overflow: hidden`). Use for flush media or tables so their square corners don't poke past the card's radius. Opt-in, since it would also clip intentionally-overflowing content like menus or shadows. */
+    clip = input(false, ...(ngDevMode ? [{ debugName: "clip" }] : /* istanbul ignore next */ []));
     // ===== BASE PROPS =====
     className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
@@ -25,6 +27,7 @@ class CardComponent {
             `fk-card--align-${this.align()}`,
             this.transparent() ? 'fk-card--transparent' : '',
             this.borderless() ? 'fk-card--borderless' : '',
+            this.clip() ? 'fk-card--clip' : '',
             this.className(),
         ]
             .filter(Boolean)
@@ -43,12 +46,12 @@ class CardComponent {
         return this.ariaLabel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: CardComponent, isStandalone: true, selector: "fk-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.padding": "this.hostPadding", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--fk-card-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-card-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-card-border-radius, var(--fk-radius-lg, .75rem))}:host.fk-card--transparent{background-color:transparent}:host.fk-card--borderless{border-color:transparent}:host.fk-card--align-start{align-items:flex-start}:host.fk-card--align-center{align-items:center}:host.fk-card--align-end{align-items:flex-end}:host.fk-card--align-stretch{align-items:stretch}:host.fk-card--sm{padding:var(--fk-card-padding-sm, var(--fk-rhythm-4, 1rem))}:host.fk-card--md{padding:var(--fk-card-padding-md, var(--fk-rhythm-6, 1.5rem))}:host.fk-card--lg{padding:var(--fk-card-padding-lg, var(--fk-rhythm-8, 2rem))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: CardComponent, isStandalone: true, selector: "fk-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, clip: { classPropertyName: "clip", publicName: "clip", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.padding": "this.hostPadding", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--fk-card-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-card-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-card-border-radius, var(--fk-radius-lg, .75rem))}:host.fk-card--transparent{background-color:transparent}:host.fk-card--borderless{border-color:transparent}:host.fk-card--clip{overflow:hidden}:host.fk-card--align-start{align-items:flex-start}:host.fk-card--align-center{align-items:center}:host.fk-card--align-end{align-items:flex-end}:host.fk-card--align-stretch{align-items:stretch}:host.fk-card--sm{padding:var(--fk-card-padding-sm, var(--fk-rhythm-4, 1rem))}:host.fk-card--md{padding:var(--fk-card-padding-md, var(--fk-rhythm-6, 1.5rem))}:host.fk-card--lg{padding:var(--fk-card-padding-lg, var(--fk-rhythm-8, 2rem))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fk-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--fk-card-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-card-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-card-border-radius, var(--fk-radius-lg, .75rem))}:host.fk-card--transparent{background-color:transparent}:host.fk-card--borderless{border-color:transparent}:host.fk-card--align-start{align-items:flex-start}:host.fk-card--align-center{align-items:center}:host.fk-card--align-end{align-items:flex-end}:host.fk-card--align-stretch{align-items:stretch}:host.fk-card--sm{padding:var(--fk-card-padding-sm, var(--fk-rhythm-4, 1rem))}:host.fk-card--md{padding:var(--fk-card-padding-md, var(--fk-rhythm-6, 1.5rem))}:host.fk-card--lg{padding:var(--fk-card-padding-lg, var(--fk-rhythm-8, 2rem))}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", 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: [{
+            args: [{ selector: 'fk-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--fk-card-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-card-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-card-border-radius, var(--fk-radius-lg, .75rem))}:host.fk-card--transparent{background-color:transparent}:host.fk-card--borderless{border-color:transparent}:host.fk-card--clip{overflow:hidden}:host.fk-card--align-start{align-items:flex-start}:host.fk-card--align-center{align-items:center}:host.fk-card--align-end{align-items:flex-end}:host.fk-card--align-stretch{align-items:stretch}:host.fk-card--sm{padding:var(--fk-card-padding-sm, var(--fk-rhythm-4, 1rem))}:host.fk-card--md{padding:var(--fk-card-padding-md, var(--fk-rhythm-6, 1.5rem))}:host.fk-card--lg{padding:var(--fk-card-padding-lg, var(--fk-rhythm-8, 2rem))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], clip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clip", 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']
             }], hostPadding: [{

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

@@ -1 +1 @@
-{"version":3,"file":"frame-kit-ui-ng-ui-card.mjs","sources":["../../../../packages/ui-ng/ui/card/card.component.ts","../../../../packages/ui-ng/ui/card/card.component.html","../../../../packages/ui-ng/ui/card/frame-kit-ui-ng-ui-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { CardAlign, CardSize } from './card.types';\n\n@Component({\n  selector: 'fk-card',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n})\nexport class CardComponent {\n  // ===== INPUTS =====\n  /** Preset size that controls the card's internal padding; also accepts any valid CSS padding string for a custom size. */\n  readonly size = input<CardSize>('md');\n  /** Alignment of the card's content along the cross axis. */\n  readonly align = input<CardAlign>('stretch');\n  /** When true, the card has no background fill. */\n  readonly transparent = input<boolean>(false);\n  /** When true, the card has no border or shadow. */\n  readonly borderless = 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  private readonly sizePresets = ['sm', 'md', 'lg'];\n\n  readonly isCustomSize = computed(\n    () => !this.sizePresets.includes(this.size()),\n  );\n\n  readonly classes = computed(() => {\n    return [\n      'fk-card',\n      this.isCustomSize() ? '' : `fk-card--${this.size()}`,\n      `fk-card--align-${this.align()}`,\n      this.transparent() ? 'fk-card--transparent' : '',\n      this.borderless() ? 'fk-card--borderless' : '',\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.padding')\n  get hostPadding(): string | null {\n    return this.isCustomSize() ? this.size() : null;\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n}\n","<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAkBa,aAAa,CAAA;;;AAGf,IAAA,IAAI,GAAG,KAAK,CAAW,IAAI,2EAAC;;AAE5B,IAAA,KAAK,GAAG,KAAK,CAAY,SAAS,4EAAC;;AAEnC,IAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;;AAEnC,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;;AAGlC,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;IAG9B,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAExC,IAAA,YAAY,GAAG,QAAQ,CAC9B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,mFAC9C;AAEQ,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QAC/B,OAAO;YACL,SAAS;AACT,YAAA,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;AACpD,YAAA,CAAA,eAAA,EAAkB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE;YAChC,IAAI,CAAC,WAAW,EAAE,GAAG,sBAAsB,GAAG,EAAE;YAChD,IAAI,CAAC,UAAU,EAAE,GAAG,qBAAqB,GAAG,EAAE;YAC9C,IAAI,CAAC,SAAS,EAAE;AACjB;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;IACjD;AAEA,IAAA,IACI,MAAM,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,EAAE,EAAE;IAClB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;uGAtDW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,imCClB1B,kBACA,EAAA,MAAA,EAAA,CAAA,+xBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDiBa,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cACP,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,+xBAAA,CAAA,EAAA;;sBAwC9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,eAAe;;sBAK3B,WAAW;uBAAC,SAAS;;sBAKrB,WAAW;uBAAC,iBAAiB;;;AErEhC;;AAEG;;;;"}
+{"version":3,"file":"frame-kit-ui-ng-ui-card.mjs","sources":["../../../../packages/ui-ng/ui/card/card.component.ts","../../../../packages/ui-ng/ui/card/card.component.html","../../../../packages/ui-ng/ui/card/frame-kit-ui-ng-ui-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { CardAlign, CardSize } from './card.types';\n\n@Component({\n  selector: 'fk-card',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n})\nexport class CardComponent {\n  // ===== INPUTS =====\n  /** Preset size that controls the card's internal padding; also accepts any valid CSS padding string for a custom size. */\n  readonly size = input<CardSize>('md');\n  /** Alignment of the card's content along the cross axis. */\n  readonly align = input<CardAlign>('stretch');\n  /** When true, the card has no background fill. */\n  readonly transparent = input<boolean>(false);\n  /** When true, the card has no border or shadow. */\n  readonly borderless = input<boolean>(false);\n  /** When true, the card clips projected content to its rounded corners (`overflow: hidden`). Use for flush media or tables so their square corners don't poke past the card's radius. Opt-in, since it would also clip intentionally-overflowing content like menus or shadows. */\n  readonly clip = 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  private readonly sizePresets = ['sm', 'md', 'lg'];\n\n  readonly isCustomSize = computed(\n    () => !this.sizePresets.includes(this.size()),\n  );\n\n  readonly classes = computed(() => {\n    return [\n      'fk-card',\n      this.isCustomSize() ? '' : `fk-card--${this.size()}`,\n      `fk-card--align-${this.align()}`,\n      this.transparent() ? 'fk-card--transparent' : '',\n      this.borderless() ? 'fk-card--borderless' : '',\n      this.clip() ? 'fk-card--clip' : '',\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.padding')\n  get hostPadding(): string | null {\n    return this.isCustomSize() ? this.size() : null;\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n}\n","<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAkBa,aAAa,CAAA;;;AAGf,IAAA,IAAI,GAAG,KAAK,CAAW,IAAI,2EAAC;;AAE5B,IAAA,KAAK,GAAG,KAAK,CAAY,SAAS,4EAAC;;AAEnC,IAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;;AAEnC,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;;AAElC,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,2EAAC;;AAG5B,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;IAG9B,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAExC,IAAA,YAAY,GAAG,QAAQ,CAC9B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,mFAC9C;AAEQ,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QAC/B,OAAO;YACL,SAAS;AACT,YAAA,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;AACpD,YAAA,CAAA,eAAA,EAAkB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE;YAChC,IAAI,CAAC,WAAW,EAAE,GAAG,sBAAsB,GAAG,EAAE;YAChD,IAAI,CAAC,UAAU,EAAE,GAAG,qBAAqB,GAAG,EAAE;YAC9C,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,GAAG,EAAE;YAClC,IAAI,CAAC,SAAS,EAAE;AACjB;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;IACjD;AAEA,IAAA,IACI,MAAM,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,EAAE,EAAE;IAClB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;uGAzDW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,stCClB1B,kBACA,EAAA,MAAA,EAAA,CAAA,m0BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDiBa,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cACP,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,m0BAAA,CAAA,EAAA;;sBA2C9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,eAAe;;sBAK3B,WAAW;uBAAC,SAAS;;sBAKrB,WAAW;uBAAC,iBAAiB;;;AExEhC;;AAEG;;;;"}

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

@@ -7,8 +7,6 @@ export * from '@frame-kit/ui-ng/core/text';
 export * from '@frame-kit/ui-ng/directives/infinite-scroll';
 export * from '@frame-kit/ui-ng/directives/spotlight';
 export * from '@frame-kit/ui-ng/directives/tooltip';
-export * from '@frame-kit/ui-ng/docs/endpoint-link';
-export * from '@frame-kit/ui-ng/docs/method-badge';
 export * from '@frame-kit/ui-ng/forms';
 export * from '@frame-kit/ui-ng/layouts/app-shell';
 export * from '@frame-kit/ui-ng/layouts/content-split';

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

@@ -1 +1 @@
-{"version":3,"file":"frame-kit-ui-ng.mjs","sources":["../../../../packages/ui-ng/frame-kit-ui-ng.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}
+{"version":3,"file":"frame-kit-ui-ng.mjs","sources":["../../../../packages/ui-ng/frame-kit-ui-ng.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Style-agnostic, token-driven Angular UI component library for FrameKit.",
   "license": "MIT",
   "repository": {
@@ -69,14 +69,6 @@
       "types": "./types/frame-kit-ui-ng-directives-tooltip.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-directives-tooltip.mjs"
     },
-    "./docs/endpoint-link": {
-      "types": "./types/frame-kit-ui-ng-docs-endpoint-link.d.ts",
-      "default": "./fesm2022/frame-kit-ui-ng-docs-endpoint-link.mjs"
-    },
-    "./docs/method-badge": {
-      "types": "./types/frame-kit-ui-ng-docs-method-badge.d.ts",
-      "default": "./fesm2022/frame-kit-ui-ng-docs-method-badge.mjs"
-    },
     "./forms": {
       "types": "./types/frame-kit-ui-ng-forms.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-forms.mjs"
@@ -250,4 +242,4 @@
   "dependencies": {
     "tslib": "^2.3.0"
   }
-}
+}

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

@@ -12,6 +12,8 @@ declare class CardComponent {
     readonly transparent: _angular_core.InputSignal<boolean>;
     /** When true, the card has no border or shadow. */
     readonly borderless: _angular_core.InputSignal<boolean>;
+    /** When true, the card clips projected content to its rounded corners (`overflow: hidden`). Use for flush media or tables so their square corners don't poke past the card's radius. Opt-in, since it would also clip intentionally-overflowing content like menus or shadows. */
+    readonly clip: _angular_core.InputSignal<boolean>;
     readonly className: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string | null>;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
@@ -23,7 +25,7 @@ declare class CardComponent {
     get hostId(): string | null;
     get hostAriaLabel(): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "fk-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "fk-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "clip": { "alias": "clip"; "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 { CardComponent };

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

@@ -7,8 +7,6 @@ export * from '@frame-kit/ui-ng/core/text';
 export * from '@frame-kit/ui-ng/directives/infinite-scroll';
 export * from '@frame-kit/ui-ng/directives/spotlight';
 export * from '@frame-kit/ui-ng/directives/tooltip';
-export * from '@frame-kit/ui-ng/docs/endpoint-link';
-export * from '@frame-kit/ui-ng/docs/method-badge';
 export * from '@frame-kit/ui-ng/forms';
 export * from '@frame-kit/ui-ng/layouts/app-shell';
 export * from '@frame-kit/ui-ng/layouts/content-split';

package/ui/card/README.md

@@ -8,13 +8,16 @@ A token-driven container component for grouping related content with consistent
 
 ### Inputs
 
-| Input       | Type                                        | Default     | Description                                                    |
-| ----------- | ------------------------------------------- | ----------- | -------------------------------------------------------------- |
-| `size`      | `'sm' \| 'md' \| 'lg' \| string`            | `'md'`      | Padding preset or custom CSS value (e.g. `'3rem'`)             |
-| `align`     | `'start' \| 'center' \| 'end' \| 'stretch'` | `'stretch'` | Cross-axis alignment of projected content                      |
-| `className` | `string`                                    | `''`        | Additional CSS classes for the host element                    |
-| `id`        | `string \| null`                            | `null`      | Sets the `id` attribute on the host element                    |
-| `ariaLabel` | `string \| null`                            | `null`      | Sets `aria-label` on the host element for assistive technology |
+| Input         | Type                                        | Default     | Description                                                                                                              |
+| ------------- | ------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `size`        | `'sm' \| 'md' \| 'lg' \| string`            | `'md'`      | Padding preset or custom CSS value (e.g. `'3rem'`)                                                                       |
+| `align`       | `'start' \| 'center' \| 'end' \| 'stretch'` | `'stretch'` | Cross-axis alignment of projected content                                                                                |
+| `transparent` | `boolean`                                   | `false`     | Removes the background fill — for a card used purely as a layout primitive                                               |
+| `borderless`  | `boolean`                                   | `false`     | Removes the border — pair with `transparent` for a fully chromeless container                                            |
+| `clip`        | `boolean`                                   | `false`     | Clips projected content to the rounded corners (`overflow: hidden`). Use for flush media or tables so their square corners don't poke past the radius |
+| `className`   | `string`                                    | `''`        | Additional CSS classes for the host element                                                                              |
+| `id`          | `string \| null`                            | `null`      | Sets the `id` attribute on the host element                                                                              |
+| `ariaLabel`   | `string \| null`                            | `null`      | Sets `aria-label` on the host element for assistive technology                                                          |
 
 ### Outputs
 
@@ -121,6 +124,22 @@ export class ExampleComponent {}
 </fk-card>
 ```
 
+### Flush media or table (clipped to the radius)
+
+When projecting full-bleed content — an image, or a component that brings its
+own background like `fk-data-table` — set `size="0"` to drop the padding and
+`clip` so the content's square corners are clipped to the card's rounded
+border:
+
+```html
+<fk-card size="0" [clip]="true">
+  <img src="cover.jpg" alt="" style="width: 100%; display: block;" />
+</fk-card>
+```
+
+Without `clip`, the card has a `border-radius` but no overflow management, so
+the flush content renders square corners that poke past the rounded border.
+
 ---
 
 ## Accessibility
@@ -172,3 +191,4 @@ Or scope overrides to a specific context:
 - When `size` is a preset (`sm`, `md`, `lg`), padding is controlled via the corresponding token. When `size` is a custom string, it is applied directly as inline `padding`.
 - The card renders as a flex column container, so projected content flows vertically by default.
 - `align` controls `align-items` on the flex container, affecting horizontal alignment of children.
+- `clip` is opt-in rather than always-on because `overflow: hidden` would also clip content that is _meant_ to overflow — dropdown menus, tooltips, or popovers anchored inside the card. Enable it only for flush media/table layouts.

package/docs/endpoint-link/README.md

@@ -1,142 +0,0 @@
-# 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

@@ -1,154 +0,0 @@
-# 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-docs-endpoint-link.mjs

@@ -1,63 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';
-import { MethodBadgeComponent } from '@frame-kit/ui-ng/docs/method-badge';
-
-/**
- * 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 };
-//# sourceMappingURL=frame-kit-ui-ng-docs-endpoint-link.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"frame-kit-ui-ng-docs-endpoint-link.mjs","sources":["../../../../packages/ui-ng/docs/endpoint-link/endpoint-link.component.ts","../../../../packages/ui-ng/docs/endpoint-link/endpoint-link.component.html","../../../../packages/ui-ng/docs/endpoint-link/frame-kit-ui-ng-docs-endpoint-link.ts"],"sourcesContent":["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 '@frame-kit/ui-ng/docs/method-badge';\nimport type { MethodBadgeMethod } from '@frame-kit/ui-ng/docs/method-badge';\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":";;;;;;AAcA;;;;;;;;;;;;;;;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-docs-method-badge.mjs

@@ -1,43 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-
-/**
- * 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']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { MethodBadgeComponent };
-//# sourceMappingURL=frame-kit-ui-ng-docs-method-badge.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"frame-kit-ui-ng-docs-method-badge.mjs","sources":["../../../../packages/ui-ng/docs/method-badge/method-badge.component.ts","../../../../packages/ui-ng/docs/method-badge/method-badge.component.html","../../../../packages/ui-ng/docs/method-badge/frame-kit-ui-ng-docs-method-badge.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","/**\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;;;AE5CtB;;AAEG;;;;"}

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

@@ -1,43 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { MethodBadgeMethod } from '@frame-kit/ui-ng/docs/method-badge';
-export { MethodBadgeMethod as EndpointLinkMethod } from '@frame-kit/ui-ng/docs/method-badge';
-
-/**
- * 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>;
-}
-
-export { EndpointLinkComponent };

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

@@ -1,30 +0,0 @@
-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';
-
-/**
- * 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 { MethodBadgeComponent };
-export type { MethodBadgeMethod };