@frame-ui-ng/components 0.5.0-beta.0 → 0.6.0-beta.0

package/styles/corner-handles.css

@@ -0,0 +1,217 @@
+/*
+ * Shared corner-handle renderer.
+ * Components opt in by applying `.frame-corner-handles`.
+ */
+
+.frame-corner-handles {
+  position: relative;
+}
+
+.frame-corner-handles::before {
+  --frame-corner-handle-offset: var(--frame-corner-handle-inset, 0px);
+  --frame-corner-handle-active-size: var(
+    --frame-corner-handle-size,
+    var(--frame-frame-tick-size, 0.375rem)
+  );
+  position: absolute;
+  display: block;
+  inset: var(--frame-corner-handle-offset);
+  z-index: 1;
+  border-radius: inherit;
+  background-image:
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent)));
+  background-position:
+    left top,
+    left top,
+    right bottom,
+    right bottom;
+  background-repeat: no-repeat;
+  background-size:
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size),
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size);
+  content: "";
+  pointer-events: none;
+}
+
+:root[data-frame-corner-handles='false'] .frame-corner-handles::before {
+  content: none;
+}
+
+.frame-button.frame-corner-handles::before {
+  content: none;
+}
+
+.frame-button.frame-corner-handles {
+  --frame-corner-handle-color: color-mix(in srgb, var(--frame-primary-foreground) 88%, transparent);
+  --frame-corner-handle-offset: var(--frame-corner-handle-inset, 0px);
+  --frame-corner-handle-active-size: var(
+    --frame-corner-handle-size,
+    var(--frame-frame-tick-size, 0.375rem)
+  );
+  background-image:
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent)));
+  background-position:
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset);
+  background-repeat: no-repeat;
+  background-size:
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size),
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size);
+}
+
+.frame-button.frame-corner-handles.frame-carousel__control {
+  position: absolute;
+}
+
+:root[data-frame-corner-handles='false'] .frame-button.frame-corner-handles {
+  background-image: none;
+}
+
+.frame-button.frame-corner-handles[data-appearance='outline'],
+.frame-button.frame-corner-handles[data-appearance='ghost'] {
+  --frame-corner-handle-color: var(--frame-frame-accent);
+}
+
+.frame-button.frame-corner-handles[data-appearance='ghost'] {
+  --frame-corner-handle-size: 0px;
+}
+
+.frame-button.frame-corner-handles[data-appearance='ghost']:where(:not(:disabled, [data-disabled])):hover,
+.frame-button.frame-corner-handles[data-appearance='ghost']:focus-visible {
+  --frame-corner-handle-size: var(--frame-frame-tick-size, 0.375rem);
+}
+
+.frame-button-group.frame-corner-handles {
+  --frame-corner-handle-radius: var(--frame-button-group-radius);
+}
+
+.frame-button-group > .frame-button.frame-corner-handles,
+.frame-button-group > [frButton].frame-corner-handles,
+[frButtonGroup] > .frame-button.frame-corner-handles,
+[frButtonGroup] > [frButton].frame-corner-handles,
+frame-button-group > .frame-button.frame-corner-handles,
+frame-button-group > [frButton].frame-corner-handles,
+.frame-input-group__addon > .frame-button.frame-corner-handles,
+[frInputGroupAddon] > .frame-button.frame-corner-handles,
+frame-input-group-addon > .frame-button.frame-corner-handles {
+  --frame-corner-handle-size: 0;
+}
+
+[frInputControl].frame-corner-handles,
+frame-input-control.frame-corner-handles {
+  --frame-corner-handle-color: var(--frame-input-frame-color);
+  --frame-corner-handle-inset: var(--frame-frame-tick-inset, 0.25rem);
+  --frame-corner-handle-radius: var(--frame-input-root-radius);
+}
+
+.frame-popover__content.frame-corner-handles {
+  --frame-corner-handle-radius: var(--frame-popover-content-radius);
+}
+
+.frame-sheet__panel.frame-corner-handles {
+  --frame-corner-handle-radius: var(--frame-sheet-radius);
+}
+
+.frame-corner-handles:where(
+  .frame-table-container,
+  .frame-table-virtual,
+  .frame-virtual-scroll__viewport,
+  .frame-virtual-scroll__list,
+  .frame-combobox__panel,
+  .frame-dropdown-menu__content,
+  .frame-navigation-menu__viewport,
+  .frame-select__content
+)::before,
+.frame-corner-handles.frame-tabs__list[data-variant='line']::before,
+.frame-date-picker__content .frame-calendar::before {
+  content: none;
+}
+
+.frame-corner-handles:where(
+  .frame-table-container,
+  .frame-table-virtual,
+  .frame-virtual-scroll__viewport,
+  .frame-virtual-scroll__list,
+  .frame-combobox__panel,
+  .frame-navigation-menu__viewport
+) {
+  --frame-corner-handle-offset: var(--frame-corner-handle-inset, 0px);
+  --frame-corner-handle-active-size: var(
+    --frame-corner-handle-size,
+    var(--frame-frame-tick-size, 0.375rem)
+  );
+  background-image:
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent)));
+  background-position:
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset);
+  background-size:
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size),
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size);
+  background-repeat: no-repeat;
+  background-attachment: local;
+}
+
+:root[data-frame-corner-handles='false']
+  .frame-corner-handles:where(
+    .frame-table-container,
+    .frame-table-virtual,
+    .frame-virtual-scroll__viewport,
+    .frame-virtual-scroll__list,
+    .frame-combobox__panel,
+    .frame-navigation-menu__viewport
+  ) {
+  background-image: none;
+}
+
+:where(
+  .frame-combobox__panel,
+  .frame-date-picker__content,
+  .frame-dropdown-menu__content,
+  .frame-hover-card__content,
+  .frame-modal__panel,
+  .frame-navigation-menu__viewport,
+  .frame-popover__content,
+  .frame-sheet__panel,
+  .frame-toast,
+  .frame-tooltip__content
+) :where(.frame-corner-handles) {
+  --frame-corner-handle-inset: 0px;
+}
+
+:where(
+  .frame-combobox__panel,
+  .frame-date-picker__content,
+  .frame-dropdown-menu__content,
+  .frame-hover-card__content,
+  .frame-modal__panel,
+  .frame-navigation-menu__viewport,
+  .frame-popover__content,
+  .frame-sheet__panel,
+  .frame-toast
+) {
+  --frame-corner-handle-inset: 0.5rem;
+}
+
+.frame-tooltip__content.frame-corner-handles {
+  --frame-corner-handle-inset: 0.125rem;
+}

package/styles.css

@@ -1,7 +1,7 @@
 @import '@frame-ui-ng/foundation/styles.css';
 
-@import './alert/src/styles/alert.css';
 @import './accordion/src/styles/accordion.css';
+@import './alert/src/styles/alert.css';
 @import './avatar/src/styles/avatar.css';
 @import './button/src/styles/button.css';
 @import './button-group/src/styles/button-group.css';
@@ -48,4 +48,4 @@
 @import './toast/src/styles/toast.css';
 @import './virtual-scroll/src/styles/virtual-scroll.css';
 @import './badge/src/styles/badge.css';
-@import './src/styles/blueprint.css';
+@import './src/styles/corner-handles.css';

package/toggle/src/styles/toggle.css

@@ -40,7 +40,7 @@
   transform: translateY(1px);
 }
 
-[frToggle]:focus-visible {
+[frToggle]:where(:not(:disabled, [data-disabled])):focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--frame-toggle-focus-shadow);
@@ -78,6 +78,11 @@
   opacity: var(--frame-toggle-disabled-opacity);
 }
 
+[frToggle]:where(:disabled, [data-disabled]):where(:hover, :focus-visible, :active) {
+  transform: none;
+  box-shadow: none;
+}
+
 [frToggleIcon],
 .frame-toggle__icon {
   display: inline-flex;

package/tooltip/src/styles/_vars.css

@@ -3,7 +3,7 @@
   --frame-tooltip-content-color: var(--frame-foreground);
   --frame-tooltip-content-border: var(--frame-frame-line-muted, var(--frame-border));
   --frame-tooltip-content-radius: var(--frame-radius-md);
-  --frame-tooltip-content-shadow: var(--frame-shadow-md);
+  --frame-tooltip-content-shadow: var(--frame-shadow-md);
   --frame-tooltip-content-padding: var(--frame-density-overlay-padding-block) var(--frame-density-overlay-padding-inline);
   --frame-tooltip-content-max-width: 18rem;
   --frame-tooltip-content-font-size: 0.8125rem;

package/tooltip/src/styles/tooltip.css

@@ -8,7 +8,6 @@
 
 .frame-tooltip__content {
   position: relative;
-  --frame-blueprint-corner-inset: 0.125rem;
   max-width: min(var(--frame-tooltip-content-max-width), calc(100vw - 1rem));
   border: 1px solid var(--frame-tooltip-content-border);
   border-radius: var(--frame-tooltip-content-radius);
@@ -63,19 +62,19 @@
   border-inline-end: 0;
 }
 
-.frame-tooltip__content[data-arrow][data-side='left']::after {
-  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
-  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
-  border-block-end: 0;
-  border-inline-start: 0;
-}
-
-.frame-tooltip__content[data-arrow][data-side='right']::after {
-  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
-  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
-  border-block-start: 0;
-  border-inline-end: 0;
-}
+.frame-tooltip__content[data-arrow][data-side='left']::after {
+  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
+  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
+  border-block-end: 0;
+  border-inline-start: 0;
+}
+
+.frame-tooltip__content[data-arrow][data-side='right']::after {
+  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
+  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
+  border-block-start: 0;
+  border-inline-end: 0;
+}
 
 [frTooltipShortcut],
 .frame-tooltip__shortcut {

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

@@ -1,83 +1,91 @@
-import * as i0 from '@angular/core';
-import { Signal, AfterViewInit, DoCheck, OnDestroy } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, ElementRef, Signal } from '@angular/core';
+import * as i1 from '@angular/cdk/accordion';
 
-interface FrAccordionItemContext {
-    readonly contentId: Signal<string>;
-    readonly disabled: Signal<boolean>;
-    readonly open: Signal<boolean>;
-    readonly triggerId: Signal<string>;
-    toggle(): void;
+/** Content template for accordion items. */
+declare class FrAccordionContent {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrAccordionContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrAccordionContent, "ng-template[frameAccordionContent]", never, {}, {}, never, never, true, never>;
 }
 
-/** Content slot for accordion. */
-declare class FrAccordionContent implements AfterViewInit, DoCheck, OnDestroy {
-    private readonly host;
-    protected readonly item: FrAccordionItemContext;
-    private initialized;
-    private lastOpen;
-    private rafIds;
-    ngAfterViewInit(): void;
-    ngDoCheck(): void;
-    ngOnDestroy(): void;
-    onTransitionEnd(event: TransitionEvent): void;
-    private animate;
-    private applyStaticState;
-    private measureContentHeight;
-    private cancelAnimationFrame;
-    private requestAnimationFrame;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionContent, "[frAccordionContent]", never, {}, {}, never, never, true, never>;
-}
-
-/** Item slot for accordion. */
+/** Accordion item powered by Angular CDK accordion item state. */
 declare class FrAccordionItem {
     private readonly root;
-    private readonly itemId;
-    readonly value: i0.InputSignal<string>;
-    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly open: i0.Signal<boolean>;
-    readonly triggerId: i0.Signal<string>;
-    readonly contentId: i0.Signal<string>;
+    private readonly cdkItem;
+    private readonly destroyRef;
+    private readonly expanded;
+    private frameId;
+    private syncingDefaultState;
+    readonly content: _angular_core.Signal<FrAccordionContent | undefined>;
+    readonly contentPanel: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly open: _angular_core.Signal<boolean>;
+    readonly contentHeight: _angular_core.WritableSignal<string>;
+    readonly triggerId: _angular_core.Signal<string>;
+    readonly contentId: _angular_core.Signal<string>;
+    constructor();
     toggle(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionItem, never>;
-    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>;
+    onContentTransitionEnd(event: TransitionEvent): void;
+    private setExpanded;
+    private openContent;
+    private closeContent;
+    private scheduleFrame;
+    private cancelFrame;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrAccordionItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrAccordionItem, "frame-accordion-item", ["frameAccordionItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["content"], ["button[frameAccordionTrigger]"], true, [{ directive: typeof i1.CdkAccordionItem; inputs: {}; outputs: {}; }]>;
 }
 
-/** Accordion component primitive. */
+/** Accordion root powered by Angular CDK accordion state management. */
 declare class FrAccordion {
-    readonly type: i0.InputSignal<"single" | "multiple">;
-    readonly border: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly collapsible: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly defaultValue: i0.InputSignal<string | readonly string[] | null>;
-    readonly valueChange: i0.OutputEmitterRef<string | string[] | null>;
-    private readonly openItems;
-    isItemOpen(value: string): boolean;
-    toggleItem(value: string): void;
-    private commit;
+    private readonly cdkAccordion;
+    readonly type: _angular_core.InputSignal<"single" | "multiple">;
+    readonly border: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly defaultValue: _angular_core.InputSignal<string | readonly string[] | null>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string | string[] | null>;
+    private readonly defaultOpenValues;
+    private readonly currentOpenValues;
+    private readonly openValues;
+    constructor();
+    isDefaultItemOpen(value: string): boolean;
+    itemExpansionChanged(value: string, expanded: boolean): void;
+    openAll(): void;
+    closeAll(): void;
+    syncCdkMode(): void;
     private normalizeValues;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordion, never>;
-    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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrAccordion, "frame-accordion", ["frameAccordion"], { "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, ["*"], true, [{ directive: typeof i1.CdkAccordion; inputs: {}; outputs: {}; }]>;
 }
 
-/** Trigger control for accordion. */
+declare const FR_ACCORDION_TYPES: readonly ["single", "multiple"];
+type FrAccordionType = (typeof FR_ACCORDION_TYPES)[number];
+
+interface FrAccordionItemContext {
+    readonly contentId: Signal<string>;
+    readonly disabled: Signal<boolean>;
+    readonly open: Signal<boolean>;
+    readonly triggerId: Signal<string>;
+    toggle(): void;
+}
+
+/** Trigger control for accordion items. */
 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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrAccordionTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrAccordionTrigger, "button[frameAccordionTrigger]", never, {}, {}, never, never, true, never>;
 }
-/** Icon slot for accordion. */
+/** Optional icon slot for accordion triggers. */
 declare class FrAccordionIcon {
-    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionIcon, "[frAccordionIcon]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrAccordionIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrAccordionIcon, "[frameAccordionIcon]", never, {}, {}, never, never, true, never>;
 }
 
-declare const FR_ACCORDION_TYPES: readonly ["single", "multiple"];
-type FrAccordionType = (typeof FR_ACCORDION_TYPES)[number];
-
 declare class FrAccordionModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FrAccordionModule, never, [typeof FrAccordion, typeof FrAccordionContent, typeof FrAccordionIcon, typeof FrAccordionItem, typeof FrAccordionTrigger], [typeof FrAccordion, typeof FrAccordionContent, typeof FrAccordionIcon, typeof FrAccordionItem, typeof FrAccordionTrigger]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<FrAccordionModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrAccordionModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FrAccordionModule, never, [typeof FrAccordion, typeof FrAccordionContent, typeof FrAccordionIcon, typeof FrAccordionItem, typeof FrAccordionTrigger], [typeof FrAccordion, typeof FrAccordionContent, typeof FrAccordionIcon, typeof FrAccordionItem, typeof FrAccordionTrigger]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<FrAccordionModule>;
 }
 
 export { FR_ACCORDION_TYPES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionModule, FrAccordionTrigger };

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

@@ -51,8 +51,6 @@ declare class FrCalendar implements ControlValueAccessor {
     readonly cellTemplate: _angular_core.InputSignal<TemplateRef<FrCalendarCellContext> | null>;
     readonly previousMonthTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     readonly nextMonthTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
-    readonly previousMonthIcon: _angular_core.InputSignal<string>;
-    readonly nextMonthIcon: _angular_core.InputSignal<string>;
     readonly previousMonthLabel: _angular_core.InputSignal<string>;
     readonly nextMonthLabel: _angular_core.InputSignal<string>;
     readonly month: _angular_core.InputSignal<Date | null | undefined>;
@@ -65,14 +63,16 @@ declare class FrCalendar implements ControlValueAccessor {
     private readonly cvaDisabled;
     private readonly host;
     readonly currentMonth: _angular_core.Signal<Date>;
+    readonly currentMonthValue: _angular_core.Signal<string>;
+    readonly currentYearValue: _angular_core.Signal<string>;
     readonly isDisabled: _angular_core.Signal<boolean>;
     readonly value: _angular_core.Signal<Date | FrCalendarDateRange | null>;
     readonly weekdayLabels: _angular_core.Signal<string[]>;
     readonly monthOptions: _angular_core.Signal<{
-        value: number;
+        value: string;
         label: string;
     }[]>;
-    readonly yearOptions: _angular_core.Signal<number[]>;
+    readonly yearOptions: _angular_core.Signal<string[]>;
     readonly months: _angular_core.Signal<CalendarMonth[]>;
     readonly activeDate: _angular_core.Signal<Date>;
     readonly hasDateLabels: _angular_core.Signal<boolean>;
@@ -84,8 +84,8 @@ declare class FrCalendar implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     previousMonth(): void;
     nextMonth(): void;
-    setMonth(value: string): void;
-    setYear(value: string): void;
+    setMonth(value: string | null): void;
+    setYear(value: string | null): void;
     selectDay(day: CalendarDay): void;
     handleDayKeydown(event: KeyboardEvent, day: CalendarDay): void;
     dayTabIndex(day: CalendarDay): number;
@@ -104,7 +104,7 @@ declare class FrCalendar implements ControlValueAccessor {
     private updateMonth;
     private buildMonth;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrCalendar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrCalendar, "frame-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "fromYear": { "alias": "fromYear"; "required": false; "isSignal": true; }; "toYear": { "alias": "toYear"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumber": { "alias": "showWeekNumber"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "dateLabels": { "alias": "dateLabels"; "required": false; "isSignal": true; }; "disabledMatcher": { "alias": "disabledMatcher"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "previousMonthTemplate": { "alias": "previousMonthTemplate"; "required": false; "isSignal": true; }; "nextMonthTemplate": { "alias": "nextMonthTemplate"; "required": false; "isSignal": true; }; "previousMonthIcon": { "alias": "previousMonthIcon"; "required": false; "isSignal": true; }; "nextMonthIcon": { "alias": "nextMonthIcon"; "required": false; "isSignal": true; }; "previousMonthLabel": { "alias": "previousMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "monthChange": "monthChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrCalendar, "frame-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "fromYear": { "alias": "fromYear"; "required": false; "isSignal": true; }; "toYear": { "alias": "toYear"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumber": { "alias": "showWeekNumber"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "dateLabels": { "alias": "dateLabels"; "required": false; "isSignal": true; }; "disabledMatcher": { "alias": "disabledMatcher"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "previousMonthTemplate": { "alias": "previousMonthTemplate"; "required": false; "isSignal": true; }; "nextMonthTemplate": { "alias": "nextMonthTemplate"; "required": false; "isSignal": true; }; "previousMonthLabel": { "alias": "previousMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "monthChange": "monthChange"; }, never, never, true, never>;
 }
 
 declare class FrCalendarModule {

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Signal, AfterViewInit, DoCheck, OnDestroy } from '@angular/core';
+import { Signal, AfterViewInit, OnDestroy } from '@angular/core';
 
 interface FrCollapsibleContext {
     readonly contentId: Signal<string>;
@@ -10,19 +10,27 @@ interface FrCollapsibleContext {
 }
 
 /** Content slot for collapsible. */
-declare class FrCollapsibleContent implements AfterViewInit, DoCheck, OnDestroy {
+declare class FrCollapsibleContent implements AfterViewInit, OnDestroy {
     private readonly host;
     protected readonly collapsible: FrCollapsibleContext;
+    private animationFrameId;
     private initialized;
     private lastOpen;
-    private rafId;
+    private mutationObserver?;
+    private resizeFrameId;
+    private resizeObserver?;
+    constructor();
     ngAfterViewInit(): void;
-    ngDoCheck(): void;
     ngOnDestroy(): void;
     onTransitionEnd(event: TransitionEvent): void;
     private animate;
     private applyStaticState;
     private cancelAnimationFrame;
+    private cancelResizeFrame;
+    private observeContentSize;
+    private observeResizeTargets;
+    private scheduleOpenHeightSync;
+    private setOpenHeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCollapsibleContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCollapsibleContent, "[frCollapsibleContent]", never, {}, {}, never, never, true, never>;
 }

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

@@ -28,6 +28,9 @@ declare class FrComboboxEmpty {
 }
 /** Group slot for combobox. */
 declare class FrComboboxGroup {
+    private readonly elementRef;
+    private readonly root;
+    protected hidden(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrComboboxGroup, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrComboboxGroup, "[frComboboxGroup], frame-combobox-group", never, {}, {}, never, never, true, never>;
 }
@@ -70,6 +73,7 @@ declare class FrComboboxItem implements DoCheck {
     isSelected(): boolean;
     isHighlighted(): boolean;
     select(): void;
+    scrollIntoView(): void;
     protected highlightSelf(): void;
     private resolveLabel;
     private refreshResolvedLabel;
@@ -92,6 +96,7 @@ declare class FrCombobox extends FrControlValueAccessor<FrComboboxValue | FrComb
     private readonly items;
     private readonly itemsVersion;
     private readonly selectedLabels;
+    private readonly selectedLabelsVersion;
     private lastAutoHighlight;
     private lastItemsVersion;
     private lastQuery;
@@ -110,6 +115,7 @@ declare class FrCombobox extends FrControlValueAccessor<FrComboboxValue | FrComb
     readonly invalid: i0.Signal<boolean | null>;
     readonly isOpen: i0.WritableSignal<boolean>;
     readonly query: i0.WritableSignal<string>;
+    readonly queryActive: i0.WritableSignal<boolean>;
     readonly anchorWidth: i0.WritableSignal<number | null>;
     readonly highlightedIndex: i0.WritableSignal<number>;
     readonly overlaySide: i0.WritableSignal<"bottom" | "top">;
@@ -143,6 +149,7 @@ declare class FrCombobox extends FrControlValueAccessor<FrComboboxValue | FrComb
     handlePositionChange(event: ConnectedOverlayPositionChange): void;
     protected setViewValue(value: FrComboboxValue | FrComboboxValue[] | null): void;
     private bumpItems;
+    private scrollHighlightedItemIntoView;
     private measureAnchor;
     private attachResizeObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCombobox, never>;
@@ -196,6 +203,7 @@ declare class FrComboboxChip {
     constructor();
     remove(): void;
     private attachDefaultRemoveButton;
+    private createRemoveIcon;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrComboboxChip, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrComboboxChip, "[frComboboxChip], frame-combobox-chip", ["frComboboxChip"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/frame-ui-ng-components-date-picker.d.ts

@@ -33,15 +33,13 @@ declare class FrDatePicker extends FrControlValueAccessor<FrDatePickerValue> {
     readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly dialogLabel: _angular_core.InputSignal<string>;
-    readonly icon: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string | null>;
     readonly disabledDates: _angular_core.InputSignal<Date[]>;
     readonly dateLabels: _angular_core.InputSignal<Record<string, string>>;
     readonly disabledMatcher: _angular_core.InputSignal<FrCalendarDisabledMatcher | null>;
     readonly cellTemplate: _angular_core.InputSignal<TemplateRef<FrCalendarCellContext> | null>;
     readonly previousMonthTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     readonly nextMonthTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
-    readonly previousMonthIcon: _angular_core.InputSignal<string>;
-    readonly nextMonthIcon: _angular_core.InputSignal<string>;
     readonly previousMonthLabel: _angular_core.InputSignal<string>;
     readonly nextMonthLabel: _angular_core.InputSignal<string>;
     readonly headerTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
@@ -85,7 +83,7 @@ declare class FrDatePicker extends FrControlValueAccessor<FrDatePickerValue> {
     protected setViewValue(value: FrDatePickerValue): void;
     private commitValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrDatePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrDatePicker, "frame-date-picker", ["frDatePicker"], { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "fromYear": { "alias": "fromYear"; "required": false; "isSignal": true; }; "toYear": { "alias": "toYear"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumber": { "alias": "showWeekNumber"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "debugVisible": { "alias": "debugVisible"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "dialogLabel": { "alias": "dialogLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "dateLabels": { "alias": "dateLabels"; "required": false; "isSignal": true; }; "disabledMatcher": { "alias": "disabledMatcher"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "previousMonthTemplate": { "alias": "previousMonthTemplate"; "required": false; "isSignal": true; }; "nextMonthTemplate": { "alias": "nextMonthTemplate"; "required": false; "isSignal": true; }; "previousMonthIcon": { "alias": "previousMonthIcon"; "required": false; "isSignal": true; }; "nextMonthIcon": { "alias": "nextMonthIcon"; "required": false; "isSignal": true; }; "previousMonthLabel": { "alias": "previousMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "formatter": { "alias": "formatter"; "required": false; "isSignal": true; }; "parser": { "alias": "parser"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "openChange": "openChange"; "monthChange": "monthChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FrDatePicker, "frame-date-picker", ["frDatePicker"], { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "fromYear": { "alias": "fromYear"; "required": false; "isSignal": true; }; "toYear": { "alias": "toYear"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumber": { "alias": "showWeekNumber"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "debugVisible": { "alias": "debugVisible"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "dialogLabel": { "alias": "dialogLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "dateLabels": { "alias": "dateLabels"; "required": false; "isSignal": true; }; "disabledMatcher": { "alias": "disabledMatcher"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "previousMonthTemplate": { "alias": "previousMonthTemplate"; "required": false; "isSignal": true; }; "nextMonthTemplate": { "alias": "nextMonthTemplate"; "required": false; "isSignal": true; }; "previousMonthLabel": { "alias": "previousMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "formatter": { "alias": "formatter"; "required": false; "isSignal": true; }; "parser": { "alias": "parser"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "openChange": "openChange"; "monthChange": "monthChange"; }, never, never, true, never>;
 }
 
 declare class FrDatePickerModule {