@frame-ui-ng/components 0.4.0-beta.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-ui-ng/components",
-  "version": "0.4.0-beta.0",
+  "version": "0.4.1",
   "description": "Angular components for FrameUI.",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "@angular/common": ">=21.0.0 <22.0.0",
     "@angular/core": ">=21.0.0 <22.0.0",
     "@angular/forms": ">=21.0.0 <22.0.0",
-    "@frame-ui-ng/foundation": "0.4.0-beta.0",
+    "@frame-ui-ng/foundation": "0.4.1",
     "rxjs": "^7.8.0"
   },
   "dependencies": {
@@ -112,6 +112,10 @@
       "types": "./types/frame-ui-ng-components-confirm-modal.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-confirm-modal.mjs"
     },
+    "./confirm-popover": {
+      "types": "./types/frame-ui-ng-components-confirm-popover.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-confirm-popover.mjs"
+    },
     "./context-menu": {
       "types": "./types/frame-ui-ng-components-context-menu.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-context-menu.mjs"
@@ -120,6 +124,10 @@
       "types": "./types/frame-ui-ng-components-date-picker.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-date-picker.mjs"
     },
+    "./drag-drop": {
+      "types": "./types/frame-ui-ng-components-drag-drop.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-drag-drop.mjs"
+    },
     "./dropdown-menu": {
       "types": "./types/frame-ui-ng-components-dropdown-menu.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-dropdown-menu.mjs"

package/popover/src/styles/popover.css

@@ -1,101 +1,106 @@
-@import './_vars.css';
-
-frame-popover {
-  display: inline-block;
-}
-
-.frame-popover__anchor {
-  display: inline-flex;
-}
-
-[frPopoverTrigger] {
-  cursor: pointer;
-}
-
-.frame-popover__backdrop {
-  background: transparent;
-}
-
-.frame-popover__content {
-  display: grid;
-  gap: var(--frame-popover-content-gap);
-  width: var(--frame-popover-content-width);
-  max-width: min(var(--frame-popover-content-width), calc(100vw - 2rem));
-  border: 1px solid var(--frame-popover-content-border);
-  border-radius: var(--frame-popover-content-radius);
-  background: var(--frame-popover-content-bg);
-  box-shadow: var(--frame-popover-content-shadow);
-  color: var(--frame-popover-content-color);
-  padding: var(--frame-popover-content-padding);
-  outline: none;
-  transform-origin: var(--frame-popover-transform-origin, center);
-  animation: frame-popover-in var(--frame-popover-motion-duration) var(--frame-popover-motion-easing);
-}
-
-.frame-popover-overlay--top .frame-popover__content {
-  --frame-popover-transform-origin: bottom;
-}
-
-.frame-popover-overlay--right .frame-popover__content {
-  --frame-popover-transform-origin: left;
-}
-
-.frame-popover-overlay--bottom .frame-popover__content {
-  --frame-popover-transform-origin: top;
-}
-
-.frame-popover-overlay--left .frame-popover__content {
-  --frame-popover-transform-origin: right;
-}
-
-[frPopoverHeader] {
-  display: grid;
-  gap: var(--frame-popover-header-gap);
-}
-
-[frPopoverTitle] {
-  margin: 0;
-  color: var(--frame-popover-title-color);
-  font-size: var(--frame-popover-title-font-size);
-  font-weight: var(--frame-popover-title-font-weight);
-  line-height: 1.2;
-}
-
-[frPopoverDescription] {
-  margin: 0;
-  color: var(--frame-popover-description-color);
-  font-size: var(--frame-popover-description-font-size);
-  line-height: 1.45;
-}
-
-[frPopoverBody] {
-  display: grid;
-  gap: var(--frame-popover-body-gap);
-}
-
-[frPopoverFooter] {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--frame-popover-footer-gap);
-}
-
-[frPopoverClose] {
-  border-radius: var(--frame-popover-close-radius);
-}
-
-[frPopoverClose]:where(:hover, :focus-visible) {
-  background: var(--frame-popover-close-hover-bg);
-}
-
-@keyframes frame-popover-in {
-  from {
-    opacity: 0;
-    transform: translateY(var(--frame-popover-motion-distance)) scale(var(--frame-popover-motion-scale));
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
+@import './_vars.css';
+
+frame-popover {
+  display: inline-block;
+}
+
+.frame-popover__anchor {
+  display: inline-flex;
+}
+
+[frPopoverTrigger] {
+  cursor: pointer;
+}
+
+.frame-popover__backdrop {
+  background: transparent;
+}
+
+.frame-popover__content {
+  display: grid;
+  gap: var(--frame-popover-content-gap);
+  width: var(--frame-popover-content-width);
+  max-width: min(var(--frame-popover-content-width), calc(100vw - 2rem));
+  border: 1px solid var(--frame-popover-content-border);
+  border-radius: var(--frame-popover-content-radius);
+  background: var(--frame-popover-content-bg);
+  box-shadow: var(--frame-popover-content-shadow);
+  color: var(--frame-popover-content-color);
+  padding: var(--frame-popover-content-padding);
+  outline: none;
+  transform-origin: var(--frame-popover-transform-origin, center);
+  animation: frame-popover-in var(--frame-popover-motion-duration) var(--frame-popover-motion-easing);
+}
+
+.frame-popover-overlay--top .frame-popover__content {
+  --frame-popover-transform-origin: bottom;
+}
+
+.frame-popover-overlay--right .frame-popover__content {
+  --frame-popover-transform-origin: left;
+}
+
+.frame-popover-overlay--bottom .frame-popover__content {
+  --frame-popover-transform-origin: top;
+}
+
+.frame-popover-overlay--left .frame-popover__content {
+  --frame-popover-transform-origin: right;
+}
+
+[frPopoverHeader],
+.frame-popover__header {
+  display: grid;
+  gap: var(--frame-popover-header-gap);
+}
+
+[frPopoverTitle],
+.frame-popover__title {
+  margin: 0;
+  color: var(--frame-popover-title-color);
+  font-size: var(--frame-popover-title-font-size);
+  font-weight: var(--frame-popover-title-font-weight);
+  line-height: 1.2;
+}
+
+[frPopoverDescription],
+.frame-popover__description {
+  margin: 0;
+  color: var(--frame-popover-description-color);
+  font-size: var(--frame-popover-description-font-size);
+  line-height: 1.45;
+}
+
+[frPopoverBody],
+.frame-popover__body {
+  display: grid;
+  gap: var(--frame-popover-body-gap);
+}
+
+[frPopoverFooter],
+.frame-popover__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--frame-popover-footer-gap);
+}
+
+[frPopoverClose] {
+  border-radius: var(--frame-popover-close-radius);
+}
+
+[frPopoverClose]:where(:hover, :focus-visible) {
+  background: var(--frame-popover-close-hover-bg);
+}
+
+@keyframes frame-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--frame-popover-motion-distance)) scale(var(--frame-popover-motion-scale));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/src/styles/components.css

@@ -4,15 +4,16 @@
 @import '../../button/src/styles/button.css';
 @import '../../button-group/src/styles/button-group.css';
 @import '../../breadcrumb/src/styles/breadcrumb.css';
-@import '../../calendar/src/styles/calendar.css';
-@import '../../card/src/styles/card.css';
-@import '../../carousel/src/styles/carousel.css';
-@import '../../checkbox/src/styles/checkbox.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
 @import '../../collapsible/src/styles/collapsible.css';
 @import '../../command/src/styles/command.css';
 @import '../../combobox/src/styles/combobox.css';
 @import '../../context-menu/src/styles/context-menu.css';
 @import '../../date-picker/src/styles/date-picker.css';
+@import '../../drag-drop/src/styles/drag-drop.css';
 @import '../../empty/src/styles/empty.css';
 @import '../../field/src/styles/field.css';
 @import '../../hover-card/src/styles/hover-card.css';
@@ -25,6 +26,7 @@
 @import '../../navigation-menu/src/styles/navigation-menu.css';
 @import '../../pagination/src/styles/pagination.css';
 @import '../../popover/src/styles/popover.css';
+@import '../../confirm-popover/src/styles/confirm-popover.css';
 @import '../../progress/src/styles/progress.css';
 @import '../../radio-group/src/styles/radio-group.css';
 @import '../../resizable/src/styles/resizable.css';

package/styles/components.css

@@ -4,15 +4,16 @@
 @import '../../button/src/styles/button.css';
 @import '../../button-group/src/styles/button-group.css';
 @import '../../breadcrumb/src/styles/breadcrumb.css';
-@import '../../calendar/src/styles/calendar.css';
-@import '../../card/src/styles/card.css';
-@import '../../carousel/src/styles/carousel.css';
-@import '../../checkbox/src/styles/checkbox.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
 @import '../../collapsible/src/styles/collapsible.css';
 @import '../../command/src/styles/command.css';
 @import '../../combobox/src/styles/combobox.css';
 @import '../../context-menu/src/styles/context-menu.css';
 @import '../../date-picker/src/styles/date-picker.css';
+@import '../../drag-drop/src/styles/drag-drop.css';
 @import '../../empty/src/styles/empty.css';
 @import '../../field/src/styles/field.css';
 @import '../../hover-card/src/styles/hover-card.css';
@@ -25,6 +26,7 @@
 @import '../../navigation-menu/src/styles/navigation-menu.css';
 @import '../../pagination/src/styles/pagination.css';
 @import '../../popover/src/styles/popover.css';
+@import '../../confirm-popover/src/styles/confirm-popover.css';
 @import '../../progress/src/styles/progress.css';
 @import '../../radio-group/src/styles/radio-group.css';
 @import '../../resizable/src/styles/resizable.css';

package/styles.css

@@ -6,15 +6,16 @@
 @import './button/src/styles/button.css';
 @import './button-group/src/styles/button-group.css';
 @import './breadcrumb/src/styles/breadcrumb.css';
-@import './calendar/src/styles/calendar.css';
-@import './card/src/styles/card.css';
-@import './carousel/src/styles/carousel.css';
-@import './checkbox/src/styles/checkbox.css';
+@import './calendar/src/styles/calendar.css';
+@import './card/src/styles/card.css';
+@import './carousel/src/styles/carousel.css';
+@import './checkbox/src/styles/checkbox.css';
 @import './collapsible/src/styles/collapsible.css';
 @import './command/src/styles/command.css';
 @import './combobox/src/styles/combobox.css';
 @import './context-menu/src/styles/context-menu.css';
 @import './date-picker/src/styles/date-picker.css';
+@import './drag-drop/src/styles/drag-drop.css';
 @import './empty/src/styles/empty.css';
 @import './field/src/styles/field.css';
 @import './hover-card/src/styles/hover-card.css';
@@ -27,6 +28,7 @@
 @import './navigation-menu/src/styles/navigation-menu.css';
 @import './pagination/src/styles/pagination.css';
 @import './popover/src/styles/popover.css';
+@import './confirm-popover/src/styles/confirm-popover.css';
 @import './progress/src/styles/progress.css';
 @import './radio-group/src/styles/radio-group.css';
 @import './resizable/src/styles/resizable.css';

package/types/frame-ui-ng-components-accordion.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Signal } from '@angular/core';
+import { Signal, AfterViewInit, DoCheck, OnDestroy } from '@angular/core';
 
 interface FrAccordionItemContext {
     readonly contentId: Signal<string>;
@@ -9,12 +9,16 @@ interface FrAccordionItemContext {
     toggle(): void;
 }
 
-declare class FrAccordionContent {
+/** Content slot for accordion. */
+declare class FrAccordionContent implements AfterViewInit, DoCheck, OnDestroy {
     private readonly host;
     protected readonly item: FrAccordionItemContext;
     private initialized;
+    private lastOpen;
     private rafIds;
-    constructor();
+    ngAfterViewInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
     onTransitionEnd(event: TransitionEvent): void;
     private animate;
     private applyStaticState;
@@ -25,6 +29,7 @@ declare class FrAccordionContent {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionContent, "[frAccordionContent]", never, {}, {}, never, never, true, never>;
 }
 
+/** Item slot for accordion. */
 declare class FrAccordionItem {
     private readonly root;
     private readonly itemId;
@@ -38,6 +43,7 @@ declare class FrAccordionItem {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionItem, "[frAccordionItem]", ["frAccordionItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Accordion component primitive. */
 declare class FrAccordion {
     readonly type: i0.InputSignal<"single" | "multiple">;
     readonly border: i0.InputSignalWithTransform<boolean, unknown>;
@@ -45,7 +51,6 @@ declare class FrAccordion {
     readonly defaultValue: i0.InputSignal<string | readonly string[] | null>;
     readonly valueChange: i0.OutputEmitterRef<string | string[] | null>;
     private readonly openItems;
-    constructor();
     isItemOpen(value: string): boolean;
     toggleItem(value: string): void;
     private commit;
@@ -54,11 +59,13 @@ declare class FrAccordion {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordion, "[frAccordion]", ["frAccordion"], { "type": { "alias": "type"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
+/** Trigger control for accordion. */
 declare class FrAccordionTrigger {
     protected readonly item: FrAccordionItemContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionTrigger, "button[frAccordionTrigger]", never, {}, {}, never, never, true, never>;
 }
+/** Icon slot for accordion. */
 declare class FrAccordionIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionIcon, "[frAccordionIcon]", never, {}, {}, never, never, true, never>;

package/types/frame-ui-ng-components-alert.d.ts

@@ -2,19 +2,23 @@ import * as i0 from '@angular/core';
 
 declare const FR_ALERT_VARIANTS: readonly ["default", "destructive", "success", "danger", "info"];
 type FrAlertVariant = (typeof FR_ALERT_VARIANTS)[number];
+/** Alert component primitive. */
 declare class FrAlert {
     readonly variant: i0.InputSignal<"default" | "destructive" | "success" | "danger" | "info">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAlert, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlert, "[frAlert]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/** Icon slot for alert. */
 declare class FrAlertIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlertIcon, "[frAlertIcon]", never, {}, {}, never, never, true, never>;
 }
+/** Title slot for alert. */
 declare class FrAlertTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlertTitle, "[frAlertTitle]", never, {}, {}, never, never, true, never>;
 }
+/** Description slot for alert. */
 declare class FrAlertDescription {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertDescription, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlertDescription, "[frAlertDescription]", never, {}, {}, never, never, true, never>;

package/types/frame-ui-ng-components-avatar.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 
+/** Badge slot for avatar. */
 declare class FrAvatarBadge {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatarBadge, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarBadge, "[frAvatarBadge]", never, {}, {}, never, never, true, never>;
@@ -11,29 +12,34 @@ interface FrAvatarContext {
     setStatus(status: 'error' | 'idle' | 'loaded'): void;
 }
 
+/** Avatar fallback component primitive. */
 declare class FrAvatarFallback {
     protected readonly root: FrAvatarContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatarFallback, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarFallback, "[frAvatarFallback]", never, {}, {}, never, never, true, never>;
 }
 
+/** Group slot for avatar. */
 declare class FrAvatarGroup {
     readonly expandOnHover: i0.InputSignalWithTransform<boolean, unknown>;
     readonly size: i0.InputSignal<"xs" | "sm" | "md" | "lg">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatarGroup, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarGroup, "[frAvatarGroup]", never, { "expandOnHover": { "alias": "expandOnHover"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/** Avatar group count component primitive. */
 declare class FrAvatarGroupCount {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatarGroupCount, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarGroupCount, "[frAvatarGroupCount]", never, {}, {}, never, never, true, never>;
 }
 
+/** Icon slot for avatar. */
 declare class FrAvatarIcon {
     protected readonly root: FrAvatarContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatarIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarIcon, "[frAvatarIcon]", never, {}, {}, never, never, true, never>;
 }
 
+/** Avatar image component primitive. */
 declare class FrAvatarImage implements AfterViewInit {
     private readonly host;
     private readonly root;
@@ -44,6 +50,7 @@ declare class FrAvatarImage implements AfterViewInit {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarImage, "img[frAvatarImage]", never, {}, {}, never, never, true, never>;
 }
 
+/** Avatar component primitive. */
 declare class FrAvatar {
     readonly size: i0.InputSignal<"xs" | "sm" | "md" | "lg">;
     readonly status: i0.WritableSignal<"error" | "idle" | "loaded">;

package/types/frame-ui-ng-components-badge.d.ts

@@ -5,20 +5,24 @@ declare const FR_BADGE_VARIANTS: readonly ["default", "secondary", "success", "d
 declare const FR_BADGE_ICON_POSITIONS: readonly ["inline-start", "inline-end"];
 type FrBadgeVariant = (typeof FR_BADGE_VARIANTS)[number];
 type FrBadgeIconPosition = (typeof FR_BADGE_ICON_POSITIONS)[number];
+/** Inline badge host with variant styling. */
 declare class FrBadge {
     readonly variant: i0.InputSignal<"default" | "secondary" | "success" | "destructive" | "outline" | "ghost" | "link">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBadge, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBadge, "[frBadge], frame-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/** Icon slot for badge. */
 declare class FrBadgeIcon {
     readonly position: i0.InputSignal<"inline-start" | "inline-end">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBadgeIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBadgeIcon, "[frBadgeIcon]", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/** Label slot for badge. */
 declare class FrBadgeLabel {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBadgeLabel, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBadgeLabel, "[frBadgeLabel]", never, {}, {}, never, never, true, never>;
 }
+/** Loading indicator slot for badge. */
 declare class FrBadgeSpinner {
     readonly position: i0.InputSignal<"inline-start" | "inline-end">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBadgeSpinner, never>;

package/types/frame-ui-ng-components-breadcrumb.d.ts

@@ -1,30 +1,37 @@
 import * as i0 from '@angular/core';
 
+/** Breadcrumb navigation landmark. */
 declare class FrBreadcrumb {
     readonly ariaLabel: i0.InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumb, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBreadcrumb, "nav[frBreadcrumb], [frBreadcrumb]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/** List slot for breadcrumb. */
 declare class FrBreadcrumbList {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumbList, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBreadcrumbList, "ol[frBreadcrumbList], ul[frBreadcrumbList], [frBreadcrumbList]", never, {}, {}, never, never, true, never>;
 }
+/** Item slot for breadcrumb. */
 declare class FrBreadcrumbItem {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumbItem, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBreadcrumbItem, "li[frBreadcrumbItem], [frBreadcrumbItem]", never, {}, {}, never, never, true, never>;
 }
+/** Navigable link inside a breadcrumb item. */
 declare class FrBreadcrumbLink {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumbLink, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBreadcrumbLink, "a[frBreadcrumbLink], [frBreadcrumbLink]", never, {}, {}, never, never, true, never>;
 }
+/** Page slot for breadcrumb. */
 declare class FrBreadcrumbPage {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumbPage, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBreadcrumbPage, "[frBreadcrumbPage]", never, {}, {}, never, never, true, never>;
 }
+/** Separator slot for breadcrumb. */
 declare class FrBreadcrumbSeparator {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumbSeparator, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBreadcrumbSeparator, "[frBreadcrumbSeparator]", never, {}, {}, never, never, true, never>;
 }
+/** Ellipsis slot for breadcrumb. */
 declare class FrBreadcrumbEllipsis {
     readonly label: i0.InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBreadcrumbEllipsis, never>;

package/types/frame-ui-ng-components-button-group.d.ts

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 
 declare const FR_BUTTON_GROUP_ORIENTATIONS: readonly ["horizontal", "vertical"];
 type FrButtonGroupOrientation = (typeof FR_BUTTON_GROUP_ORIENTATIONS)[number];
+/** Groups related buttons with shared orientation. */
 declare class FrButtonGroup {
     readonly orientation: i0.InputSignal<"horizontal" | "vertical">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButtonGroup, never>;

package/types/frame-ui-ng-components-button.d.ts

@@ -8,6 +8,7 @@ type FrButtonAppearance = (typeof FR_BUTTON_APPEARANCES)[number];
 type FrButtonLoadingDisplay = (typeof FR_BUTTON_LOADING_DISPLAYS)[number];
 type FrButtonRadius = (typeof FR_BUTTON_RADII)[number];
 type FrButtonSize = (typeof FR_BUTTON_SIZES)[number];
+/** Button host with FrameUI size and appearance variants. */
 declare class FrButton {
     private readonly loadingIndicator;
     private readonly spinnerIndicator;
@@ -22,19 +23,23 @@ declare class FrButton {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrButton, "a[frButton], button[frButton]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingDisplay": { "alias": "loadingDisplay"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["loadingIndicator", "spinnerIndicator"], never, true, never>;
 }
+/** Icon-only button host with square sizing. */
 declare class FrIconButton {
     readonly ariaLabel: i0.InputSignal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrIconButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrIconButton, "a[frIconButton], button[frIconButton]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "loading": "loading"; "loadingDisplay": "loadingDisplay"; "radius": "radius"; "size": "size"; }; outputs: {}; }]>;
 }
+/** Icon slot for button. */
 declare class FrButtonIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButtonIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrButtonIcon, "[frButtonIcon]", never, {}, {}, never, never, true, never>;
 }
+/** Label slot for button. */
 declare class FrButtonLabel {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButtonLabel, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrButtonLabel, "[frButtonLabel]", never, {}, {}, never, never, true, never>;
 }
+/** Loading indicator slot for button. */
 declare class FrButtonLoading {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButtonLoading, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrButtonLoading, "[frButtonLoading]", never, {}, {}, never, never, true, never>;

package/types/frame-ui-ng-components-calendar.d.ts

@@ -31,6 +31,7 @@ type CalendarMonth = {
     label: string;
     weeks: CalendarDay[][];
 };
+/** Calendar control for single-date and range selection. */
 declare class FrCalendar implements ControlValueAccessor {
     readonly mode: _angular_core.InputSignal<FrCalendarMode>;
     readonly captionLayout: _angular_core.InputSignal<FrCalendarCaptionLayout>;

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

@@ -6,35 +6,40 @@ declare const FR_CARD_FOOTER_ALIGNS: readonly ["start", "end", "between"];
 type FrCardSize = (typeof FR_CARD_SIZES)[number];
 type FrCardSpacing = (typeof FR_CARD_SPACINGS)[number];
 type FrCardFooterAlign = (typeof FR_CARD_FOOTER_ALIGNS)[number];
+/** Card container with size and spacing controls. */
 declare class FrCard {
-    private readonly elementRef;
-    private readonly renderer;
     readonly size: i0.InputSignal<"default" | "sm">;
     readonly spacing: i0.InputSignal<"sm" | "md" | "lg" | "xl" | null>;
-    constructor();
+    protected readonly spacingValue: i0.Signal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCard, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCard, "[frCard], frame-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/** Header slot for card. */
 declare class FrCardHeader {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCardHeader, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCardHeader, "[frCardHeader]", never, {}, {}, never, never, true, never>;
 }
+/** Title slot for card. */
 declare class FrCardTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCardTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCardTitle, "[frCardTitle]", never, {}, {}, never, never, true, never>;
 }
+/** Description slot for card. */
 declare class FrCardDescription {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCardDescription, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCardDescription, "[frCardDescription]", never, {}, {}, never, never, true, never>;
 }
+/** Action slot for card. */
 declare class FrCardAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCardAction, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCardAction, "[frCardAction]", never, {}, {}, never, never, true, never>;
 }
+/** Content slot for card. */
 declare class FrCardContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCardContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCardContent, "[frCardContent]", never, {}, {}, never, never, true, never>;
 }
+/** Footer slot for card. */
 declare class FrCardFooter {
     readonly align: i0.InputSignal<"start" | "end" | "between">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCardFooter, never>;