xaml-ui 1.0.5 → 1.0.7

package/lib/Common.d.ts

@@ -9,7 +9,7 @@ export type XamlBoolean = 'False' | 'True';
 export type TextDecorations = 'None' | 'Underline' | 'Strikethrough';
 export type TextTrimming = 'None' | 'CharacterEllipsis' | 'Clip';
 export type TextWrapping = 'NoWrap' | 'Wrap';
-export type FlyoutPlacementMode = 'Top' | 'Bottom' | 'Left' | 'Right' | 'TopEdgeAlignedLeft' | 'TopEdgeAlignedRight' | 'BottomEdgeAlignedLeft' | 'BottomEdgeAlignedRight' | 'LeftEdgeAlignedTop' | 'LeftEdgeAlignedBottom' | 'RightEdgeAlignedTop' | 'RightEdgeAlignedBottom';
+export type FlyoutPlacementMode = 'Top' | 'Bottom' | 'Left' | 'Right' | 'TopEdgeAlignedLeft' | 'TopEdgeAlignedRight' | 'BottomEdgeAlignedLeft' | 'BottomEdgeAlignedRight' | 'LeftEdgeAlignedTop' | 'LeftEdgeAlignedBottom' | 'RightEdgeAlignedTop' | 'RightEdgeAlignedBottom' | 'Cover';
 export type Stretch = 'None' | 'Fill' | 'Uniform' | 'UniformToFill';
 export declare function toJustification(value: HorizontalAlignment): string;
 export declare function toAlignment(value: VerticalAlignment): "flex-start" | "center" | "flex-end" | "stretch";

package/lib/FrameworkElement.d.ts

@@ -11,10 +11,13 @@ export declare abstract class FrameworkElementComponent {
     VerticalAlignment: VerticalAlignment;
     Margin?: string;
     Padding?: string;
-    private get width();
-    private get height();
-    private get justifySelf();
-    private get alignSelf();
+    protected get overflow(): string;
+    protected get minWidth(): string | undefined;
+    protected get minHeight(): string | undefined;
+    protected get width(): string | undefined;
+    protected get height(): string | undefined;
+    protected get justifySelf(): string;
+    protected get alignSelf(): "flex-start" | "center" | "flex-end" | "stretch";
     private static _nextId;
     protected readonly _id: number;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrameworkElementComponent, never>;

package/lib/basic-input/ComboBox.d.ts

@@ -1,16 +1,18 @@
-import { AfterViewInit, ChangeDetectorRef } from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, ElementRef } from "@angular/core";
 import { SelectorComponent } from "../primitives/Selector";
+import { FlexibleConnectedPositionStrategyOrigin } from "@angular/cdk/overlay";
 import * as i0 from "@angular/core";
 export declare class ComboBoxComponent extends SelectorComponent implements AfterViewInit {
     private _changeDetector;
+    private _host;
     get item(): any;
     get index(): number;
     private _selector?;
     private _popup?;
-    constructor(_changeDetector: ChangeDetectorRef);
+    constructor(_changeDetector: ChangeDetectorRef, _host: ElementRef<HTMLElement>);
+    protected target: FlexibleConnectedPositionStrategyOrigin | null;
+    protected onIsOpenChanged(value: boolean): void;
     ngAfterViewInit(): void;
-    private _popupOffset;
-    protected get popupOffset(): number;
     private onSelectionChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComboBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComboBoxComponent, "ComboBox", never, {}, {}, never, never, true, never>;

package/lib/basic-input/RadioButton.d.ts

@@ -10,17 +10,17 @@ export declare class RadioButtonComponent extends BorderComponent {
     Group: string;
     Value: any;
     protected onChange(event: Event): void;
-    constructor(_group: RadioButtonGroup);
+    constructor(_group: RadioButtonGroupComponent);
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "RadioButton", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "IsChecked": { "alias": "IsChecked"; "required": false; }; "Group": { "alias": "Group"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; }, { "IsCheckedChange": "IsCheckedChange"; }, never, ["*"], true, never>;
 }
-export declare class RadioButtonGroup extends StackPanelComponent {
+export declare class RadioButtonGroupComponent extends StackPanelComponent {
     private _value;
     set Value(value: any);
     get Value(): any;
     ValueChange: EventEmitter<any>;
     private _children;
     registerOption(child: RadioButtonComponent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonGroup, "RadioButtonGroup", never, { "Value": { "alias": "Value"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonGroupComponent, "RadioButtonGroup", never, { "Value": { "alias": "Value"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, ["*"], true, never>;
 }

package/lib/basic-input/RadioToggleButton.d.ts

@@ -0,0 +1,7 @@
+import { RadioButtonComponent } from "./RadioButton";
+import * as i0 from "@angular/core";
+export declare class RadioToggleButtonComponent extends RadioButtonComponent {
+    protected get checked(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioToggleButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioToggleButtonComponent, "RadioToggleButton", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/basic-input/RepeatButton.d.ts

@@ -1,13 +1,16 @@
+import { OnDestroy } from "@angular/core";
 import { ButtonComponent } from "./Button";
 import * as i0 from "@angular/core";
-export declare class RepeatButtonComponent extends ButtonComponent {
+export declare class RepeatButtonComponent extends ButtonComponent implements OnDestroy {
     Delay: number;
     Interval: number;
     private _delayTimer;
     private _intervalTimer;
     private onPointerDown;
     private onPointerUp;
+    private clearTimers;
     protected onHostPointerEvent(event: Event): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RepeatButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RepeatButtonComponent, "RepeatButton", never, { "Delay": { "alias": "Delay"; "required": false; }; "Interval": { "alias": "Interval"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/lib/basic-input/Slider.d.ts

@@ -10,7 +10,7 @@ export declare class SliderComponent extends FrameworkElementComponent {
     ValueChange: EventEmitter<number>;
     IsEnabled: boolean;
     Orientation: Orientation;
-    protected onChange(event: Event): void;
+    protected onInput(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "Slider", never, { "Minimum": { "alias": "Minimum"; "required": false; }; "Maximum": { "alias": "Maximum"; "required": false; }; "StepFrequency": { "alias": "StepFrequency"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "Orientation": { "alias": "Orientation"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, true, never>;
 }

package/lib/dialogs-and-flyouts/ContextFlyout.d.ts

@@ -5,9 +5,6 @@ export declare class ContextFlyoutDirective implements AfterViewInit {
     private _viewContainer;
     private _flyout?;
     constructor(_hostComponent: ElementRef, _viewContainer: ViewContainerRef);
-    private _positionX;
-    private _positionY;
-    private get style();
     ngAfterViewInit(): void;
     private onContextMenu;
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextFlyoutDirective, never>;

package/lib/dialogs-and-flyouts/Flyout.d.ts

@@ -1,21 +1,8 @@
-import { FlyoutPlacementMode } from "../Common";
-import { PopupComponent } from "../primitives/Popup";
+import { FlyoutBaseComponent } from "../primitives/FlyoutBase";
+import { FlyoutPresenterAnimation } from "../primitives/FlyoutPresenter";
 import * as i0 from "@angular/core";
-export declare class FlyoutComponent extends PopupComponent {
-    Placement: FlyoutPlacementMode;
-    protected get contentStyle(): {
-        'align-self': string | undefined;
-        'justify-self': string | undefined;
-    };
-    protected get containerStyle(): {
-        top: string | undefined;
-        left: string | undefined;
-        right: string | undefined;
-        bottom: string | undefined;
-        transform: string;
-        margin: string;
-        transition: string;
-    };
+export declare class FlyoutComponent extends FlyoutBaseComponent {
+    protected get transitionAnimation(): FlyoutPresenterAnimation;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlyoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FlyoutComponent, "Flyout", never, { "Placement": { "alias": "Placement"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlyoutComponent, "Flyout", never, {}, {}, never, ["*"], true, never>;
 }

package/lib/layout/StackPanel.d.ts

@@ -4,6 +4,8 @@ import * as i0 from "@angular/core";
 export declare class StackPanelComponent extends PanelComponent {
     Orientation: Orientation;
     Spacing: number | string | undefined;
+    private get gridAutoFlow();
+    private get gridAutoRows();
     private get gridAutoColumns();
     static ɵfac: i0.ɵɵFactoryDeclaration<StackPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StackPanelComponent, "StackPanel", never, { "Orientation": { "alias": "Orientation"; "required": false; }; "Spacing": { "alias": "Spacing"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/menus-and-toolbars/AppBarButton.d.ts

@@ -7,6 +7,8 @@ export declare class AppBarButtonComponent extends FrameworkElementComponent {
     Icon?: string;
     Click: EventEmitter<any>;
     private get disabled();
+    private _flyout?;
+    protected onHostPointerEvent(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppBarButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppBarButtonComponent, "AppBarButton", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "Text": { "alias": "Text"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; }, { "Click": "Click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppBarButtonComponent, "AppBarButton", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "Text": { "alias": "Text"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; }, { "Click": "Click"; }, ["_flyout"], ["*"], true, never>;
 }

package/lib/menus-and-toolbars/MenuFlyout.d.ts

@@ -1,7 +1,14 @@
+import { AfterViewInit } from "@angular/core";
 import { FlyoutComponent } from "../dialogs-and-flyouts/Flyout";
+import { FlyoutPresenterAnimation } from "../primitives/FlyoutPresenter";
+import { OverlayRef } from "@angular/cdk/overlay-module.d-CSrPj90C";
 import * as i0 from "@angular/core";
-export declare class MenuFlyoutComponent extends FlyoutComponent {
-    protected onMenuClick(event: Event): void;
+export declare class MenuFlyoutComponent extends FlyoutComponent implements AfterViewInit {
+    private _menuClickSubscription?;
+    protected get transitionAnimation(): FlyoutPresenterAnimation;
+    protected OnOverlay(overlay: OverlayRef): void;
+    private onMenuClick;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuFlyoutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MenuFlyoutComponent, "MenuFlyout", never, {}, {}, never, ["*"], true, never>;
 }

package/lib/primitives/FlyoutBase.d.ts

@@ -0,0 +1,39 @@
+import { FlexibleConnectedPositionStrategyOrigin, Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, Renderer2, ViewContainerRef } from "@angular/core";
+import { FlyoutPresenterAnimation } from "./FlyoutPresenter";
+import { FlyoutPlacementMode } from "../Common";
+import * as i0 from "@angular/core";
+export declare const PopupTemplate = "<ng-template #template><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></ng-template>";
+export declare abstract class FlyoutBaseComponent implements AfterViewInit, OnDestroy {
+    private _viewContainerRef;
+    private _overlay;
+    private _hostElement;
+    protected _renderer: Renderer2;
+    Placement: FlyoutPlacementMode;
+    Padding?: string;
+    HasBackdrop: boolean;
+    private _backdropContextMenuSubscription?;
+    private _isOpen;
+    get IsOpen(): boolean;
+    set IsOpen(value: boolean);
+    private updatePlacement;
+    protected isVisible: boolean;
+    IsOpenChange: EventEmitter<boolean>;
+    private _target;
+    get Target(): FlexibleConnectedPositionStrategyOrigin | null;
+    set Target(value: FlexibleConnectedPositionStrategyOrigin | null);
+    private _template;
+    private get style();
+    protected get transitionAnimation(): FlyoutPresenterAnimation;
+    private get positioning();
+    private _overlayRef;
+    private _templatePortal;
+    constructor(_viewContainerRef: ViewContainerRef, _overlay: Overlay, _hostElement: ElementRef, _renderer: Renderer2);
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    protected OnOverlay(overlay: OverlayRef): void;
+    Show(): void;
+    Hide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlyoutBaseComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlyoutBaseComponent, "FlyoutBase", never, { "Placement": { "alias": "Placement"; "required": false; }; "Padding": { "alias": "Padding"; "required": false; }; "HasBackdrop": { "alias": "HasBackdrop"; "required": false; }; "IsOpen": { "alias": "IsOpen"; "required": false; }; "Target": { "alias": "Target"; "required": false; }; }, { "IsOpenChange": "IsOpenChange"; }, never, ["*"], true, never>;
+}

package/lib/primitives/FlyoutPresenter.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export type FlyoutPresenterAnimation = 'Default' | 'SlideLeft' | 'SlideRight' | 'SlideUp' | 'SlideDown';
+export declare class FlyoutPresenter {
+    static TransitionDuration: number;
+    TransitionAnimation: FlyoutPresenterAnimation;
+    Padding?: string;
+    IsVisible: boolean;
+    private get transitionClass();
+    private get visible();
+    private onContextMenu;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlyoutPresenter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlyoutPresenter, "FlyoutPresenter", never, { "TransitionAnimation": { "alias": "TransitionAnimation"; "required": false; }; "Padding": { "alias": "Padding"; "required": false; }; "IsVisible": { "alias": "IsVisible"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/primitives/Selector.d.ts

@@ -26,9 +26,10 @@ export declare abstract class SelectorComponent extends FrameworkElementComponen
     SelectedItemChange: EventEmitter<any>;
     DisplayMemberPath?: string;
     SelectedValuePath?: string;
-    protected getValue(index: number, item: any): any;
+    protected getValue: (index: number, item: any) => any;
     protected onItemClick(event: Event, index: number, item: any): void;
     GetElement(index: number): HTMLElement | null;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectorComponent, "Selector", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "HorizontalContentAlignment": { "alias": "HorizontalContentAlignment"; "required": false; }; "VerticalContentAlignment": { "alias": "VerticalContentAlignment"; "required": false; }; "ItemSource": { "alias": "ItemSource"; "required": false; }; "SelectedIndex": { "alias": "SelectedIndex"; "required": false; }; "SelectedValue": { "alias": "SelectedValue"; "required": false; }; "SelectedItem": { "alias": "SelectedItem"; "required": false; }; "DisplayMemberPath": { "alias": "DisplayMemberPath"; "required": false; }; "SelectedValuePath": { "alias": "SelectedValuePath"; "required": false; }; }, { "SelectedIndexChange": "SelectedIndexChange"; "SelectedValueChange": "SelectedValueChange"; "SelectedItemChange": "SelectedItemChange"; }, ["ItemTemplate"], never, true, never>;
 }

package/lib/scrolling/ScrollBar.d.ts

@@ -9,8 +9,8 @@ export declare class ScrollBarComponent extends FrameworkElementComponent {
     StepSize: number;
     private _value;
     get Value(): number;
-    ValueChange: EventEmitter<number>;
     set Value(value: number);
+    ValueChange: EventEmitter<number>;
     IsEnabled: boolean;
     private _track;
     private _thumb;

package/lib/text/NumberBox.d.ts

@@ -7,6 +7,7 @@ export type NumberFormatter = (value: number) => string;
 export declare class NumberBoxComponent extends FrameworkElementComponent {
     IsEnabled: boolean;
     PlaceholderText: string;
+    IsPlaceholderEditable: boolean;
     TextAlignment?: TextAlignment;
     InputMode: NumberInputMode;
     Minimum: number;
@@ -14,8 +15,10 @@ export declare class NumberBoxComponent extends FrameworkElementComponent {
     SmallChange: number;
     LargeChange: number;
     NumberFormatter: NumberFormatter;
+    Unit?: string;
     ValueChange: EventEmitter<number>;
     private _input;
+    private _flyout;
     private _text;
     get Text(): string;
     private _value;
@@ -27,10 +30,16 @@ export declare class NumberBoxComponent extends FrameworkElementComponent {
     private clampValue;
     protected onIncreaseClick(): void;
     protected onDecreaseClick(): void;
+    protected onButtonPress(): void;
+    private _blurTimeout;
+    private cancelFlyoutDismiss;
+    private scheduleFlyoutDismiss;
     protected onBlur(): void;
     protected onKeyDown(event: KeyboardEvent): void;
+    private onClick;
+    private onFocusIn;
     private updateText;
     private onContextMenu;
     static ɵfac: i0.ɵɵFactoryDeclaration<NumberBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NumberBoxComponent, "NumberBox", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "PlaceholderText": { "alias": "PlaceholderText"; "required": false; }; "TextAlignment": { "alias": "TextAlignment"; "required": false; }; "InputMode": { "alias": "InputMode"; "required": false; }; "Minimum": { "alias": "Minimum"; "required": false; }; "Maximum": { "alias": "Maximum"; "required": false; }; "SmallChange": { "alias": "SmallChange"; "required": false; }; "LargeChange": { "alias": "LargeChange"; "required": false; }; "NumberFormatter": { "alias": "NumberFormatter"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NumberBoxComponent, "NumberBox", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "PlaceholderText": { "alias": "PlaceholderText"; "required": false; }; "IsPlaceholderEditable": { "alias": "IsPlaceholderEditable"; "required": false; }; "TextAlignment": { "alias": "TextAlignment"; "required": false; }; "InputMode": { "alias": "InputMode"; "required": false; }; "Minimum": { "alias": "Minimum"; "required": false; }; "Maximum": { "alias": "Maximum"; "required": false; }; "SmallChange": { "alias": "SmallChange"; "required": false; }; "LargeChange": { "alias": "LargeChange"; "required": false; }; "NumberFormatter": { "alias": "NumberFormatter"; "required": false; }; "Unit": { "alias": "Unit"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, true, never>;
 }

package/lib/text/TextBlock.d.ts

@@ -11,8 +11,10 @@ export declare class TextBlockComponent extends FrameworkElementComponent {
     TextAlignment?: TextAlignment;
     IsTextSelectionEnabled?: XamlBoolean;
     TextDecorations?: TextDecorations;
-    TextTrimming?: TextTrimming;
+    TextTrimming: TextTrimming;
     TextWrapping: TextWrapping;
+    protected get width(): string | undefined;
+    protected get minWidth(): string | undefined;
     private get fontWeight();
     static ToFontWeight(value: FontWeights): 100 | 900 | 700 | 950 | 800 | 200 | 300 | 500 | 400 | 600 | 350;
     private get userSelect();

package/lib/text/TextBox.d.ts

@@ -5,14 +5,18 @@ import * as i0 from "@angular/core";
 export declare class TextBoxComponent extends FrameworkElementComponent {
     IsEnabled: boolean;
     PlaceholderText: string;
-    TextChange: EventEmitter<string>;
     TextAlignment?: TextAlignment;
     TextWrapping: TextWrapping;
+    private _input;
     private _text;
     get Text(): string;
     set Text(value: string);
-    protected onChange(event: Event): void;
+    TextChange: EventEmitter<string>;
+    protected onInput(event: Event): void;
+    private get disabled();
+    private onClick;
     private onContextMenu;
+    Focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextBoxComponent, "TextBox", never, { "IsEnabled": { "alias": "IsEnabled"; "required": false; }; "PlaceholderText": { "alias": "PlaceholderText"; "required": false; }; "TextAlignment": { "alias": "TextAlignment"; "required": false; }; "TextWrapping": { "alias": "TextWrapping"; "required": false; }; "Text": { "alias": "Text"; "required": false; }; }, { "TextChange": "TextChange"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xaml-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "license": "MPL-2.0",
   "description": "XAML UI is angular version of Microsoft's WinUI component library.",
   "peerDependencies": {

package/public-api.d.ts

@@ -4,6 +4,7 @@ export * from './lib/basic-input/ColorPicker';
 export * from './lib/basic-input/ComboBox';
 export * from './lib/basic-input/DropDownButton';
 export * from './lib/basic-input/RadioButton';
+export * from './lib/basic-input/RadioToggleButton';
 export * from './lib/basic-input/RepeatButton';
 export * from './lib/basic-input/Slider';
 export * from './lib/basic-input/SplitButton';
@@ -25,7 +26,8 @@ export * from './lib/menus-and-toolbars/MenuFlyout';
 export * from './lib/menus-and-toolbars/MenuFlyoutItem';
 export * from './lib/menus-and-toolbars/MenuFlyoutItemBase';
 export * from './lib/menus-and-toolbars/MenuFlyoutSeparator';
-export * from './lib/primitives/Popup';
+export * from './lib/primitives/FlyoutBase';
+export * from './lib/primitives/FlyoutPresenter';
 export * from './lib/primitives/Selector';
 export * from './lib/scrolling/ScrollBar';
 export * from './lib/scrolling/ScrollViewer';

package/styles/XamlGlobals.css

@@ -13,6 +13,8 @@
   --OverlayCornerRadius: 8px;
   --AcrylicBlur: blur(12px);
 
+  --SystemFontSize: 10pt;
+  --SystemFontFamily: 'Segoe UI', Arial, sans-serif;
   --SymbolFontFamily: 'Segoe Fluent Icons', 'Segoe MDL2 Assets';
   --SystemAccentColor: #0078d4;
   
@@ -121,4 +123,20 @@
 
     --DividerStrokeColorDefault: #0000000F;
   }
+}
+
+.cdk-overlay-dark-backdrop {
+  background: transparent !important;
+}
+
+.cdk-overlay-pane {
+  display: grid !important;
+}
+
+:root{
+  &, & * {
+    font-family: var(--SystemFontFamily);
+    font-size: var(--SystemFontSize);
+    color: var(--TextFillColorPrimary);
+  }
 }

package/lib/primitives/Popup.d.ts

@@ -1,20 +0,0 @@
-import { EventEmitter } from "@angular/core";
-import * as i0 from "@angular/core";
-export declare class PopupComponent {
-    private readonly _title;
-    protected isRendered: boolean;
-    private _isRenderedTimeout;
-    private _isOpen;
-    get IsOpen(): boolean;
-    set IsOpen(value: boolean);
-    IsOpenChange: EventEmitter<boolean>;
-    VerticalOffset: number;
-    HorizontalOffset: number;
-    private _container?;
-    Show(): void;
-    Hide(): void;
-    protected get containerClass(): "flyout-open" | undefined;
-    protected onBackdropClick(event: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PopupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PopupComponent, "Popup", never, { "IsOpen": { "alias": "IsOpen"; "required": false; }; "VerticalOffset": { "alias": "VerticalOffset"; "required": false; }; "HorizontalOffset": { "alias": "HorizontalOffset"; "required": false; }; }, { "IsOpenChange": "IsOpenChange"; }, never, ["*"], true, never>;
-}