@frame-kit/ui-ng 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-core-link.mjs","sources":["../../../../packages/ui-ng/core/link/link.component.ts","../../../../packages/ui-ng/core/link/link.component.html","../../../../packages/ui-ng/core/link/link-icon.directive.ts","../../../../packages/ui-ng/core/link/frame-kit-ui-ng-core-link.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport type { LinkSize, LinkUnderline, LinkVariant } from './link.types';\n\n/**\n * Link Component\n *\n * A flexible, accessible link component that supports:\n * - External and internal links\n * - Angular Router integration\n * - Variants, sizes, and underline styles\n * - Analytics tracking via data attributes\n * - Accessibility features (aria-label, keyboard navigation)\n * - Icon support (leading/trailing)\n * - Disabled and loading states\n * - External link indicators\n *\n * @example\n * ```html\n * <!-- Internal router link -->\n * <fk-link routerLink=\"/dashboard\">Dashboard</fk-link>\n *\n * <!-- External link with icon -->\n * <fk-link href=\"https://example.com\" [external]=\"true\">\n *   Visit Site\n * </fk-link>\n *\n * <!-- With analytics tracking -->\n * <fk-link\n *   href=\"/products\"\n *   trackingId=\"nav-products\"\n *   trackingCategory=\"navigation\"\n * >\n *   Products\n * </fk-link>\n *\n * <!-- Variants -->\n * <fk-link variant=\"primary\" href=\"/signup\">Sign Up</fk-link>\n * <fk-link variant=\"muted\" href=\"/help\">Help</fk-link>\n * <fk-link variant=\"danger\" href=\"/delete\">Delete</fk-link>\n * ```\n */\n@Component({\n  selector: 'fk-link',\n  standalone: true,\n  imports: [RouterLink, NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './link.component.scss',\n  templateUrl: './link.component.html',\n})\nexport class LinkComponent {\n  // ===== INPUTS =====\n\n  /**\n   * External href (for standard <a> tags)\n   * Use this for external links or when not using Angular Router\n   */\n  readonly href = input<string | null>(null);\n\n  /**\n   * Angular Router link (for internal navigation)\n   * Use this for internal app navigation\n   */\n  readonly routerLink = input<string | string[] | null>(null);\n\n  /**\n   * Query parameters object passed through to the underlying\n   * `routerLink` directive. Only meaningful when `routerLink` is set.\n   * Equivalent to `<a [routerLink]=\"...\" [queryParams]=\"...\">`.\n   */\n  readonly queryParams = input<Record<\n    string,\n    string | number | boolean | null | undefined\n  > | null>(null);\n\n  /**\n   * Link variant (visual style)\n   * @default 'default'\n   */\n  readonly variant = input<LinkVariant>('default');\n\n  /**\n   * Link size\n   * @default 'medium'\n   */\n  readonly size = input<LinkSize>('medium');\n\n  /**\n   * Underline behavior\n   * @default 'hover'\n   */\n  readonly underline = input<LinkUnderline>('hover');\n\n  /**\n   * Target attribute (e.g., '_blank', '_self')\n   * Automatically set to '_blank' if external is true\n   */\n  readonly target = input<string | null>(null);\n\n  /**\n   * Rel attribute (e.g., 'noopener noreferrer')\n   * Automatically set to 'noopener noreferrer' for external links with target=\"_blank\"\n   */\n  readonly rel = input<string | null>(null);\n\n  /**\n   * Mark as external link (shows external icon, sets target=\"_blank\")\n   * @default false\n   */\n  readonly external = input<boolean>(false);\n\n  /**\n   * Disable the link (prevents navigation, changes appearance)\n   * @default false\n   */\n  readonly disabled = input<boolean>(false);\n\n  /**\n   * Loading state (shows loading indicator, prevents navigation)\n   * @default false\n   */\n  readonly loading = input<boolean>(false);\n\n  /**\n   * Download attribute (for file downloads)\n   */\n  readonly download = input<string | boolean | null>(null);\n\n  /**\n   * Additional CSS classes\n   */\n  readonly className = input<string>('');\n\n  /**\n   * ID attribute\n   */\n  readonly id = input<string | null>(null);\n\n  /**\n   * ARIA label (for accessibility)\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /**\n   * ARIA described-by (for accessibility)\n   */\n  readonly ariaDescribedBy = input<string | null>(null);\n\n  /**\n   * ARIA current (for indicating current page/location)\n   */\n  readonly ariaCurrent = input<\n    'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | null\n  >(null);\n\n  /**\n   * Role attribute (usually not needed for <a> tags)\n   */\n  readonly role = input<string | null>(null);\n\n  /**\n   * Tab index (for keyboard navigation control)\n   */\n  readonly tabIndex = input<number | null>(null);\n\n  /**\n   * Analytics tracking ID\n   */\n  readonly trackingId = input<string | null>(null);\n\n  /**\n   * Analytics tracking category\n   */\n  readonly trackingCategory = input<string | null>(null);\n\n  /**\n   * Analytics tracking label\n   */\n  readonly trackingLabel = input<string | null>(null);\n\n  /**\n   * Custom data attributes (for analytics or other purposes)\n   */\n  readonly dataAttributes = input<Record<string, string>>({});\n\n  // ===== OUTPUTS =====\n\n  /**\n   * Click event (emitted when link is clicked)\n   * Note: Not emitted if disabled or loading\n   */\n  readonly clicked = output<MouseEvent>();\n\n  // ===== COMPUTED PROPERTIES =====\n\n  /**\n   * Computed: is this an external link?\n   */\n  readonly isExternalLink = computed(() => {\n    if (this.external()) return true;\n\n    const href = this.href();\n\n    if (!href) return false;\n\n    // Check if href starts with http://, https://, //, or mailto:, tel:, etc.\n    return /^(https?:)?\\/\\/|^mailto:|^tel:/i.test(href);\n  });\n\n  /**\n   * Computed: effective target attribute\n   */\n  readonly effectiveTarget = computed(() => {\n    if (this.target()) return this.target();\n    if (this.isExternalLink()) return '_blank';\n\n    return null;\n  });\n\n  /**\n   * Computed: effective rel attribute\n   */\n  readonly effectiveRel = computed(() => {\n    if (this.rel()) return this.rel();\n\n    if (this.isExternalLink() && this.effectiveTarget() === '_blank') {\n      return 'noopener noreferrer';\n    }\n\n    return null;\n  });\n\n  /**\n   * Computed: effective download attribute\n   */\n  readonly effectiveDownload = computed(() => {\n    const download = this.download();\n\n    if (download === null) return null;\n    if (download === true) return '';\n\n    return download;\n  });\n\n  /**\n   * Computed: effective tab index\n   */\n  readonly effectiveTabIndex = computed(() => {\n    if (this.tabIndex() !== null) return this.tabIndex();\n    if (this.disabled()) return -1;\n\n    return null;\n  });\n\n  /**\n   * Host classes — single source of truth\n   */\n  readonly classes = computed(() => {\n    return [\n      'fk-link',\n      `fk-link--${this.variant()}`,\n      `fk-link--${this.size()}`,\n      `fk-link--underline-${this.underline()}`,\n      this.disabled() ? 'fk-link--disabled' : '',\n      this.loading() ? 'fk-link--loading' : '',\n      this.isExternalLink() ? 'fk-link--external' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  /**\n   * Computed: data attributes for analytics\n   */\n  readonly computedDataAttributes = computed(() => {\n    const attrs: Record<string, string> = { ...this.dataAttributes() };\n\n    const trackingId = this.trackingId();\n\n    if (trackingId) {\n      attrs['data-tracking-id'] = trackingId;\n    }\n\n    const trackingCategory = this.trackingCategory();\n\n    if (trackingCategory) {\n      attrs['data-tracking-category'] = trackingCategory;\n    }\n\n    const trackingLabel = this.trackingLabel();\n\n    if (trackingLabel) {\n      attrs['data-tracking-label'] = trackingLabel;\n    }\n\n    return attrs;\n  });\n\n  /**\n   * Handle click events\n   */\n  handleClick(event: MouseEvent): void {\n    // Prevent navigation if disabled or loading\n    if (this.disabled() || this.loading()) {\n      event.preventDefault();\n      event.stopPropagation();\n\n      return;\n    }\n\n    // Emit click event\n    this.clicked.emit(event);\n\n    // Track analytics (if tracking service is available)\n    this.trackClick();\n  }\n\n  /**\n   * Track click for analytics\n   * Override this method or connect to your analytics service\n   */\n  private trackClick(): void {\n    const trackingId = this.trackingId();\n\n    if (!trackingId) return;\n\n    // Example: integrate with your analytics service\n    // this.analytics.track('link_click', {\n    //   id: trackingId,\n    //   category: this.trackingCategory(),\n    //   label: this.trackingLabel(),\n    // });\n\n    // For now, log to console in dev mode\n    if (\n      typeof window !== 'undefined' &&\n      typeof console !== 'undefined' &&\n      console.debug\n    ) {\n      console.debug('[fk-link] Analytics:', {\n        id: trackingId,\n        category: this.trackingCategory(),\n        label: this.trackingLabel(),\n      });\n    }\n  }\n}\n","<!-- Stable projection point for default content + leading/trailing icons -->\n<ng-template #projected>\n  <ng-content select=\"[fkLinkIconStart]\" />\n  <span class=\"fk-link__text\">\n    <ng-content></ng-content>\n  </span>\n  <ng-content select=\"[fkLinkIconEnd]\" />\n</ng-template>\n\n<!-- Loading indicator template -->\n<ng-template #loadingIndicator>\n  <span class=\"fk-link__loading\" aria-hidden=\"true\">\n    <span class=\"fk-link__spinner\"></span>\n  </span>\n</ng-template>\n\n<!-- External link icon template -->\n<ng-template #externalIcon>\n  <span class=\"fk-link__external-icon\" aria-hidden=\"true\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Router Link (Internal Navigation) -->\n@if (routerLink() && !href()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [queryParams]=\"queryParams()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-current]=\"ariaCurrent()\"\n    [attr.role]=\"role()\"\n    [attr.tabindex]=\"effectiveTabIndex()\"\n    [attr.data-tracking-id]=\"\n      computedDataAttributes()['data-tracking-id'] || null\n    \"\n    [attr.data-tracking-category]=\"\n      computedDataAttributes()['data-tracking-category'] || null\n    \"\n    [attr.data-tracking-label]=\"\n      computedDataAttributes()['data-tracking-label'] || null\n    \"\n    (click)=\"handleClick($event)\"\n  >\n    @if (loading()) {\n      <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n    }\n\n    <span class=\"fk-link__content\">\n      <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n    </span>\n\n    @if (isExternalLink()) {\n      <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n    }\n  </a>\n}\n\n<!-- Standard Link (External or href-based) -->\n@if (href() && !routerLink()) {\n  <a\n    [href]=\"href()\"\n    [target]=\"effectiveTarget()\"\n    [rel]=\"effectiveRel()\"\n    [download]=\"effectiveDownload()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-current]=\"ariaCurrent()\"\n    [attr.role]=\"role()\"\n    [attr.tabindex]=\"effectiveTabIndex()\"\n    [attr.data-tracking-id]=\"\n      computedDataAttributes()['data-tracking-id'] || null\n    \"\n    [attr.data-tracking-category]=\"\n      computedDataAttributes()['data-tracking-category'] || null\n    \"\n    [attr.data-tracking-label]=\"\n      computedDataAttributes()['data-tracking-label'] || null\n    \"\n    (click)=\"handleClick($event)\"\n  >\n    @if (loading()) {\n      <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n    }\n\n    <span class=\"fk-link__content\">\n      <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n    </span>\n\n    @if (isExternalLink()) {\n      <ng-container [ngTemplateOutlet]=\"externalIcon\"></ng-container>\n    }\n  </a>\n}\n\n<!-- Fallback: Button-style link (when no href or routerLink) -->\n@if (!href() && !routerLink()) {\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-current]=\"ariaCurrent()\"\n    [attr.role]=\"role()\"\n    [attr.tabindex]=\"effectiveTabIndex()\"\n    [attr.data-tracking-id]=\"\n      computedDataAttributes()['data-tracking-id'] || null\n    \"\n    [attr.data-tracking-category]=\"\n      computedDataAttributes()['data-tracking-category'] || null\n    \"\n    [attr.data-tracking-label]=\"\n      computedDataAttributes()['data-tracking-label'] || null\n    \"\n    (click)=\"handleClick($event)\"\n  >\n    @if (loading()) {\n      <ng-container [ngTemplateOutlet]=\"loadingIndicator\"></ng-container>\n    }\n\n    <span class=\"fk-link__content\">\n      <ng-container [ngTemplateOutlet]=\"projected\"></ng-container>\n    </span>\n  </button>\n}\n","import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_LINK_ICON_START = new InjectionToken<FkLinkIconStartDirective>(\n  'FK_LINK_ICON_START',\n);\n\nexport const FK_LINK_ICON_END = new InjectionToken<FkLinkIconEndDirective>(\n  'FK_LINK_ICON_END',\n);\n\n/**\n * Marker directive for the leading icon slot inside `<fk-link>`.\n * Mirrors the `[fkButtonIconStart]` pattern on `<fk-button>`.\n *\n * Apply to an `<fk-icon>` (or any element) projected as a child:\n *\n * ```html\n * <fk-link variant=\"primary\" (clicked)=\"download()\">\n *   <fk-icon name=\"download\" fkLinkIconStart />\n *   Download sample CSV\n * </fk-link>\n * ```\n *\n * The directive itself only marks the projection slot and applies\n * `aria-hidden=\"true\"` so screen readers don't announce decorative\n * icons twice.\n */\n@Directive({\n  selector: '[fkLinkIconStart]',\n  standalone: true,\n  providers: [\n    { provide: FK_LINK_ICON_START, useExisting: FkLinkIconStartDirective },\n  ],\n  host: {\n    'aria-hidden': 'true',\n  },\n})\nexport class FkLinkIconStartDirective {}\n\n/**\n * Marker directive for the trailing icon slot inside `<fk-link>`.\n * Note: the auto-shown external-link icon (when `href` points\n * off-site) renders separately and is not affected by this slot.\n */\n@Directive({\n  selector: '[fkLinkIconEnd]',\n  standalone: true,\n  providers: [\n    { provide: FK_LINK_ICON_END, useExisting: FkLinkIconEndDirective },\n  ],\n  host: {\n    'aria-hidden': 'true',\n  },\n})\nexport class FkLinkIconEndDirective {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class SeparatorComponent {
+    // ===== INPUTS =====
+    /** Space above the separator line; any valid CSS length or token. */
+    marginTop = input(null, ...(ngDevMode ? [{ debugName: "marginTop" }] : /* istanbul ignore next */ []));
+    /** Space below the separator line; any valid CSS length or token. */
+    marginBottom = input(null, ...(ngDevMode ? [{ debugName: "marginBottom" }] : /* istanbul ignore next */ []));
+    /** Color of the separator line; any valid CSS color value or token. */
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-separator', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostMarginTop() {
+        return this.marginTop();
+    }
+    get hostMarginBottom() {
+        return this.marginBottom();
+    }
+    get hostColor() {
+        return this.color();
+    }
+    role = 'separator';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SeparatorComponent, isStandalone: true, selector: "fk-separator", inputs: { marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.--fk-separator-margin-top": "this.hostMarginTop", "style.--fk-separator-margin-bottom": "this.hostMarginBottom", "style.--fk-separator-color": "this.hostColor", "attr.role": "this.role" } }, ngImport: i0, template: '<hr />', isInline: true, styles: [":host{display:block;align-self:stretch;margin-top:var(--fk-separator-margin-top, var(--fk-rhythm-6, 1.5rem));margin-bottom:var(--fk-separator-margin-bottom, 0)}hr{border:none;border-top:var(--fk-separator-border-width, 1px) solid var(--fk-separator-color, var(--fk-color-border, #d9e2ee));margin:0;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-separator', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: '<hr />', styles: [":host{display:block;align-self:stretch;margin-top:var(--fk-separator-margin-top, var(--fk-rhythm-6, 1.5rem));margin-bottom:var(--fk-separator-margin-bottom, 0)}hr{border:none;border-top:var(--fk-separator-border-width, 1px) solid var(--fk-separator-color, var(--fk-color-border, #d9e2ee));margin:0;padding:0}\n"] }]
+        }], propDecorators: { marginTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginTop", required: false }] }], marginBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginBottom", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostMarginTop: [{
+                type: HostBinding,
+                args: ['style.--fk-separator-margin-top']
+            }], hostMarginBottom: [{
+                type: HostBinding,
+                args: ['style.--fk-separator-margin-bottom']
+            }], hostColor: [{
+                type: HostBinding,
+                args: ['style.--fk-separator-color']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SeparatorComponent };
+//# sourceMappingURL=frame-kit-ui-ng-core-separator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-core-separator.mjs","sources":["../../../../packages/ui-ng/core/separator/separator.component.ts","../../../../packages/ui-ng/core/separator/frame-kit-ui-ng-core-separator.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\n@Component({\n  selector: 'fk-separator',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './separator.component.scss',\n  template: '<hr />',\n})\nexport class SeparatorComponent {\n  // ===== INPUTS =====\n  /** Space above the separator line; any valid CSS length or token. */\n  readonly marginTop = input<string | null>(null);\n  /** Space below the separator line; any valid CSS length or token. */\n  readonly marginBottom = input<string | null>(null);\n  /** Color of the separator line; any valid CSS color value or token. */\n  readonly color = input<string | null>(null);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-separator', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.--fk-separator-margin-top')\n  get hostMarginTop() {\n    return this.marginTop();\n  }\n\n  @HostBinding('style.--fk-separator-margin-bottom')\n  get hostMarginBottom() {\n    return this.marginBottom();\n  }\n\n  @HostBinding('style.--fk-separator-color')\n  get hostColor() {\n    return this.color();\n  }\n\n  @HostBinding('attr.role')\n  readonly role = 'separator';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAgBa,kBAAkB,CAAA;;;AAGpB,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;AAEtC,IAAA,YAAY,GAAG,KAAK,CAAgB,IAAI,mFAAC;;AAEzC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;;AAGlC,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;AAG7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACrE,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;AAEA,IAAA,IACI,gBAAgB,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE;IAC5B;AAEA,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;IACrB;IAGS,IAAI,GAAG,WAAW;uGAtChB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,w1BAFnB,QAAQ,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wTAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEP,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,EAAE,mBACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAErC,QAAQ,EAAA,MAAA,EAAA,CAAA,wTAAA,CAAA,EAAA;;sBAmBjB,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,iCAAiC;;sBAK7C,WAAW;uBAAC,oCAAoC;;sBAKhD,WAAW;uBAAC,4BAA4B;;sBAKxC,WAAW;uBAAC,WAAW;;;ACrD1B;;AAEG;;;;"}

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

@@ -0,0 +1,204 @@
+import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Text Component
+ *
+ * A flexible typography component that supports:
+ * - Semantic HTML elements (p, span, div, label, small)
+ * - Design token-based variants (type scale)
+ * - Tone/color variants
+ * - Text truncation (single-line and multi-line)
+ * - Text alignment
+ * - Font weight control
+ * - Accessibility features (visually hidden, ARIA)
+ * - Responsive typography
+ *
+ * @example
+ * ```html
+ * <!-- Basic paragraph -->
+ * <fk-text>This is body text</fk-text>
+ *
+ * <!-- Small caption -->
+ * <fk-text variant="caption" tone="muted">
+ *   Last updated: 2 hours ago
+ * </fk-text>
+ *
+ * <!-- Truncated text -->
+ * <fk-text [truncate]="true">
+ *   This is a very long text that will be truncated...
+ * </fk-text>
+ *
+ * <!-- Multi-line clamp -->
+ * <fk-text [maxLines]="3">
+ *   Long description that will be clamped to 3 lines with ellipsis
+ * </fk-text>
+ *
+ * <!-- Inline span -->
+ * <fk-text as="span" variant="small" tone="muted">
+ *   Inline text
+ * </fk-text>
+ *
+ * <!-- Form label -->
+ * <fk-text as="label" variant="label" weight="semibold" htmlFor="email-input">
+ *   Email Address
+ * </fk-text>
+ * <input id="email-input" type="email" />
+ * ```
+ */
+class TextComponent {
+    // ===== INPUTS =====
+    /**
+     * Semantic HTML element to render
+     * @default 'p'
+     */
+    as = input('p', ...(ngDevMode ? [{ debugName: "as" }] : /* istanbul ignore next */ []));
+    /**
+     * Typography variant (type scale)
+     * @default 'body'
+     */
+    variant = input('body', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Text tone/color
+     * @default 'default'
+     */
+    tone = input('default', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * Text alignment
+     * @default 'inherit'
+     */
+    align = input('inherit', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Font weight
+     * @default null (uses variant default)
+     */
+    weight = input(null, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    /**
+     * Enable single-line truncation with ellipsis
+     * @default false
+     */
+    truncate = input(false, ...(ngDevMode ? [{ debugName: "truncate" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of lines (multi-line clamp)
+     * @default null (no clamping)
+     */
+    maxLines = input(null, ...(ngDevMode ? [{ debugName: "maxLines" }] : /* istanbul ignore next */ []));
+    /**
+     * Add bottom margin/gutter
+     * @default false
+     */
+    gutterBottom = input(false, ...(ngDevMode ? [{ debugName: "gutterBottom" }] : /* istanbul ignore next */ []));
+    /**
+     * Italic text style
+     * @default false
+     */
+    italic = input(false, ...(ngDevMode ? [{ debugName: "italic" }] : /* istanbul ignore next */ []));
+    /**
+     * Visually hide the text (screen reader only)
+     * @default false
+     */
+    visuallyHidden = input(false, ...(ngDevMode ? [{ debugName: "visuallyHidden" }] : /* istanbul ignore next */ []));
+    /**
+     * Additional CSS classes
+     */
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * ID attribute
+     */
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * ARIA label (for accessibility)
+     */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * ARIA described-by (for accessibility)
+     */
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Role attribute (usually not needed)
+     */
+    role = input(null, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * For attribute (when using as="label" to associate with an input)
+     */
+    htmlFor = input(null, ...(ngDevMode ? [{ debugName: "htmlFor" }] : /* istanbul ignore next */ []));
+    // ===== TEMPLATE REFS =====
+    pTemplate = viewChild.required('p');
+    spanTemplate = viewChild.required('span');
+    divTemplate = viewChild.required('div');
+    labelTemplate = viewChild.required('label');
+    smallTemplate = viewChild.required('small');
+    // ===== COMPUTED PROPERTIES =====
+    /**
+     * Host classes — single source of truth
+     */
+    classes = computed(() => {
+        const weight = this.weight();
+        return [
+            'fk-text',
+            `fk-text--${this.variant()}`,
+            `fk-text--${this.tone()}`,
+            `fk-text--align-${this.align()}`,
+            weight ? `fk-text--weight-${weight}` : '',
+            this.truncate() ? 'fk-text--truncate' : '',
+            this.maxLines() !== null ? 'fk-text--line-clamp' : '',
+            this.gutterBottom() ? 'fk-text--gutter-bottom' : '',
+            this.italic() ? 'fk-text--italic' : '',
+            this.visuallyHidden() ? 'sr-only' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    /**
+     * Computed: inline styles for line clamping
+     */
+    lineClampStyle = computed(() => {
+        const maxLines = this.maxLines();
+        if (maxLines === null) {
+            return null;
+        }
+        return {
+            '-webkit-line-clamp': maxLines.toString(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "lineClampStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed: choose the correct element template
+     */
+    template = computed(() => {
+        switch (this.as()) {
+            case 'p':
+                return this.pTemplate();
+            case 'span':
+                return this.spanTemplate();
+            case 'div':
+                return this.divTemplate();
+            case 'label':
+                return this.labelTemplate();
+            case 'small':
+                return this.smallTemplate();
+            default:
+                return this.pTemplate();
+        }
+    }, ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: TextComponent, isStandalone: true, selector: "fk-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, gutterBottom: { classPropertyName: "gutterBottom", publicName: "gutterBottom", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, visuallyHidden: { classPropertyName: "visuallyHidden", publicName: "visuallyHidden", 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 }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, htmlFor: { classPropertyName: "htmlFor", publicName: "htmlFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "pTemplate", first: true, predicate: ["p"], descendants: true, isSignal: true }, { propertyName: "spanTemplate", first: true, predicate: ["span"], descendants: true, isSignal: true }, { propertyName: "divTemplate", first: true, predicate: ["div"], descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, isSignal: true }, { propertyName: "smallTemplate", first: true, predicate: ["small"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Stable projection point -->\n<ng-template #projected>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n  [ngTemplateOutlet]=\"template()\"\n  [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n  <p\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </p>\n</ng-template>\n\n<ng-template #span let-content>\n  <span\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #div let-content>\n  <div\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #label let-content>\n  <label\n    [id]=\"id()\"\n    [attr.for]=\"htmlFor()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #small let-content>\n  <small\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </small>\n</ng-template>\n", styles: [":host p,:host span,:host div,:host label,:host small{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}:host{display:block;margin-block:var(--fk-text-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-text-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-text--body{font-size:var(--fk-typography-body-font-size, .9375rem);font-weight:var(--fk-typography-body-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-body-line-height, 1.5);letter-spacing:var(--fk-typography-body-letter-spacing, .01em)}:host.fk-text--lead{font-size:var(--fk-typography-lead-font-size, 1rem);font-weight:var(--fk-typography-lead-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-lead-line-height, 1.4);letter-spacing:var(--fk-typography-lead-letter-spacing, 0em)}:host.fk-text--small{font-size:var(--fk-typography-small-font-size, .8125rem);font-weight:var(--fk-typography-small-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}:host.fk-text--caption{font-size:var(--fk-typography-caption-font-size, .6875rem);font-weight:var(--fk-typography-caption-font-weight, var(--fk-font-weight-medium, 500));line-height:var(--fk-typography-caption-line-height, 1.3);letter-spacing:var(--fk-typography-caption-letter-spacing, .02em)}:host.fk-text--label{font-size:var(--fk-typography-label-font-size, .8125rem);font-weight:var(--fk-typography-label-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-label-line-height, 1.25);letter-spacing:var(--fk-typography-label-letter-spacing, .01em)}:host.fk-text--code{font-family:var(--fk-typography-code-font-family, ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace);font-size:var(--fk-typography-code-font-size, .8125rem);font-weight:var(--fk-typography-code-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-code-line-height, 1.45);letter-spacing:var(--fk-typography-code-letter-spacing, 0em)}:host.fk-text--default{color:var(--fk-text-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-text--muted{color:var(--fk-text-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-text--subtle{color:var(--fk-text-color-subtle, #9ca3af)}:host.fk-text--danger{color:var(--fk-text-color-danger, var(--fk-color-danger, #e02424))}:host.fk-text--success{color:var(--fk-text-color-success, var(--fk-color-success, #10b981))}:host.fk-text--align-inherit{text-align:inherit}:host.fk-text--align-start{text-align:start}:host.fk-text--align-center{text-align:center}:host.fk-text--align-end{text-align:end}:host.fk-text--align-justify{text-align:justify}:host.fk-text--weight-normal{font-weight:var(--fk-font-weight-normal, 400)}:host.fk-text--weight-medium{font-weight:var(--fk-font-weight-medium, 500)}:host.fk-text--weight-semibold{font-weight:var(--fk-font-weight-semibold, 600)}:host.fk-text--weight-bold{font-weight:var(--fk-font-weight-bold, 700)}:host.fk-text--truncate p,:host.fk-text--truncate span,:host.fk-text--truncate div,:host.fk-text--truncate label,:host.fk-text--truncate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.fk-text--line-clamp p,:host.fk-text--line-clamp span,:host.fk-text--line-clamp div,:host.fk-text--line-clamp label,:host.fk-text--line-clamp small{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host.fk-text--gutter-bottom{margin-bottom:var(--fk-typography-gutter-bottom, 1rem)}:host.fk-text--italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-text', standalone: true, imports: [NgStyle, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Stable projection point -->\n<ng-template #projected>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n  [ngTemplateOutlet]=\"template()\"\n  [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n  <p\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </p>\n</ng-template>\n\n<ng-template #span let-content>\n  <span\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #div let-content>\n  <div\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #label let-content>\n  <label\n    [id]=\"id()\"\n    [attr.for]=\"htmlFor()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #small let-content>\n  <small\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </small>\n</ng-template>\n", styles: [":host p,:host span,:host div,:host label,:host small{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}:host{display:block;margin-block:var(--fk-text-margin-block-start, var(--fk-rhythm-4, 1rem)) var(--fk-text-margin-block-end, 0)}:host(:first-child){margin-block-start:0}:host.fk-text--body{font-size:var(--fk-typography-body-font-size, .9375rem);font-weight:var(--fk-typography-body-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-body-line-height, 1.5);letter-spacing:var(--fk-typography-body-letter-spacing, .01em)}:host.fk-text--lead{font-size:var(--fk-typography-lead-font-size, 1rem);font-weight:var(--fk-typography-lead-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-lead-line-height, 1.4);letter-spacing:var(--fk-typography-lead-letter-spacing, 0em)}:host.fk-text--small{font-size:var(--fk-typography-small-font-size, .8125rem);font-weight:var(--fk-typography-small-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}:host.fk-text--caption{font-size:var(--fk-typography-caption-font-size, .6875rem);font-weight:var(--fk-typography-caption-font-weight, var(--fk-font-weight-medium, 500));line-height:var(--fk-typography-caption-line-height, 1.3);letter-spacing:var(--fk-typography-caption-letter-spacing, .02em)}:host.fk-text--label{font-size:var(--fk-typography-label-font-size, .8125rem);font-weight:var(--fk-typography-label-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-label-line-height, 1.25);letter-spacing:var(--fk-typography-label-letter-spacing, .01em)}:host.fk-text--code{font-family:var(--fk-typography-code-font-family, ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace);font-size:var(--fk-typography-code-font-size, .8125rem);font-weight:var(--fk-typography-code-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-typography-code-line-height, 1.45);letter-spacing:var(--fk-typography-code-letter-spacing, 0em)}:host.fk-text--default{color:var(--fk-text-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-text--muted{color:var(--fk-text-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-text--subtle{color:var(--fk-text-color-subtle, #9ca3af)}:host.fk-text--danger{color:var(--fk-text-color-danger, var(--fk-color-danger, #e02424))}:host.fk-text--success{color:var(--fk-text-color-success, var(--fk-color-success, #10b981))}:host.fk-text--align-inherit{text-align:inherit}:host.fk-text--align-start{text-align:start}:host.fk-text--align-center{text-align:center}:host.fk-text--align-end{text-align:end}:host.fk-text--align-justify{text-align:justify}:host.fk-text--weight-normal{font-weight:var(--fk-font-weight-normal, 400)}:host.fk-text--weight-medium{font-weight:var(--fk-font-weight-medium, 500)}:host.fk-text--weight-semibold{font-weight:var(--fk-font-weight-semibold, 600)}:host.fk-text--weight-bold{font-weight:var(--fk-font-weight-bold, 700)}:host.fk-text--truncate p,:host.fk-text--truncate span,:host.fk-text--truncate div,:host.fk-text--truncate label,:host.fk-text--truncate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.fk-text--line-clamp p,:host.fk-text--line-clamp span,:host.fk-text--line-clamp div,:host.fk-text--line-clamp label,:host.fk-text--line-clamp small{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host.fk-text--gutter-bottom{margin-bottom:var(--fk-typography-gutter-bottom, 1rem)}:host.fk-text--italic{font-style:italic}\n"] }]
+        }], propDecorators: { as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], maxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLines", required: false }] }], gutterBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterBottom", required: false }] }], italic: [{ type: i0.Input, args: [{ isSignal: true, alias: "italic", required: false }] }], visuallyHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "visuallyHidden", 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 }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], htmlFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlFor", required: false }] }], pTemplate: [{ type: i0.ViewChild, args: ['p', { isSignal: true }] }], spanTemplate: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }], divTemplate: [{ type: i0.ViewChild, args: ['div', { isSignal: true }] }], labelTemplate: [{ type: i0.ViewChild, args: ['label', { isSignal: true }] }], smallTemplate: [{ type: i0.ViewChild, args: ['small', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TextComponent };
+//# sourceMappingURL=frame-kit-ui-ng-core-text.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-core-text.mjs","sources":["../../../../packages/ui-ng/core/text/text.component.ts","../../../../packages/ui-ng/core/text/text.component.html","../../../../packages/ui-ng/core/text/frame-kit-ui-ng-core-text.ts"],"sourcesContent":["import { NgStyle, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  TemplateRef,\n  viewChild,\n} from '@angular/core';\n\nimport type {\n  TextAlign,\n  TextTone,\n  TextVariant,\n  TextWeight,\n} from './text.types';\n\n/**\n * Text Component\n *\n * A flexible typography component that supports:\n * - Semantic HTML elements (p, span, div, label, small)\n * - Design token-based variants (type scale)\n * - Tone/color variants\n * - Text truncation (single-line and multi-line)\n * - Text alignment\n * - Font weight control\n * - Accessibility features (visually hidden, ARIA)\n * - Responsive typography\n *\n * @example\n * ```html\n * <!-- Basic paragraph -->\n * <fk-text>This is body text</fk-text>\n *\n * <!-- Small caption -->\n * <fk-text variant=\"caption\" tone=\"muted\">\n *   Last updated: 2 hours ago\n * </fk-text>\n *\n * <!-- Truncated text -->\n * <fk-text [truncate]=\"true\">\n *   This is a very long text that will be truncated...\n * </fk-text>\n *\n * <!-- Multi-line clamp -->\n * <fk-text [maxLines]=\"3\">\n *   Long description that will be clamped to 3 lines with ellipsis\n * </fk-text>\n *\n * <!-- Inline span -->\n * <fk-text as=\"span\" variant=\"small\" tone=\"muted\">\n *   Inline text\n * </fk-text>\n *\n * <!-- Form label -->\n * <fk-text as=\"label\" variant=\"label\" weight=\"semibold\" htmlFor=\"email-input\">\n *   Email Address\n * </fk-text>\n * <input id=\"email-input\" type=\"email\" />\n * ```\n */\n@Component({\n  selector: 'fk-text',\n  standalone: true,\n  imports: [NgStyle, NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './text.component.scss',\n  templateUrl: './text.component.html',\n})\nexport class TextComponent {\n  // ===== INPUTS =====\n\n  /**\n   * Semantic HTML element to render\n   * @default 'p'\n   */\n  readonly as = input<'p' | 'span' | 'div' | 'label' | 'small'>('p');\n\n  /**\n   * Typography variant (type scale)\n   * @default 'body'\n   */\n  readonly variant = input<TextVariant>('body');\n\n  /**\n   * Text tone/color\n   * @default 'default'\n   */\n  readonly tone = input<TextTone>('default');\n\n  /**\n   * Text alignment\n   * @default 'inherit'\n   */\n  readonly align = input<TextAlign>('inherit');\n\n  /**\n   * Font weight\n   * @default null (uses variant default)\n   */\n  readonly weight = input<TextWeight | null>(null);\n\n  /**\n   * Enable single-line truncation with ellipsis\n   * @default false\n   */\n  readonly truncate = input<boolean>(false);\n\n  /**\n   * Maximum number of lines (multi-line clamp)\n   * @default null (no clamping)\n   */\n  readonly maxLines = input<number | null>(null);\n\n  /**\n   * Add bottom margin/gutter\n   * @default false\n   */\n  readonly gutterBottom = input<boolean>(false);\n\n  /**\n   * Italic text style\n   * @default false\n   */\n  readonly italic = input<boolean>(false);\n\n  /**\n   * Visually hide the text (screen reader only)\n   * @default false\n   */\n  readonly visuallyHidden = input<boolean>(false);\n\n  /**\n   * Additional CSS classes\n   */\n  readonly className = input<string>('');\n\n  /**\n   * ID attribute\n   */\n  readonly id = input<string | null>(null);\n\n  /**\n   * ARIA label (for accessibility)\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /**\n   * ARIA described-by (for accessibility)\n   */\n  readonly ariaDescribedBy = input<string | null>(null);\n\n  /**\n   * Role attribute (usually not needed)\n   */\n  readonly role = input<string | null>(null);\n\n  /**\n   * For attribute (when using as=\"label\" to associate with an input)\n   */\n  readonly htmlFor = input<string | null>(null);\n\n  // ===== TEMPLATE REFS =====\n\n  private readonly pTemplate = viewChild.required<TemplateRef<unknown>>('p');\n  private readonly spanTemplate =\n    viewChild.required<TemplateRef<unknown>>('span');\n  private readonly divTemplate =\n    viewChild.required<TemplateRef<unknown>>('div');\n  private readonly labelTemplate =\n    viewChild.required<TemplateRef<unknown>>('label');\n  private readonly smallTemplate =\n    viewChild.required<TemplateRef<unknown>>('small');\n\n  // ===== COMPUTED PROPERTIES =====\n\n  /**\n   * Host classes — single source of truth\n   */\n  readonly classes = computed(() => {\n    const weight = this.weight();\n\n    return [\n      'fk-text',\n      `fk-text--${this.variant()}`,\n      `fk-text--${this.tone()}`,\n      `fk-text--align-${this.align()}`,\n      weight ? `fk-text--weight-${weight}` : '',\n      this.truncate() ? 'fk-text--truncate' : '',\n      this.maxLines() !== null ? 'fk-text--line-clamp' : '',\n      this.gutterBottom() ? 'fk-text--gutter-bottom' : '',\n      this.italic() ? 'fk-text--italic' : '',\n      this.visuallyHidden() ? 'sr-only' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  /**\n   * Computed: inline styles for line clamping\n   */\n  readonly lineClampStyle = computed(() => {\n    const maxLines = this.maxLines();\n\n    if (maxLines === null) {\n      return null;\n    }\n\n    return {\n      '-webkit-line-clamp': maxLines.toString(),\n    };\n  });\n\n  /**\n   * Computed: choose the correct element template\n   */\n  readonly template = computed(() => {\n    switch (this.as()) {\n      case 'p':\n        return this.pTemplate();\n      case 'span':\n        return this.spanTemplate();\n      case 'div':\n        return this.divTemplate();\n      case 'label':\n        return this.labelTemplate();\n      case 'small':\n        return this.smallTemplate();\n      default:\n        return this.pTemplate();\n    }\n  });\n}\n","<!-- Stable projection point -->\n<ng-template #projected>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Render chosen element template -->\n<ng-container\n  [ngTemplateOutlet]=\"template()\"\n  [ngTemplateOutletContext]=\"{ $implicit: projected }\"\n></ng-container>\n\n<!-- Element templates -->\n<ng-template #p let-content>\n  <p\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </p>\n</ng-template>\n\n<ng-template #span let-content>\n  <span\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #div let-content>\n  <div\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #label let-content>\n  <label\n    [id]=\"id()\"\n    [attr.for]=\"htmlFor()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #small let-content>\n  <small\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.role]=\"role()\"\n    [ngStyle]=\"lineClampStyle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </small>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-directives-infinite-scroll.mjs

@@ -0,0 +1,74 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, PLATFORM_ID, input, output, Directive } from '@angular/core';
+
+/**
+ * Infinite Scroll Directive
+ *
+ * Place on a sentinel element at the bottom of a scrollable list.
+ * Uses IntersectionObserver — no scroll event listeners, no throttling.
+ *
+ * When the sentinel enters the viewport, emits `scrolled`.
+ * Remove the sentinel from the DOM (via @if) to stop triggering.
+ *
+ * @example
+ * ```html
+ * @for (item of items(); track item.id) {
+ *   <div>{{ item.name }}</div>
+ * }
+ *
+ * @if (hasMore()) {
+ *   <div fkInfiniteScroll (scrolled)="loadNextPage()">
+ *     @if (loading()) { <fk-loader /> }
+ *   </div>
+ * }
+ * ```
+ */
+class FkInfiniteScrollDirective {
+    el = inject((ElementRef));
+    platformId = inject(PLATFORM_ID);
+    observer = null;
+    /** Visibility threshold (0–1). Default 0.1 = 10% visible triggers. */
+    threshold = input(0.1, ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+    /** Root margin to expand/shrink the detection area. */
+    rootMargin = input('0px', ...(ngDevMode ? [{ debugName: "rootMargin" }] : /* istanbul ignore next */ []));
+    /** Emits when the sentinel element enters the viewport. */
+    scrolled = output();
+    ngAfterViewInit() {
+        // IntersectionObserver is browser-only — the SSR pass has no
+        // viewport to observe, so we skip setup entirely and let the
+        // browser pass wire it up after hydration.
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                this.scrolled.emit();
+            }
+        }, {
+            threshold: this.threshold(),
+            rootMargin: this.rootMargin(),
+        });
+        this.observer.observe(this.el.nativeElement);
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkInfiniteScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: FkInfiniteScrollDirective, isStandalone: true, selector: "[fkInfiniteScroll]", inputs: { threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkInfiniteScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkInfiniteScroll]',
+                    standalone: true,
+                }]
+        }], propDecorators: { threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FkInfiniteScrollDirective };
+//# sourceMappingURL=frame-kit-ui-ng-directives-infinite-scroll.mjs.map

package/fesm2022/frame-kit-ui-ng-directives-infinite-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-directives-infinite-scroll.mjs","sources":["../../../../packages/ui-ng/directives/infinite-scroll/infinite-scroll.directive.ts","../../../../packages/ui-ng/directives/infinite-scroll/frame-kit-ui-ng-directives-infinite-scroll.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  PLATFORM_ID,\n} from '@angular/core';\n\n/**\n * Infinite Scroll Directive\n *\n * Place on a sentinel element at the bottom of a scrollable list.\n * Uses IntersectionObserver — no scroll event listeners, no throttling.\n *\n * When the sentinel enters the viewport, emits `scrolled`.\n * Remove the sentinel from the DOM (via @if) to stop triggering.\n *\n * @example\n * ```html\n * @for (item of items(); track item.id) {\n *   <div>{{ item.name }}</div>\n * }\n *\n * @if (hasMore()) {\n *   <div fkInfiniteScroll (scrolled)=\"loadNextPage()\">\n *     @if (loading()) { <fk-loader /> }\n *   </div>\n * }\n * ```\n */\n@Directive({\n  selector: '[fkInfiniteScroll]',\n  standalone: true,\n})\nexport class FkInfiniteScrollDirective implements AfterViewInit, OnDestroy {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private readonly platformId = inject(PLATFORM_ID);\n  private observer: IntersectionObserver | null = null;\n\n  /** Visibility threshold (0–1). Default 0.1 = 10% visible triggers. */\n  readonly threshold = input(0.1);\n\n  /** Root margin to expand/shrink the detection area. */\n  readonly rootMargin = input('0px');\n\n  /** Emits when the sentinel element enters the viewport. */\n  readonly scrolled = output<void>();\n\n  ngAfterViewInit(): void {\n    // IntersectionObserver is browser-only — the SSR pass has no\n    // viewport to observe, so we skip setup entirely and let the\n    // browser pass wire it up after hydration.\n    if (!isPlatformBrowser(this.platformId)) {\n      return;\n    }\n\n    this.observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          this.scrolled.emit();\n        }\n      },\n      {\n        threshold: this.threshold(),\n        rootMargin: this.rootMargin(),\n      },\n    );\n\n    this.observer.observe(this.el.nativeElement);\n  }\n\n  ngOnDestroy(): void {\n    this.observer?.disconnect();\n    this.observer = null;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAYA;;;;;;;;;;;;;;;;;;;;;AAqBG;MAKU,yBAAyB,CAAA;AACnB,IAAA,EAAE,GAAG,MAAM,EAAC,UAAuB,EAAC;AACpC,IAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;IACzC,QAAQ,GAAgC,IAAI;;AAG3C,IAAA,SAAS,GAAG,KAAK,CAAC,GAAG,gFAAC;;AAGtB,IAAA,UAAU,GAAG,KAAK,CAAC,KAAK,iFAAC;;IAGzB,QAAQ,GAAG,MAAM,EAAQ;IAElC,eAAe,GAAA;;;;QAIb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACvC;QACF;QAEA,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACtC,CAAC,CAAC,KAAK,CAAC,KAAI;AACV,YAAA,IAAI,KAAK,CAAC,cAAc,EAAE;AACxB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YACtB;AACF,QAAA,CAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;AAC3B,YAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC9B,SAAA,CACF;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;IAC9C;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;AAC3B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;IACtB;uGAxCW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACrCD;;AAEG;;;;"}

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

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, Directive } from '@angular/core';
+import { SpotlightService } from '@frame-kit/ui-ng/services/spotlight';
+
+/**
+ * Marks an element to react when its spotlight key is active. By
+ * default the visual is a pulsing ring (`pulse` treatment) drawn by the
+ * `.fk-spotlight-target::after` pseudo-element. Pass `treatment="overlay"`
+ * for a static tinted overlay that's friendlier on wide elements.
+ *
+ * Many targets may share the same key — they all activate in sync, and
+ * each may pick its own treatment.
+ */
+class SpotlightTargetDirective {
+    /** Spotlight key this element reacts to; matches the key set on the trigger. */
+    fkSpotlightTarget = input.required(...(ngDevMode ? [{ debugName: "fkSpotlightTarget" }] : /* istanbul ignore next */ []));
+    /** Visual treatment applied when the spotlight is active — `"pulse"` animates a ring, `"overlay"` applies a tinted fade. */
+    treatment = input('pulse', ...(ngDevMode ? [{ debugName: "treatment" }] : /* istanbul ignore next */ []));
+    spotlight = inject(SpotlightService);
+    active = computed(() => this.spotlight.activeKey() === this.fkSpotlightTarget(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpotlightTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: SpotlightTargetDirective, isStandalone: true, selector: "[fkSpotlightTarget]", inputs: { fkSpotlightTarget: { classPropertyName: "fkSpotlightTarget", publicName: "fkSpotlightTarget", isSignal: true, isRequired: true, transformFunction: null }, treatment: { classPropertyName: "treatment", publicName: "treatment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fk-spotlight-target--active": "active()", "class.fk-spotlight-target--overlay": "treatment() === 'overlay'" }, classAttribute: "fk-spotlight-target" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpotlightTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkSpotlightTarget]',
+                    standalone: true,
+                    host: {
+                        class: 'fk-spotlight-target',
+                        '[class.fk-spotlight-target--active]': 'active()',
+                        '[class.fk-spotlight-target--overlay]': "treatment() === 'overlay'",
+                    },
+                }]
+        }], propDecorators: { fkSpotlightTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "fkSpotlightTarget", required: true }] }], treatment: [{ type: i0.Input, args: [{ isSignal: true, alias: "treatment", required: false }] }] } });
+
+/**
+ * Marks an element as the hover/focus zone that activates a spotlight key.
+ *
+ * Apply to a container — e.g. a docs-panel section — so the activation
+ * area is generous, not just the button itself. Any number of triggers
+ * can broadcast the same key; the last enter wins.
+ */
+class SpotlightTriggerDirective {
+    /** Spotlight key this element activates on hover or focus. */
+    fkSpotlightTrigger = input.required(...(ngDevMode ? [{ debugName: "fkSpotlightTrigger" }] : /* istanbul ignore next */ []));
+    spotlight = inject(SpotlightService);
+    onEnter() {
+        this.spotlight.activate(this.fkSpotlightTrigger());
+    }
+    onLeave() {
+        this.spotlight.deactivate(this.fkSpotlightTrigger());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpotlightTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: SpotlightTriggerDirective, isStandalone: true, selector: "[fkSpotlightTrigger]", inputs: { fkSpotlightTrigger: { classPropertyName: "fkSpotlightTrigger", publicName: "fkSpotlightTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()", "focusin": "onEnter()", "focusout": "onLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpotlightTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkSpotlightTrigger]',
+                    standalone: true,
+                    host: {
+                        '(mouseenter)': 'onEnter()',
+                        '(mouseleave)': 'onLeave()',
+                        '(focusin)': 'onEnter()',
+                        '(focusout)': 'onLeave()',
+                    },
+                }]
+        }], propDecorators: { fkSpotlightTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "fkSpotlightTrigger", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpotlightTargetDirective, SpotlightTriggerDirective };
+//# sourceMappingURL=frame-kit-ui-ng-directives-spotlight.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-directives-spotlight.mjs","sources":["../../../../packages/ui-ng/directives/spotlight/spotlight-target.directive.ts","../../../../packages/ui-ng/directives/spotlight/spotlight-trigger.directive.ts","../../../../packages/ui-ng/directives/spotlight/frame-kit-ui-ng-directives-spotlight.ts"],"sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\n\nimport { SpotlightService } from '@frame-kit/ui-ng/services/spotlight';\n\n/**\n * Visual treatment applied while the spotlight is active.\n *\n * - `pulse` (default) — animated ring around the element. Best for\n *   small, action-anchored targets like buttons.\n * - `overlay` — static tinted overlay over the element with a brief\n *   fade in/out. Better for wide surfaces (list columns, panels) where\n *   the pulsing animation would feel busy.\n */\nexport type SpotlightTreatment = 'pulse' | 'overlay';\n\n/**\n * Marks an element to react when its spotlight key is active. By\n * default the visual is a pulsing ring (`pulse` treatment) drawn by the\n * `.fk-spotlight-target::after` pseudo-element. Pass `treatment=\"overlay\"`\n * for a static tinted overlay that's friendlier on wide elements.\n *\n * Many targets may share the same key — they all activate in sync, and\n * each may pick its own treatment.\n */\n@Directive({\n  selector: '[fkSpotlightTarget]',\n  standalone: true,\n  host: {\n    class: 'fk-spotlight-target',\n    '[class.fk-spotlight-target--active]': 'active()',\n    '[class.fk-spotlight-target--overlay]': \"treatment() === 'overlay'\",\n  },\n})\nexport class SpotlightTargetDirective {\n  /** Spotlight key this element reacts to; matches the key set on the trigger. */\n  readonly fkSpotlightTarget = input.required<string>();\n  /** Visual treatment applied when the spotlight is active — `\"pulse\"` animates a ring, `\"overlay\"` applies a tinted fade. */\n  readonly treatment = input<SpotlightTreatment>('pulse');\n\n  private readonly spotlight = inject(SpotlightService);\n\n  protected readonly active = computed(\n    () => this.spotlight.activeKey() === this.fkSpotlightTarget(),\n  );\n}\n","import { Directive, inject, input } from '@angular/core';\n\nimport { SpotlightService } from '@frame-kit/ui-ng/services/spotlight';\n\n/**\n * Marks an element as the hover/focus zone that activates a spotlight key.\n *\n * Apply to a container — e.g. a docs-panel section — so the activation\n * area is generous, not just the button itself. Any number of triggers\n * can broadcast the same key; the last enter wins.\n */\n@Directive({\n  selector: '[fkSpotlightTrigger]',\n  standalone: true,\n  host: {\n    '(mouseenter)': 'onEnter()',\n    '(mouseleave)': 'onLeave()',\n    '(focusin)': 'onEnter()',\n    '(focusout)': 'onLeave()',\n  },\n})\nexport class SpotlightTriggerDirective {\n  /** Spotlight key this element activates on hover or focus. */\n  readonly fkSpotlightTrigger = input.required<string>();\n  private readonly spotlight = inject(SpotlightService);\n\n  protected onEnter(): void {\n    this.spotlight.activate(this.fkSpotlightTrigger());\n  }\n\n  protected onLeave(): void {\n    this.spotlight.deactivate(this.fkSpotlightTrigger());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}