@ng-matero/extensions 19.4.0 → 20.0.0

package/popover/index.d.ts

@@ -1,5 +1,401 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, OnDestroy, TemplateRef, ApplicationRef, Injector, ViewContainerRef, ChangeDetectorRef, EventEmitter, OnInit, ElementRef, AfterContentInit } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/cdk/overlay';
+import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import * as i3 from '@angular/cdk/a11y';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { Direction } from '@angular/cdk/bidi';
+import { Subject } from 'rxjs';
+
 /**
- * Generated bundle index. Do not edit.
+ * Injection token that can be used to reference instances of `MtxPopoverContent`. It serves
+ * as alternative token to the actual `MtxPopoverContent` class which could cause unnecessary
+ * retention of the class and its directive metadata.
  */
-/// <amd-module name="@ng-matero/extensions/popover" />
-export * from './public-api';
+declare const MTX_POPOVER_CONTENT: InjectionToken<MtxPopoverContent>;
+declare abstract class _MtxPopoverContentBase implements OnDestroy {
+    private _template;
+    private _appRef;
+    private _injector;
+    private _viewContainerRef;
+    private _document;
+    private _changeDetectorRef?;
+    private _portal;
+    private _outlet;
+    /** Emits when the popover content has been attached. */
+    readonly _attached: Subject<void>;
+    constructor(_template: TemplateRef<any>, _appRef: ApplicationRef, _injector: Injector, _viewContainerRef: ViewContainerRef, _document: any, _changeDetectorRef?: ChangeDetectorRef | undefined);
+    /**
+     * Attaches the content with a particular context.
+     * @docs-private
+     */
+    attach(context?: any): void;
+    /**
+     * Detaches the content.
+     * @docs-private
+     */
+    detach(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MtxPopoverContentBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MtxPopoverContentBase, never, never, {}, {}, never, never, true, never>;
+}
+/**
+ * Popover content that will be rendered lazily once the popover is opened.
+ */
+declare class MtxPopoverContent extends _MtxPopoverContentBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverContent, "ng-template[mtxPopoverContent]", never, {}, {}, never, never, true, never>;
+}
+
+/** First value of popover's position. */
+type MtxPopoverPositionStart = 'above' | 'below' | 'before' | 'after';
+/** Second value of popover's position. */
+type MtxPopoverPositionEnd = MtxPopoverPositionStart | 'center';
+/** Popover's position. */
+type MtxPopoverPosition = [MtxPopoverPositionStart, MtxPopoverPositionEnd];
+/** Popover's trigger event. */
+type MtxPopoverTriggerEvent = 'click' | 'hover' | 'none';
+/** Reason why the popover was closed. */
+type PopoverCloseReason = void | 'click' | 'keydown' | 'tab';
+
+/**
+ * Interface for a custom popover panel that can be used with `mtxPopoverTriggerFor`.
+ * @docs-private
+ */
+interface MtxPopoverPanel {
+    triggerEvent: MtxPopoverTriggerEvent;
+    enterDelay: number;
+    leaveDelay: number;
+    position: MtxPopoverPosition;
+    xOffset: number;
+    yOffset: number;
+    closeOnPanelClick: boolean;
+    closeOnBackdropClick: boolean;
+    closeDisabled: boolean;
+    backdropClass?: string;
+    overlayPanelClass?: string | string[];
+    hasBackdrop?: boolean;
+    templateRef: TemplateRef<any>;
+    lazyContent?: any;
+    direction?: Direction;
+    readonly panelId?: string;
+    readonly closed: EventEmitter<PopoverCloseReason>;
+    setCurrentStyles: (pos?: MtxPopoverPosition) => void;
+    setPositionClasses: (pos?: MtxPopoverPosition) => void;
+    setElevation: () => void;
+}
+/** Default `mtx-popover` options that can be overridden. */
+interface MtxPopoverDefaultOptions {
+    triggerEvent?: MtxPopoverTriggerEvent;
+    enterDelay?: number;
+    leaveDelay?: number;
+    position?: MtxPopoverPosition;
+    xOffset?: number;
+    yOffset?: number;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    arrowOffsetX?: number;
+    arrowOffsetY?: number;
+    hideArrow?: boolean;
+    closeOnPanelClick?: boolean;
+    closeOnBackdropClick?: boolean;
+    overlayPanelClass?: string;
+    backdropClass?: string;
+    hasBackdrop?: boolean;
+    focusTrapEnabled?: boolean;
+    focusTrapAutoCaptureEnabled?: boolean;
+}
+
+/** Injection token to be used to override the default options for `mtx-popover`. */
+declare const MTX_POPOVER_DEFAULT_OPTIONS: InjectionToken<MtxPopoverDefaultOptions>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MTX_POPOVER_DEFAULT_OPTIONS_FACTORY(): MtxPopoverDefaultOptions;
+declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
+    private _injector;
+    private _changeDetectorRef;
+    private _elementRef;
+    private _unusedNgZone;
+    private _defaultOptions;
+    private _previousElevation?;
+    private _elevationPrefix;
+    private _baseElevation;
+    private _exitFallbackTimeout;
+    /** Whether animations are currently disabled. */
+    protected _animationsDisabled: boolean;
+    /** Config object to be passed into the popover's class. */
+    _classList: {
+        [key: string]: boolean;
+    };
+    /** Current state of the panel animation. */
+    _panelAnimationState: 'void' | 'enter';
+    /** Emits whenever an animation on the popover completes. */
+    readonly _animationDone: Subject<"void" | "enter">;
+    /** Whether the popover is animating. */
+    _isAnimating: boolean;
+    /** Closing disabled on popover */
+    closeDisabled: boolean;
+    /** Config object to be passed into the popover's arrow style */
+    arrowStyles?: Record<string, unknown>;
+    /** Layout direction of the popover. */
+    direction?: Direction;
+    /** Class or list of classes to be added to the overlay panel. */
+    overlayPanelClass: string | string[];
+    /** Class to be added to the backdrop element. */
+    backdropClass: string | undefined;
+    /** aria-label for the popover panel. */
+    ariaLabel?: string;
+    /** aria-labelledby for the popover panel. */
+    ariaLabelledby?: string;
+    /** aria-describedby for the popover panel. */
+    ariaDescribedby?: string;
+    /** Popover's trigger event. */
+    triggerEvent: MtxPopoverTriggerEvent;
+    /** Popover's enter delay. */
+    enterDelay: number;
+    /** Popover's leave delay. */
+    leaveDelay: number;
+    /** Popover's position. */
+    get position(): MtxPopoverPosition;
+    set position(value: MtxPopoverPosition);
+    private _position;
+    /** Popover-panel's X offset. */
+    xOffset: number;
+    /** Popover-panel's Y offset. */
+    yOffset: number;
+    /** Popover-arrow's width. */
+    arrowWidth: number;
+    /** Popover-arrow's height. */
+    arrowHeight: number;
+    /** Popover-arrow's X offset. */
+    arrowOffsetX: number;
+    /** Popover-arrow's Y offset. */
+    arrowOffsetY: number;
+    /** Whether the popover arrow should be hidden. */
+    hideArrow: boolean;
+    /** Whether popover can be closed when click the popover-panel. */
+    closeOnPanelClick: boolean;
+    /** Whether popover can be closed when click the backdrop. */
+    closeOnBackdropClick: boolean;
+    /** Whether enable focus trap using `cdkTrapFocus`. */
+    focusTrapEnabled: boolean;
+    /** Whether enable focus trap auto capture using `cdkTrapFocusAutoCapture`. */
+    focusTrapAutoCaptureEnabled: boolean;
+    /** Whether the popover has a backdrop. It will always be false if the trigger event is hover. */
+    hasBackdrop: boolean | undefined;
+    /**
+     * This method takes classes set on the host mtx-popover element and applies them on the
+     * popover template that displays in the overlay container. Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @param classes list of class names
+     */
+    set panelClass(classes: string);
+    private _previousPanelClass?;
+    /**
+     * This method takes classes set on the host mtx-popover element and applies them on the
+     * popover template that displays in the overlay container. Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @deprecated Use `panelClass` instead.
+     * @breaking-change 8.0.0
+     */
+    get classList(): string;
+    set classList(classes: string);
+    /** Event emitted when the popover is closed. */
+    closed: EventEmitter<PopoverCloseReason>;
+    /** @docs-private */
+    templateRef: TemplateRef<any>;
+    /**
+     * Popover content that will be rendered lazily.
+     * @docs-private
+     */
+    lazyContent?: MtxPopoverContent;
+    readonly panelId: string;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Handle a keyboard event from the popover, delegating to the appropriate action. */
+    _handleKeydown(event: KeyboardEvent): void;
+    /** Close popover on click if `closeOnPanelClick` is true. */
+    _handleClick(): void;
+    /** Disables close of popover when leaving trigger element and mouse over the popover. */
+    _handleMouseOver(): void;
+    /** Enables close of popover when mouse leaving popover element. */
+    _handleMouseLeave(): void;
+    /** Sets the current styles for the popover to allow for dynamically changing settings. */
+    setCurrentStyles(pos?: MtxPopoverPosition): void;
+    /**
+     * It's necessary to set position-based classes to ensure the popover panel animation
+     * folds out from the correct direction.
+     */
+    setPositionClasses(pos?: MtxPopoverPosition): void;
+    /** Sets the popover-panel's elevation. */
+    setElevation(): void;
+    /** Callback that is invoked when the panel animation completes. */
+    protected _onAnimationDone(state: string): void;
+    protected _onAnimationStart(state: string): void;
+    _setIsOpen(isOpen: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopover, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxPopover, "mtx-popover", ["mtxPopover"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "triggerEvent": { "alias": "triggerEvent"; "required": false; }; "enterDelay": { "alias": "enterDelay"; "required": false; }; "leaveDelay": { "alias": "leaveDelay"; "required": false; }; "position": { "alias": "position"; "required": false; }; "xOffset": { "alias": "xOffset"; "required": false; }; "yOffset": { "alias": "yOffset"; "required": false; }; "arrowWidth": { "alias": "arrowWidth"; "required": false; }; "arrowHeight": { "alias": "arrowHeight"; "required": false; }; "arrowOffsetX": { "alias": "arrowOffsetX"; "required": false; }; "arrowOffsetY": { "alias": "arrowOffsetY"; "required": false; }; "hideArrow": { "alias": "hideArrow"; "required": false; }; "closeOnPanelClick": { "alias": "closeOnPanelClick"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "focusTrapEnabled": { "alias": "focusTrapEnabled"; "required": false; }; "focusTrapAutoCaptureEnabled": { "alias": "focusTrapAutoCaptureEnabled"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent"], ["*"], true, never>;
+    static ngAcceptInputType_hideArrow: unknown;
+    static ngAcceptInputType_closeOnPanelClick: unknown;
+    static ngAcceptInputType_closeOnBackdropClick: unknown;
+    static ngAcceptInputType_focusTrapEnabled: unknown;
+    static ngAcceptInputType_focusTrapAutoCaptureEnabled: unknown;
+    static ngAcceptInputType_hasBackdrop: unknown;
+}
+
+declare class MtxPopoverTarget {
+    elementRef: ElementRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverTarget, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverTarget, "mtx-popover-target, [mtxPopoverTarget]", ["mtxPopoverTarget"], {}, {}, never, never, true, never>;
+}
+
+/** Injection token that determines the scroll handling while the popover is open. */
+declare const MTX_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MTX_POPOVER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof MTX_POPOVER_SCROLL_STRATEGY_FACTORY;
+};
+/**
+ * This directive is intended to be used in conjunction with an `mtx-popover` tag. It is
+ * responsible for toggling the display of the provided popover instance.
+ */
+declare class MtxPopoverTrigger implements AfterContentInit, OnDestroy {
+    private _overlay;
+    private _elementRef;
+    private _viewContainerRef;
+    private _dir;
+    private _changeDetectorRef;
+    private _focusMonitor;
+    private _portal?;
+    private _overlayRef;
+    private _popoverOpen;
+    private _halt;
+    private _positionSubscription;
+    private _popoverCloseSubscription;
+    private _pendingRemoval;
+    private _closingActionsSubscription;
+    private _scrollStrategy;
+    private _mouseoverTimer;
+    _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
+    /** References the popover instance that the trigger is associated with. */
+    get popover(): MtxPopoverPanel;
+    set popover(popover: MtxPopoverPanel);
+    private _popover;
+    /** Data to be passed along to any lazily-rendered content. */
+    popoverData: any;
+    /** References the popover target instance that the trigger is associated with. */
+    targetElement?: MtxPopoverTarget;
+    /** Popover trigger event */
+    triggerEvent?: MtxPopoverTriggerEvent;
+    /** Event emitted when the associated popover is opened. */
+    popoverOpened: EventEmitter<void>;
+    /** Event emitted when the associated popover is closed. */
+    popoverClosed: EventEmitter<void>;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    private _setCurrentConfig;
+    /** Whether the popover is open. */
+    get popoverOpen(): boolean;
+    /** The text direction of the containing app. */
+    get dir(): Direction;
+    /** Handles mouse click on the trigger. */
+    _handleClick(event: MouseEvent): void;
+    /** Handles mouse enter on the trigger. */
+    _handleMouseEnter(event: MouseEvent): void;
+    /** Handles mouse leave on the trigger. */
+    _handleMouseLeave(event: MouseEvent): void;
+    /** Handles mouse presses on the trigger. */
+    _handleMousedown(event: MouseEvent): void;
+    /** Handles key presses on the trigger. */
+    _handleKeydown(event: KeyboardEvent): void;
+    /** Toggles the popover between the open and closed states. */
+    togglePopover(): void;
+    /** Opens the popover. */
+    openPopover(): void;
+    /** Closes the popover. */
+    closePopover(): void;
+    /**
+     * Focuses the popover trigger.
+     * @param origin Source of the popover trigger's focus.
+     */
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    /** Removes the popover from the DOM. */
+    private _destroyPopover;
+    /**
+     * This method sets the popover state to open.
+     */
+    private _initPopover;
+    private _setIsPopoverOpen;
+    /**
+     * This method checks that a valid instance of MdPopover has been passed into
+     * `mtxPopoverTriggerFor`. If not, an exception is thrown.
+     */
+    private _checkPopover;
+    /**
+     * This method creates the overlay from the provided popover's template and saves its
+     * OverlayRef so that it can be attached to the DOM when openPopover is called.
+     */
+    private _createOverlay;
+    /**
+     * This method builds the configuration object needed to create the overlay, the OverlayConfig.
+     * @returns OverlayConfig
+     */
+    private _getOverlayConfig;
+    private _getTargetElement;
+    /**
+     * Listens to changes in the position of the overlay and sets the correct classes
+     * on the popover based on the new position. This ensures the animation origin is always
+     * correct, even if a fallback position is used for the overlay.
+     */
+    private _subscribeToPositions;
+    /**
+     * Sets the appropriate positions on a position strategy
+     * so the overlay connects with the trigger correctly.
+     * @param positionStrategy Strategy whose position to update.
+     */
+    private _setPosition;
+    /** Returns a stream that emits whenever an action that should close the popover occurs. */
+    private _popoverClosingActions;
+    /** Gets the portal that should be attached to the overlay. */
+    private _getPortal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverTrigger, "[mtx-popover-trigger-for], [mtxPopoverTriggerFor]", ["mtxPopoverTrigger"], { "popover": { "alias": "mtxPopoverTriggerFor"; "required": false; }; "popoverData": { "alias": "mtxPopoverTriggerData"; "required": false; }; "targetElement": { "alias": "mtxPopoverTargetAt"; "required": false; }; "triggerEvent": { "alias": "mtxPopoverTriggerOn"; "required": false; }; }, { "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>;
+}
+
+declare class MtxPopoverModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPopoverModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof MtxPopover, typeof MtxPopoverTrigger, typeof MtxPopoverTarget, typeof MtxPopoverContent], [typeof MtxPopover, typeof MtxPopoverTrigger, typeof MtxPopoverTarget, typeof MtxPopoverContent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxPopoverModule>;
+}
+
+/**
+ * Animations used by the mtx-popover component.
+ * Animation duration and timing values are based on:
+ * https://material.io/guidelines/components/menus.html#menus-usage
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const mtxPopoverAnimations: {
+    readonly transformPopover: any;
+};
+
+export { MTX_POPOVER_CONTENT, MTX_POPOVER_DEFAULT_OPTIONS, MTX_POPOVER_DEFAULT_OPTIONS_FACTORY, MTX_POPOVER_SCROLL_STRATEGY, MTX_POPOVER_SCROLL_STRATEGY_FACTORY, MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxPopover, MtxPopoverContent, MtxPopoverModule, MtxPopoverTarget, MtxPopoverTrigger, _MtxPopoverContentBase, mtxPopoverAnimations };
+export type { MtxPopoverDefaultOptions, MtxPopoverPanel, MtxPopoverPosition, MtxPopoverPositionEnd, MtxPopoverPositionStart, MtxPopoverTriggerEvent, PopoverCloseReason };

package/popover/popover.scss

@@ -1,10 +1,10 @@
 /* stylelint-disable keyframes-name-pattern */
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/popover' as tokens-mtx-popover;
+@use './m3-popover';
 
-$arrow-size: 1em; // 16px default
+$fallbacks: m3-popover.get-tokens();
 
-$_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
+$arrow-size: 1em; // 16px default
 
 @keyframes _mtx-popover-enter {
   from {
@@ -35,12 +35,9 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
   font-size: inherit; // It can change the arrow size
   outline: 0;
   animation: _mtx-popover-enter 120ms cubic-bezier(0, 0, 0.2, 1);
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(border-radius, container-shape);
-    @include token-utils.create-token-slot(background-color, background-color);
-    @include token-utils.create-token-slot(color, text-color);
-  }
+  border-radius: token-utils.slot(popover-container-shape, $fallbacks);
+  background-color: token-utils.slot(popover-background-color, $fallbacks);
+  color: token-utils.slot(popover-text-color, $fallbacks);
 
   &.mtx-popover-panel-exit-animation {
     animation: _mtx-popover-exit 100ms 25ms linear forwards;
@@ -59,28 +56,28 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
   }
 
   &[class*='mtx-popover-below'] {
-    margin-top: calc(#{$arrow-size * .5} + 2px);
+    margin-top: calc(#{$arrow-size * 0.5} + 2px);
   }
 
   &[class*='mtx-popover-above'] {
-    margin-bottom: calc(#{$arrow-size * .5} + 2px);
+    margin-bottom: calc(#{$arrow-size * 0.5} + 2px);
   }
 
   &[class*='mtx-popover-before'] {
-    margin-right: calc(#{$arrow-size * .5} + 2px);
+    margin-right: calc(#{$arrow-size * 0.5} + 2px);
 
     [dir='rtl'] & {
       margin-right: auto;
-      margin-left: calc(#{$arrow-size * .5} + 2px);
+      margin-left: calc(#{$arrow-size * 0.5} + 2px);
     }
   }
 
   &[class*='mtx-popover-after'] {
-    margin-left: calc(#{$arrow-size * .5} + 2px);
+    margin-left: calc(#{$arrow-size * 0.5} + 2px);
 
     [dir='rtl'] & {
       margin-left: auto;
-      margin-right: calc(#{$arrow-size * .5} + 2px);
+      margin-right: calc(#{$arrow-size * 0.5} + 2px);
     }
   }
 
@@ -97,21 +94,18 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
     position: absolute;
     display: inline-block;
     content: '';
-    border-width: $arrow-size * .5;
+    border-width: $arrow-size * 0.5;
     border-style: solid;
   }
 
-  @include token-utils.use-tokens($_tokens...) {
-    &::before {
-      @include token-utils.create-token-slot(border-color, outline-color);
-    }
-
-    &::after {
-      border-width: calc(#{$arrow-size * .5} - 1px);
-      @include token-utils.create-token-slot(border-color, background-color);
-    }
+  &::before {
+    border-color: token-utils.slot(popover-outline-color, $fallbacks);
   }
 
+  &::after {
+    border-width: calc(#{$arrow-size * 0.5} - 1px);
+    border-color: token-utils.slot(popover-background-color, $fallbacks);
+  }
 }
 
 // Arrow up and down
@@ -203,11 +197,11 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
       }
 
       &::before {
-        border-right-width: $arrow-size * .5;
+        border-right-width: $arrow-size * 0.5;
       }
 
       &::after {
-        border-right-width: calc(#{$arrow-size * .5} - 1px);
+        border-right-width: calc(#{$arrow-size * 0.5} - 1px);
       }
     }
   }
@@ -235,11 +229,11 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
       }
 
       &::before {
-        border-left-width: $arrow-size * .5;
+        border-left-width: $arrow-size * 0.5;
       }
 
       &::after {
-        border-left-width: calc(#{$arrow-size * .5} - 1px);
+        border-left-width: calc(#{$arrow-size * 0.5} - 1px);
       }
     }
   }

package/prebuilt-themes/azure-blue.css

@@ -1 +1 @@
-html{--mat-sys-background: #fdfbff;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #410002;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #001b3f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #131c2b;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #00006e;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #fdfbff;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f}html{--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500}html{--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px}html{--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}
+html{--mat-sys-background: #faf9fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #00458f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #3e4759;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #0000ef;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #faf9fd;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f}html{--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;--mat-sys-display-large-font: Roboto, sans-serif;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;--mat-sys-display-medium-font: Roboto, sans-serif;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;--mat-sys-display-small-font: Roboto, sans-serif;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;--mat-sys-headline-large-font: Roboto, sans-serif;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;--mat-sys-headline-medium-font: Roboto, sans-serif;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;--mat-sys-headline-small-font: Roboto, sans-serif;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;--mat-sys-title-large-font: Roboto, sans-serif;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500}html{--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px}html{--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}

package/prebuilt-themes/cyan-orange.css

@@ -1 +1 @@
-html{--mat-sys-background: #191c1c;--mat-sys-error: #ffb4ab;--mat-sys-error-container: #93000a;--mat-sys-inverse-on-surface: #2d3131;--mat-sys-inverse-primary: #006a6a;--mat-sys-inverse-surface: #e0e3e2;--mat-sys-on-background: #e0e3e2;--mat-sys-on-error: #690005;--mat-sys-on-error-container: #ffdad6;--mat-sys-on-primary: #003737;--mat-sys-on-primary-container: #00fbfb;--mat-sys-on-primary-fixed: #002020;--mat-sys-on-primary-fixed-variant: #004f4f;--mat-sys-on-secondary: #1b3534;--mat-sys-on-secondary-container: #cce8e7;--mat-sys-on-secondary-fixed: #051f1f;--mat-sys-on-secondary-fixed-variant: #324b4b;--mat-sys-on-surface: #e0e3e2;--mat-sys-on-surface-variant: #bec9c8;--mat-sys-on-tertiary: #502400;--mat-sys-on-tertiary-container: #ffdcc7;--mat-sys-on-tertiary-fixed: #311300;--mat-sys-on-tertiary-fixed-variant: #723600;--mat-sys-outline: #889392;--mat-sys-outline-variant: #3f4948;--mat-sys-primary: #00dddd;--mat-sys-primary-container: #004f4f;--mat-sys-primary-fixed: #00fbfb;--mat-sys-primary-fixed-dim: #00dddd;--mat-sys-scrim: #000000;--mat-sys-secondary: #b0cccb;--mat-sys-secondary-container: #324b4b;--mat-sys-secondary-fixed: #cce8e7;--mat-sys-secondary-fixed-dim: #b0cccb;--mat-sys-shadow: #000000;--mat-sys-surface: #191c1c;--mat-sys-surface-bright: #363a39;--mat-sys-surface-container: #1c2020;--mat-sys-surface-container-high: #272b2a;--mat-sys-surface-container-highest: #313635;--mat-sys-surface-container-low: #191c1c;--mat-sys-surface-container-lowest: #0b0f0e;--mat-sys-surface-dim: #101414;--mat-sys-surface-tint: #00dddd;--mat-sys-surface-variant: #3f4948;--mat-sys-tertiary: #ffb787;--mat-sys-tertiary-container: #723600;--mat-sys-tertiary-fixed: #ffdcc7;--mat-sys-tertiary-fixed-dim: #ffb787;--mat-sys-neutral-variant20: #293232;--mat-sys-neutral10: #191c1c}html{--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500}html{--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px}html{--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}
+html{--mat-sys-background: #101414;--mat-sys-error: #ffb4ab;--mat-sys-error-container: #93000a;--mat-sys-inverse-on-surface: #2d3131;--mat-sys-inverse-primary: #006a6a;--mat-sys-inverse-surface: #e0e3e2;--mat-sys-on-background: #e0e3e2;--mat-sys-on-error: #690005;--mat-sys-on-error-container: #ffdad6;--mat-sys-on-primary: #003737;--mat-sys-on-primary-container: #00fbfb;--mat-sys-on-primary-fixed: #002020;--mat-sys-on-primary-fixed-variant: #004f4f;--mat-sys-on-secondary: #1b3534;--mat-sys-on-secondary-container: #cce8e7;--mat-sys-on-secondary-fixed: #051f1f;--mat-sys-on-secondary-fixed-variant: #324b4b;--mat-sys-on-surface: #e0e3e2;--mat-sys-on-surface-variant: #dae5e4;--mat-sys-on-tertiary: #502400;--mat-sys-on-tertiary-container: #ffdcc7;--mat-sys-on-tertiary-fixed: #311300;--mat-sys-on-tertiary-fixed-variant: #723600;--mat-sys-outline: #889392;--mat-sys-outline-variant: #3f4948;--mat-sys-primary: #00dddd;--mat-sys-primary-container: #004f4f;--mat-sys-primary-fixed: #00fbfb;--mat-sys-primary-fixed-dim: #00dddd;--mat-sys-scrim: #000000;--mat-sys-secondary: #b0cccb;--mat-sys-secondary-container: #324b4b;--mat-sys-secondary-fixed: #cce8e7;--mat-sys-secondary-fixed-dim: #b0cccb;--mat-sys-shadow: #000000;--mat-sys-surface: #101414;--mat-sys-surface-bright: #363a39;--mat-sys-surface-container: #1c2020;--mat-sys-surface-container-high: #272b2a;--mat-sys-surface-container-highest: #313635;--mat-sys-surface-container-low: #191c1c;--mat-sys-surface-container-lowest: #0b0f0e;--mat-sys-surface-dim: #101414;--mat-sys-surface-tint: #00dddd;--mat-sys-surface-variant: #3f4948;--mat-sys-tertiary: #ffb787;--mat-sys-tertiary-container: #723600;--mat-sys-tertiary-fixed: #ffdcc7;--mat-sys-tertiary-fixed-dim: #ffb787;--mat-sys-neutral-variant20: #293232;--mat-sys-neutral10: #191c1c}html{--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;--mat-sys-display-large-font: Roboto, sans-serif;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;--mat-sys-display-medium-font: Roboto, sans-serif;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;--mat-sys-display-small-font: Roboto, sans-serif;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;--mat-sys-headline-large-font: Roboto, sans-serif;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;--mat-sys-headline-medium-font: Roboto, sans-serif;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;--mat-sys-headline-small-font: Roboto, sans-serif;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;--mat-sys-title-large-font: Roboto, sans-serif;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500}html{--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px}html{--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}