@skyux/popovers 14.6.0 → 14.6.2

package/fesm2022/skyux-popovers.mjs

@@ -1,12 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Component, Input, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, signal, computed, Directive, ChangeDetectorRef, EnvironmentInjector, TemplateRef, ContentChild, ViewChild, EventEmitter, ContentChildren, Output, Optional, ViewContainerRef, HostBinding, Inject, Renderer2, Injectable } from '@angular/core';
-import * as i1$1 from '@skyux/core';
-import { SkyContentInfoProvider, SkyAffixService, SkyIdService, SkyOverlayService, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyIdModule, SkyScreenReaderLabelDirective, SkyAppWindowRef, _SkyTransitionEndHandlerDirective } from '@skyux/core';
+import { NgModule, Component, inject, ElementRef, ChangeDetectorRef, Renderer2, Input, ViewEncapsulation, ChangeDetectionStrategy, signal, computed, Directive, EnvironmentInjector, TemplateRef, ContentChild, ViewChild, EventEmitter, ContentChildren, Output, ViewContainerRef, HostBinding, Injectable } from '@angular/core';
+import * as i4 from '@skyux/core';
+import { SkyContentInfoProvider, SkyAffixService, SkyIdService, SkyOverlayService, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyIdModule, SkyScreenReaderLabelDirective, SkyCoreAdapterService, SkyAppWindowRef, _SkyTransitionEndHandlerDirective } from '@skyux/core';
 import * as i3 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i3$1 from '@skyux/theme';
+import * as i5 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import * as i6 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
@@ -73,6 +73,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Specifies the items to display on the dropdown menu.
  */
 class SkyDropdownItemComponent {
+    constructor() {
+        this.isActive = false;
+        this.#_ariaRole = 'menuitem';
+        this.elementRef = inject(ElementRef);
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#renderer = inject(Renderer2);
+    }
     /**
      * The ARIA role for the dropdown menu item
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
@@ -90,13 +97,6 @@ class SkyDropdownItemComponent {
     #_ariaRole;
     #changeDetector;
     #renderer;
-    constructor(elementRef, changeDetector, renderer) {
-        this.elementRef = elementRef;
-        this.isActive = false;
-        this.#_ariaRole = 'menuitem';
-        this.#changeDetector = changeDetector;
-        this.#renderer = renderer;
-    }
     ngAfterViewInit() {
         // Make sure anchor elements are tab-able.
         const buttonElement = this.#getButtonElement();
@@ -124,57 +124,16 @@ class SkyDropdownItemComponent {
     #getButtonElement() {
         return this.elementRef.nativeElement.querySelector('button,a');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDropdownItemComponent, isStandalone: false, selector: "sky-dropdown-item", inputs: { ariaRole: "ariaRole" }, ngImport: i0, template: "<div\n  class=\"sky-dropdown-item\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-dropdown-item-active': isActive\n  }\"\n>\n  <ng-content />\n</div>\n", styles: [".sky-dropdown-item:not(.sky-theme-modern *){--sky-override-dropdown-item-active-class-background: #eeeeef;--sky-override-dropdown-item-border-radius: 0px;--sky-override-dropdown-item-box-shadow: none;--sky-override-dropdown-item-box-shadow-focus: none;--sky-override-dropdown-item-color-background: transparent;--sky-override-dropdown-item-color-text: #212327;--sky-override-dropdown-item-disabled-color-background: transparent;--sky-override-dropdown-item-disabled-color-text: var( --sky-text-color-deemphasized );--sky-override-dropdown-item-disabled-box-shadow: none;--sky-override-dropdown-item-disabled-font-size: 15px;--sky-override-dropdown-item-disabled-font-style: italic;--sky-override-dropdown-item-focus-visible-background: #eeeeef;--sky-override-dropdown-item-hover-background: #eeeeef;--sky-override-dropdown-item-margin: 4px;--sky-override-dropdown-item-padding: 3px 20px}.sky-dropdown-item{background-color:var(--sky-override-dropdown-item-color-background, --sky-color-background-action-tertiary-base);border:none;display:block;margin:var(--sky-override-dropdown-item-margin, 0);min-width:160px;text-align:left;transition:box-shadow var(--sky-global-duration-short)}.sky-dropdown-item.sky-dropdown-item-active a,.sky-dropdown-item.sky-dropdown-item-active button{background-color:var(--sky-override-dropdown-item-active-class-background, var(--sky-color-background-action-tertiary-active))}.sky-dropdown-item>a,.sky-dropdown-item>button{border-radius:var(--sky-override-dropdown-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-dropdown-item-color-background, --sky-color-background-action-tertiary-base);box-shadow:var(--sky-override-dropdown-item-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base));border:none;color:var(--sky-override-dropdown-item-color-text, var(--sky-color-text-default));cursor:pointer;display:block;padding:var(--sky-override-dropdown-item-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-left) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-right));text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none;background-color:var(--sky-override-dropdown-item-hover-background, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-dropdown-item-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-dropdown-item>a:active,.sky-dropdown-item>button:active{background-color:var(--sky-override-dropdown-item-color-background, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-dropdown-item-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-dropdown-item>a:focus-visible:not(:active),.sky-dropdown-item>button:focus-visible:not(:active){background-color:var(--sky-override-dropdown-item-focus-visible-background, var(--sky-color-background-action-tertiary-focus));box-shadow:var(--sky-override-dropdown-item-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-dropdown-item>a[disabled],.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>a[disabled]:focus-visible,.sky-dropdown-item>a[disabled]:active,.sky-dropdown-item>button[disabled],.sky-dropdown-item>button[disabled]:hover,.sky-dropdown-item>button[disabled]:focus-visible,.sky-dropdown-item>button[disabled]:active{box-shadow:var(--sky-override-dropdown-item-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled));background-color:var(--sky-override-dropdown-item-disabled-color-background, var(--sky-color-background-action-tertiary-disabled));color:var(--sky-override-dropdown-item-disabled-color-text, var(--sky-color-text-deemphasized));cursor:default;font-size:var(--sky-override-dropdown-item-disabled-font-size, inherit);font-style:var(--sky-override-dropdown-item-disabled-font-style, inherit)}.sky-dropdown-item>a[disabled]:focus-visible,.sky-dropdown-item>a[disabled]:hover:focus-visible,.sky-dropdown-item>a[disabled]:focus-visible:focus-visible,.sky-dropdown-item>a[disabled]:active:focus-visible,.sky-dropdown-item>button[disabled]:focus-visible,.sky-dropdown-item>button[disabled]:hover:focus-visible,.sky-dropdown-item>button[disabled]:focus-visible:focus-visible,.sky-dropdown-item>button[disabled]:active:focus-visible{box-shadow:var(--sky-override-dropdown-item-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-dropdown-item>a,:host-context(.sky-theme-modern) .sky-dropdown-item>button{outline:none}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"sky-dropdown-item\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-dropdown-item-active': isActive\n  }\"\n>\n  <ng-content />\n</div>\n", styles: [".sky-dropdown-item:not(.sky-theme-modern *){--sky-override-dropdown-item-active-class-background: #eeeeef;--sky-override-dropdown-item-border-radius: 0px;--sky-override-dropdown-item-box-shadow: none;--sky-override-dropdown-item-box-shadow-focus: none;--sky-override-dropdown-item-color-background: transparent;--sky-override-dropdown-item-color-text: #212327;--sky-override-dropdown-item-disabled-color-background: transparent;--sky-override-dropdown-item-disabled-color-text: var( --sky-text-color-deemphasized );--sky-override-dropdown-item-disabled-box-shadow: none;--sky-override-dropdown-item-disabled-font-size: 15px;--sky-override-dropdown-item-disabled-font-style: italic;--sky-override-dropdown-item-focus-visible-background: #eeeeef;--sky-override-dropdown-item-hover-background: #eeeeef;--sky-override-dropdown-item-margin: 4px;--sky-override-dropdown-item-padding: 3px 20px}.sky-dropdown-item{background-color:var(--sky-override-dropdown-item-color-background, --sky-color-background-action-tertiary-base);border:none;display:block;margin:var(--sky-override-dropdown-item-margin, 0);min-width:160px;text-align:left;transition:box-shadow var(--sky-global-duration-short)}.sky-dropdown-item.sky-dropdown-item-active a,.sky-dropdown-item.sky-dropdown-item-active button{background-color:var(--sky-override-dropdown-item-active-class-background, var(--sky-color-background-action-tertiary-active))}.sky-dropdown-item>a,.sky-dropdown-item>button{border-radius:var(--sky-override-dropdown-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-dropdown-item-color-background, --sky-color-background-action-tertiary-base);box-shadow:var(--sky-override-dropdown-item-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base));border:none;color:var(--sky-override-dropdown-item-color-text, var(--sky-color-text-default));cursor:pointer;display:block;padding:var(--sky-override-dropdown-item-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-left) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-right));text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none;background-color:var(--sky-override-dropdown-item-hover-background, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-dropdown-item-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-dropdown-item>a:active,.sky-dropdown-item>button:active{background-color:var(--sky-override-dropdown-item-color-background, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-dropdown-item-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-dropdown-item>a:focus-visible:not(:active),.sky-dropdown-item>button:focus-visible:not(:active){background-color:var(--sky-override-dropdown-item-focus-visible-background, var(--sky-color-background-action-tertiary-focus));box-shadow:var(--sky-override-dropdown-item-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-dropdown-item>a[disabled],.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>a[disabled]:focus-visible,.sky-dropdown-item>a[disabled]:active,.sky-dropdown-item>button[disabled],.sky-dropdown-item>button[disabled]:hover,.sky-dropdown-item>button[disabled]:focus-visible,.sky-dropdown-item>button[disabled]:active{box-shadow:var(--sky-override-dropdown-item-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled));background-color:var(--sky-override-dropdown-item-disabled-color-background, var(--sky-color-background-action-tertiary-disabled));color:var(--sky-override-dropdown-item-disabled-color-text, var(--sky-color-text-deemphasized));cursor:default;font-size:var(--sky-override-dropdown-item-disabled-font-size, inherit);font-style:var(--sky-override-dropdown-item-disabled-font-style, inherit)}.sky-dropdown-item>a[disabled]:focus-visible,.sky-dropdown-item>a[disabled]:hover:focus-visible,.sky-dropdown-item>a[disabled]:focus-visible:focus-visible,.sky-dropdown-item>a[disabled]:active:focus-visible,.sky-dropdown-item>button[disabled]:focus-visible,.sky-dropdown-item>button[disabled]:hover:focus-visible,.sky-dropdown-item>button[disabled]:focus-visible:focus-visible,.sky-dropdown-item>button[disabled]:active:focus-visible{box-shadow:var(--sky-override-dropdown-item-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-dropdown-item>a,:host-context(.sky-theme-modern) .sky-dropdown-item>button{outline:none}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { ariaRole: [{
+        }], propDecorators: { ariaRole: [{
                 type: Input
             }] } });
 
-/**
- * The type of message to send.
- * @internal
- */
-var SkyDropdownMessageType;
-(function (SkyDropdownMessageType) {
-    /**
-     * Opens the dropdown menu.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["Open"] = 0] = "Open";
-    /**
-     *  Closes the dropdown menu.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["Close"] = 1] = "Close";
-    /**
-     * Puts focus on the dropdown button.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["FocusTriggerButton"] = 2] = "FocusTriggerButton";
-    /**
-     * Puts focus on the next item in the dropdown menu.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["FocusNextItem"] = 3] = "FocusNextItem";
-    /**
-     * Puts focus on the previous item in the dropdown menu.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["FocusPreviousItem"] = 4] = "FocusPreviousItem";
-    /**
-     * Repositions the dropdown menu next to the dropdown button. This is useful for when the
-     * dropdown menu's width and height change while it is open.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["Reposition"] = 5] = "Reposition";
-    /**
-     * Puts focus on the first item in the dropdown menu.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["FocusFirstItem"] = 6] = "FocusFirstItem";
-    /**
-     * Puts focus on the last item in the dropdown menu.
-     */
-    SkyDropdownMessageType[SkyDropdownMessageType["FocusLastItem"] = 7] = "FocusLastItem";
-})(SkyDropdownMessageType || (SkyDropdownMessageType = {}));
-
 function parseAffixHorizontalAlignment$1(alignment) {
     switch (alignment) {
         case 'center':
@@ -274,6 +233,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * The type of message to send.
+ * @internal
+ */
+var SkyDropdownMessageType;
+(function (SkyDropdownMessageType) {
+    /**
+     * Opens the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["Open"] = 0] = "Open";
+    /**
+     *  Closes the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["Close"] = 1] = "Close";
+    /**
+     * Puts focus on the dropdown button.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusTriggerButton"] = 2] = "FocusTriggerButton";
+    /**
+     * Puts focus on the next item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusNextItem"] = 3] = "FocusNextItem";
+    /**
+     * Puts focus on the previous item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusPreviousItem"] = 4] = "FocusPreviousItem";
+    /**
+     * Repositions the dropdown menu next to the dropdown button. This is useful for when the
+     * dropdown menu's width and height change while it is open.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["Reposition"] = 5] = "Reposition";
+    /**
+     * Puts focus on the first item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusFirstItem"] = 6] = "FocusFirstItem";
+    /**
+     * Puts focus on the last item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusLastItem"] = 7] = "FocusLastItem";
+})(SkyDropdownMessageType || (SkyDropdownMessageType = {}));
+
 const DEFAULT_BUTTON_STYLE = 'default';
 const DEFAULT_BUTTON_TYPE = 'select';
 const DEFAULT_HORIZONTAL_ALIGNMENT = 'left';
@@ -687,7 +687,7 @@ class SkyDropdownComponent {
         this.messageStream?.next({ type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDropdownComponent, isStandalone: false, selector: "sky-dropdown", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", disabled: "disabled", label: "label", horizontalAlignment: "horizontalAlignment", messageStream: "messageStream", title: "title", trigger: "trigger" }, queries: [{ propertyName: "customTriggerButton", first: true, predicate: SkyDropdownTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "menuContainerElementRef", first: true, predicate: ["menuContainerElementRef"], descendants: true, read: ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: SkyDropdownTriggerDirective }], ngImport: i0, template: "<div class=\"sky-dropdown\">\n  <ng-content select=\"[skyDropdownTrigger]\">\n    <button\n      #triggerButton\n      class=\"sky-btn sky-dropdown-button\"\n      skyDropdownTrigger\n      type=\"button\"\n      [ngClass]=\"[\n        'sky-dropdown-button-type-' + buttonType,\n        'sky-btn-' + buttonStyle\n      ]\"\n    >\n      @switch (buttonType) {\n        @case ('context-menu') {\n          <sky-icon *skyThemeIf=\"'modern'\" iconName=\"more-actions\" />\n          <sky-icon *skyThemeIf=\"'default'\" iconName=\"more-actions\" />\n        }\n        @default {\n          <div class=\"sky-dropdown-button-container\">\n            <div class=\"sky-dropdown-button-content-container\">\n              <ng-content select=\"sky-dropdown-button\" />\n            </div>\n            <div class=\"sky-dropdown-button-icon-container\">\n              <sky-icon\n                class=\"sky-dropdown-caret\"\n                iconName=\"chevron-down\"\n                iconSize=\"s\"\n              />\n            </div>\n          </div>\n        }\n      }\n    </button>\n  </ng-content>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    #menuContainerElementRef\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n  >\n    <ng-content select=\"sky-dropdown-menu\" />\n  </div>\n</ng-template>\n<span\n  skyScreenReaderLabel\n  [createLabel]=\"\n    buttonType === 'context-menu' &&\n    (contentInfoObs | async)?.descriptor?.type === 'elementId'\n  \"\n  [attr.id]=\"screenReaderLabelContextMenuId\"\n>\n  {{\n    'skyux_dropdown_context_menu_with_content_descriptor_el_default_label'\n      | skyLibResources\n  }}\n</span>\n", styles: [".sky-dropdown:not(.sky-theme-modern *){--sky-override-caret-margin-left: 10px;--sky-override-context-menu-border-radius: 50%;--sky-override-context-menu-font-size: 15px;--sky-override-context-menu-line-height: 1.428571429;--sky-override-context-menu-padding: 3px;--sky-override-context-menu-height-width: 30px}.sky-dropdown-button-type-tab:not(.sky-theme-modern *){--sky-override-tab-border-bottom: none;--sky-override-tab-button-radius: 4px;--sky-override-tab-dropdown-color: var(--sky-text-color-on-dark);--sky-override-tab-font-size: 15px;--sky-override-tab-font-weight: 600;--sky-override-tab-line-height: 1.8;--sky-override-tab-outline-active: auto;--sky-override-tab-outline-focus: auto;--sky-override-tab-outline-color-active: black;--sky-override-tab-outline-color-focus: black;--sky-override-tab-padding: 8px 16px;--sky-override-tab-padding-active: 8px 16px;--sky-override-tab-padding-focus: 8px 16px;--sky-override-tab-padding-hover: 8px 16px;--sky-override-tab-selected-background-color: var( --sky-background-color-primary-dark )}.sky-dropdown .sky-dropdown-button-type-tab{background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));border:none;box-shadow:none;border-radius:var(--sky-override-tab-button-radius, var(--sky-border-radius-s)) var(--sky-override-tab-button-radius, var(--sky-border-radius-s)) 0 0;color:var(--sky-override-tab-dropdown-color, var(--sky-color-text-selected));border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));cursor:pointer;display:inline-block;font-size:var(--sky-override-tab-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-tab-font-weight, var(--sky-font-style-body-m));line-height:var(--sky-override-tab-line-height, var(--sky-font-line_height-body-m));padding:var(--sky-override-tab-padding, var(--sky-comp-tab-horizontal-space-inset-top) var(--sky-comp-tab-horizontal-space-inset-right) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) var(--sky-comp-tab-horizontal-space-inset-left));max-width:100%;text-align:left}.sky-dropdown .sky-dropdown-button-type-tab:hover{background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-action-tertiary-hover));border:var(--sky-border-width-action-hover) var(--sky-border-style-accent) var(--sky-color-border-action-tertiary-hover);border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));padding:var(--sky-override-tab-padding-hover, calc(var(--sky-comp-tab-horizontal-space-inset-top) - var(--sky-border-width-action-hover)) calc(var(--sky-comp-tab-horizontal-space-inset-right) - var(--sky-border-width-action-hover)) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-border-width-action-hover)))}.sky-dropdown .sky-dropdown-button-type-tab:active{background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-action-tertiary-active));border:var(--sky-border-width-action-active) var(--sky-border-style-accent) var(--sky-color-border-action-tertiary-active);border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));padding:var(--sky-override-tab-padding-active, calc(var(--sky-comp-tab-horizontal-space-inset-top) - var(--sky-border-width-action-active)) calc(var(--sky-comp-tab-horizontal-space-inset-right) - var(--sky-border-width-action-active)) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-border-width-action-active)))}.sky-dropdown .sky-dropdown-button-type-tab:focus-visible{outline:var(--sky-override-tab-outline-focus, none);outline-color:var(--sky-override-tab-outline-color-focus, none)}.sky-dropdown .sky-dropdown-button-type-tab:focus-visible:not(:active){background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-action-tertiary-focus));border:var(--sky-border-width-action-focus) var(--sky-border-style-accent) var(--sky-color-border-action-tertiary-focus);border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));box-shadow:none;outline:var(--sky-override-tab-outline-active, none);outline-color:var(--sky-override-tab-outline-color-active, none);padding:var(--sky-override-tab-padding-focus, calc(var(--sky-comp-tab-horizontal-space-inset-top) - var(--sky-border-width-action-focus)) calc(var(--sky-comp-tab-horizontal-space-inset-right) - var(--sky-border-width-action-focus)) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-border-width-action-focus)))}.sky-dropdown-button-type-context-menu{border-radius:var(--sky-override-context-menu-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-context-menu-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));font-size:var(--sky-override-context-menu-font-size, var(--sky-font-size-body-l));line-height:var(--sky-override-context-menu-line-height, 1);height:var(--sky-override-context-menu-height-width);width:var(--sky-override-context-menu-height-width)}:host-context(.sky-toolbar-container) .sky-dropdown-button.sky-btn-link{color:#212327}.sky-dropdown-caret{margin-left:var(--sky-override-caret-margin-left, var(--sky-space-gap-icon-m))}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu{background-color:var(--sky-color-background-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}.sky-theme-modern .sky-dropdown-button-type-context-menu{background-color:var(--sky-color-background-action-tertiary-base)}.sky-theme-modern .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SkyDropdownTriggerDirective, selector: "[skyDropdownTrigger]" }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i1$1.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "directive", type: i3$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDropdownComponent, isStandalone: false, selector: "sky-dropdown", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", disabled: "disabled", label: "label", horizontalAlignment: "horizontalAlignment", messageStream: "messageStream", title: "title", trigger: "trigger" }, queries: [{ propertyName: "customTriggerButton", first: true, predicate: SkyDropdownTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "menuContainerElementRef", first: true, predicate: ["menuContainerElementRef"], descendants: true, read: ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: SkyDropdownTriggerDirective }], ngImport: i0, template: "<div class=\"sky-dropdown\">\n  <ng-content select=\"[skyDropdownTrigger]\">\n    <button\n      #triggerButton\n      class=\"sky-btn sky-dropdown-button\"\n      skyDropdownTrigger\n      type=\"button\"\n      [ngClass]=\"[\n        'sky-dropdown-button-type-' + buttonType,\n        'sky-btn-' + buttonStyle\n      ]\"\n    >\n      @switch (buttonType) {\n        @case ('context-menu') {\n          <sky-icon *skyThemeIf=\"'modern'\" iconName=\"more-actions\" />\n          <sky-icon *skyThemeIf=\"'default'\" iconName=\"more-actions\" />\n        }\n        @default {\n          <div class=\"sky-dropdown-button-container\">\n            <div class=\"sky-dropdown-button-content-container\">\n              <ng-content select=\"sky-dropdown-button\" />\n            </div>\n            <div class=\"sky-dropdown-button-icon-container\">\n              <sky-icon\n                class=\"sky-dropdown-caret\"\n                iconName=\"chevron-down\"\n                iconSize=\"s\"\n              />\n            </div>\n          </div>\n        }\n      }\n    </button>\n  </ng-content>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    #menuContainerElementRef\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n  >\n    <ng-content select=\"sky-dropdown-menu\" />\n  </div>\n</ng-template>\n<span\n  skyScreenReaderLabel\n  [createLabel]=\"\n    buttonType === 'context-menu' &&\n    (contentInfoObs | async)?.descriptor?.type === 'elementId'\n  \"\n  [attr.id]=\"screenReaderLabelContextMenuId\"\n>\n  {{\n    'skyux_dropdown_context_menu_with_content_descriptor_el_default_label'\n      | skyLibResources\n  }}\n</span>\n", styles: [".sky-dropdown:not(.sky-theme-modern *){--sky-override-caret-margin-left: 10px;--sky-override-context-menu-border-radius: 50%;--sky-override-context-menu-font-size: 15px;--sky-override-context-menu-line-height: 1.428571429;--sky-override-context-menu-padding: 3px;--sky-override-context-menu-height-width: 30px}.sky-dropdown-button-type-tab:not(.sky-theme-modern *){--sky-override-tab-border-bottom: none;--sky-override-tab-button-radius: 4px;--sky-override-tab-dropdown-color: var(--sky-text-color-on-dark);--sky-override-tab-font-size: 15px;--sky-override-tab-font-weight: 600;--sky-override-tab-line-height: 1.8;--sky-override-tab-outline-active: auto;--sky-override-tab-outline-focus: auto;--sky-override-tab-outline-color-active: black;--sky-override-tab-outline-color-focus: black;--sky-override-tab-padding: 8px 16px;--sky-override-tab-padding-active: 8px 16px;--sky-override-tab-padding-focus: 8px 16px;--sky-override-tab-padding-hover: 8px 16px;--sky-override-tab-selected-background-color: var( --sky-background-color-primary-dark )}.sky-dropdown .sky-dropdown-button-type-tab{background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));border:none;box-shadow:none;border-radius:var(--sky-override-tab-button-radius, var(--sky-border-radius-s)) var(--sky-override-tab-button-radius, var(--sky-border-radius-s)) 0 0;color:var(--sky-override-tab-dropdown-color, var(--sky-color-text-selected));border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));cursor:pointer;display:inline-block;font-size:var(--sky-override-tab-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-tab-font-weight, var(--sky-font-style-body-m));line-height:var(--sky-override-tab-line-height, var(--sky-font-line_height-body-m));padding:var(--sky-override-tab-padding, var(--sky-comp-tab-horizontal-space-inset-top) var(--sky-comp-tab-horizontal-space-inset-right) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) var(--sky-comp-tab-horizontal-space-inset-left));max-width:100%;text-align:left}.sky-dropdown .sky-dropdown-button-type-tab:hover{background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-action-tertiary-hover));border:var(--sky-border-width-action-hover) var(--sky-border-style-accent) var(--sky-color-border-action-tertiary-hover);border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));padding:var(--sky-override-tab-padding-hover, calc(var(--sky-comp-tab-horizontal-space-inset-top) - var(--sky-border-width-action-hover)) calc(var(--sky-comp-tab-horizontal-space-inset-right) - var(--sky-border-width-action-hover)) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-border-width-action-hover)))}.sky-dropdown .sky-dropdown-button-type-tab:active{background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-action-tertiary-active));border:var(--sky-border-width-action-active) var(--sky-border-style-accent) var(--sky-color-border-action-tertiary-active);border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));padding:var(--sky-override-tab-padding-active, calc(var(--sky-comp-tab-horizontal-space-inset-top) - var(--sky-border-width-action-active)) calc(var(--sky-comp-tab-horizontal-space-inset-right) - var(--sky-border-width-action-active)) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-border-width-action-active)))}.sky-dropdown .sky-dropdown-button-type-tab:focus-visible{outline:var(--sky-override-tab-outline-focus, none);outline-color:var(--sky-override-tab-outline-color-focus, none)}.sky-dropdown .sky-dropdown-button-type-tab:focus-visible:not(:active){background-color:var(--sky-override-tab-selected-background-color, var(--sky-color-background-action-tertiary-focus));border:var(--sky-border-width-action-focus) var(--sky-border-style-accent) var(--sky-color-border-action-tertiary-focus);border-bottom:var(--sky-override-tab-border-bottom, var(--sky-border-width-selected-m) var(--sky-border-style-accent) var(--sky-color-border-selected));box-shadow:none;outline:var(--sky-override-tab-outline-active, none);outline-color:var(--sky-override-tab-outline-color-active, none);padding:var(--sky-override-tab-padding-focus, calc(var(--sky-comp-tab-horizontal-space-inset-top) - var(--sky-border-width-action-focus)) calc(var(--sky-comp-tab-horizontal-space-inset-right) - var(--sky-border-width-action-focus)) calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-m)) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-border-width-action-focus)))}.sky-dropdown-button-type-context-menu{border-radius:var(--sky-override-context-menu-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-context-menu-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));font-size:var(--sky-override-context-menu-font-size, var(--sky-font-size-body-l));line-height:var(--sky-override-context-menu-line-height, 1);height:var(--sky-override-context-menu-height-width);width:var(--sky-override-context-menu-height-width)}:host-context(.sky-toolbar-container) .sky-dropdown-button.sky-btn-link{color:#212327}.sky-dropdown-caret{margin-left:var(--sky-override-caret-margin-left, var(--sky-space-gap-icon-m))}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu{background-color:var(--sky-color-background-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}.sky-theme-modern .sky-dropdown-button-type-context-menu{background-color:var(--sky-color-background-action-tertiary-base)}.sky-theme-modern .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SkyDropdownTriggerDirective, selector: "[skyDropdownTrigger]" }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i4.SkyScreenReaderLabelDirective, selector: "[skyScreenReaderLabel]", inputs: ["createLabel"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownComponent, decorators: [{
             type: Component,
@@ -735,6 +735,25 @@ let nextId = 0;
  *
  */
 class SkyDropdownMenuComponent {
+    constructor() {
+        /**
+         * Fires when the dropdown menu's active index or selected item changes. This event provides an
+         * observable to emit changes, and the response is of
+         * the SkyDropdownMenuChange type.
+         * @internal
+         */
+        this.menuChanges = new EventEmitter();
+        this.dropdownMenuId = `sky-dropdown-menu-${++nextId}`;
+        this.#ngUnsubscribe = new Subject();
+        this.#_ariaRole = 'menu';
+        this.#_menuIndex = 0;
+        this.#_useNativeFocus = true;
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#elementRef = inject(ElementRef);
+        this.#dropdownComponent = inject(SkyDropdownComponent, {
+            optional: true,
+        });
+    }
     /**
      * The ARIA role for the dropdown menu
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
@@ -783,23 +802,6 @@ class SkyDropdownMenuComponent {
     #changeDetector;
     #elementRef;
     #dropdownComponent;
-    constructor(changeDetector, elementRef, dropdownComponent) {
-        /**
-         * Fires when the dropdown menu's active index or selected item changes. This event provides an
-         * observable to emit changes, and the response is of
-         * the SkyDropdownMenuChange type.
-         * @internal
-         */
-        this.menuChanges = new EventEmitter();
-        this.dropdownMenuId = `sky-dropdown-menu-${++nextId}`;
-        this.#ngUnsubscribe = new Subject();
-        this.#_ariaRole = 'menu';
-        this.#_menuIndex = 0;
-        this.#_useNativeFocus = true;
-        this.#changeDetector = changeDetector;
-        this.#elementRef = elementRef;
-        this.#dropdownComponent = dropdownComponent;
-    }
     ngAfterContentInit() {
         /* istanbul ignore else */
         if (this.#dropdownComponent) {
@@ -1013,15 +1015,13 @@ class SkyDropdownMenuComponent {
         const found = this.menuItems.find((item) => item.isFocusable());
         return found !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDropdownMenuComponent, isStandalone: false, selector: "sky-dropdown-menu", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", useNativeFocus: "useNativeFocus" }, outputs: { menuChanges: "menuChanges" }, queries: [{ propertyName: "menuItems", predicate: SkyDropdownItemComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [id]=\"dropdownMenuId\"\n>\n  <ng-content />\n</div>\n", styles: [".sky-dropdown-menu:not(.sky-theme-modern *){--sky-override-dropdown-menu-border-radius: 0px;--sky-override-dropdown-menu-color-background: #fff;--sky-override-dropdown-menu-padding: 0}.sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(100vh - min(50px,5vh));display:flex;flex-direction:column;background-color:var(--sky-override-dropdown-menu-color-background, var(--sky-color-background-container-menu));border-radius:var(--sky-override-dropdown-menu-border-radius, var(--sky-border-radius-m));padding:var(--sky-override-dropdown-menu-padding, var(--sky-comp-dropdown-menu-space-inset-top) var(--sky-comp-dropdown-menu-space-inset-left) var(--sky-comp-dropdown-menu-space-inset-bottom) var(--sky-comp-dropdown-menu-space-inset-right))}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDropdownMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [id]=\"dropdownMenuId\"\n>\n  <ng-content />\n</div>\n", styles: [".sky-dropdown-menu:not(.sky-theme-modern *){--sky-override-dropdown-menu-border-radius: 0px;--sky-override-dropdown-menu-color-background: #fff;--sky-override-dropdown-menu-padding: 0}.sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(100vh - min(50px,5vh));display:flex;flex-direction:column;background-color:var(--sky-override-dropdown-menu-color-background, var(--sky-color-background-container-menu));border-radius:var(--sky-override-dropdown-menu-border-radius, var(--sky-border-radius-m));padding:var(--sky-override-dropdown-menu-padding, var(--sky-comp-dropdown-menu-space-inset-top) var(--sky-comp-dropdown-menu-space-inset-left) var(--sky-comp-dropdown-menu-space-inset-bottom) var(--sky-comp-dropdown-menu-space-inset-right))}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyDropdownComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { ariaLabelledBy: [{
+        }], propDecorators: { ariaLabelledBy: [{
                 type: Input
             }], ariaRole: [{
                 type: Input
@@ -1087,6 +1087,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * @internal
+ */
+class SkyPopoverContext {
+    constructor(args) {
+        this.contentTemplateRef = args.contentTemplateRef;
+    }
+}
+
 function parseAffixPlacement(placement) {
     switch (placement) {
         case 'above':
@@ -1116,19 +1125,26 @@ function parseAffixHorizontalAlignment(alignment) {
     }
 }
 
-/**
- * @internal
- */
-class SkyPopoverContext {
-    constructor(args) {
-        this.contentTemplateRef = args.contentTemplateRef;
-    }
-}
-
 /**
  * @internal
  */
 class SkyPopoverContentComponent {
+    constructor() {
+        this.horizontalAlignment = 'center';
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.placement = null;
+        this.popoverType = 'info';
+        this.#ngUnsubscribe = new Subject();
+        this.#_closed = new Subject();
+        this.#_isMouseEnter = new Subject();
+        this.#_opened = new Subject();
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#elementRef = inject(ElementRef);
+        this.#affixService = inject(SkyAffixService);
+        this.#coreAdapterService = inject(SkyCoreAdapterService);
+        this.#context = inject(SkyPopoverContext);
+        this.#themeSvc = inject(SkyThemeService, { optional: true });
+    }
     get closed() {
         return this.#_closed.asObservable();
     }
@@ -1160,22 +1176,6 @@ class SkyPopoverContentComponent {
      * `ngOnDestroy()` can cancel it before it fires.
      */
     #openTimeoutId;
-    constructor(changeDetector, elementRef, affixService, coreAdapterService, context, themeSvc) {
-        this.horizontalAlignment = 'center';
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.placement = null;
-        this.popoverType = 'info';
-        this.#ngUnsubscribe = new Subject();
-        this.#_closed = new Subject();
-        this.#_isMouseEnter = new Subject();
-        this.#_opened = new Subject();
-        this.#changeDetector = changeDetector;
-        this.#elementRef = elementRef;
-        this.#affixService = affixService;
-        this.#coreAdapterService = coreAdapterService;
-        this.#context = context;
-        this.#themeSvc = themeSvc;
-    }
     hasFocusableContent() {
         return (this.#coreAdapterService.getFocusableChildren(this.popoverRef?.nativeElement).length > 0);
     }
@@ -1346,15 +1346,13 @@ class SkyPopoverContentComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.SkyAffixService }, { token: i1$1.SkyCoreAdapterService }, { token: SkyPopoverContext }, { token: i3$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyPopoverContentComponent, isStandalone: false, selector: "sky-popover-content", host: { properties: { "id": "this.popoverId" } }, viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  #popoverRef\n  class=\"sky-popover-container sky-popover-max-height\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"opacity\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  [class.sky-popover-visible]=\"isOpen()\"\n  [transitionTrigger]=\"isOpen()\"\n  (transitionEnd)=\"onAnimationsComplete()\"\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    @if (popoverTitle) {\n      <div\n        class=\"sky-popover-header\"\n        [skyThemeClass]=\"{\n          'sky-theme-padding-inset-balanced-s': 'default'\n        }\"\n      >\n        <h4 class=\"sky-popover-title sky-font-heading-4\">\n          {{ popoverTitle }}\n        </h4>\n      </div>\n    }\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-theme-padding-inset-balanced-s': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget />\n    </div>\n  </div>\n  <span #arrowRef aria-hidden=\"true\" class=\"sky-popover-arrow\"></span>\n</div>\n", styles: [".sky-popover-container:not(.sky-theme-modern *){--sky-override-popover-background-color: #ffffff;--sky-override-popover-max-width: 276px;--sky-override-popover-with-header-top-padding: 2px}.sky-popover-container{position:fixed;min-width:276px;max-width:var(--sky-override-popover-max-width, calc(min(var(--sky-size-max_width-overlay_message)) + var(--sky-comp-popover-content-space-inset-left) + var(--sky-comp-popover-content-space-inset-right)));opacity:0;transition:opacity var(--sky-global-duration-short)}@starting-style{.sky-popover-container{opacity:0}}.sky-popover-container.sky-popover-visible{opacity:1;transition-duration:var(--sky-global-duration-medium)}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media(max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:var(--sky-override-popover-background-color, var(--sky-color-background-container-base))}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:var(--sky-override-popover-with-header-top-padding, var(--sky-comp-popover-content-space-inset-top))}.sky-popover-title{margin:0}.sky-popover-arrow{display:inline-block;position:absolute;background-color:#00b4f1}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{width:30px;height:15px;clip-path:polygon(0 0,50% 95%,100% 0)}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{width:30px;height:15px;clip-path:polygon(50% 5%,0 100%,100% 100%)}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{width:15px;height:30px;clip-path:polygon(5% 50%,100% 100%,100% 0);background-color:#00b4f1}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{width:15px;height:30px;clip-path:polygon(0 0,0 100%,95% 50%);background-color:#00b4f1}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(100vh - min(50px,5vh))}:host-context(.sky-theme-modern) .sky-popover{border-radius:var(--sky-border-radius-s)}:host-context(.sky-theme-modern) .sky-popover-header{padding:var(--sky-comp-popover-header-space-inset-top) var(--sky-comp-popover-header-space-inset-right) var(--sky-comp-popover-header-space-inset-bottom) var(--sky-comp-popover-header-space-inset-left)}:host-context(.sky-theme-modern) .sky-popover-arrow{background-color:var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-danger .sky-popover-arrow{background-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{clip-path:polygon(0 0,45% 88%,50% 92%,55% 88%,100% 0)}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{clip-path:polygon(0 100%,45% 12%,50% 8%,55% 12%,100% 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{clip-path:polygon(100% 0,12% 45%,8% 50%,12% 55%,100% 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{clip-path:polygon(0 0,88% 45%,92% 50%,88% 55%,0 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover{border-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-popover-header{padding:var(--sky-comp-popover-header-space-inset-top) var(--sky-comp-popover-header-space-inset-right) var(--sky-comp-popover-header-space-inset-bottom) var(--sky-comp-popover-header-space-inset-left)}.sky-theme-modern .sky-popover-arrow{background-color:var(--sky-color-border-info)}.sky-theme-modern .sky-popover-danger .sky-popover-arrow{background-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{clip-path:polygon(0 0,45% 88%,50% 92%,55% 88%,100% 0)}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{clip-path:polygon(0 100%,45% 12%,50% 8%,55% 12%,100% 100%)}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{clip-path:polygon(100% 0,12% 45%,8% 50%,12% 55%,100% 100%)}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{clip-path:polygon(0 0,88% 45%,92% 50%,88% 55%,0 100%)}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:var(--sky-color-border-danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyPopoverContentComponent, isStandalone: false, selector: "sky-popover-content", host: { properties: { "id": "this.popoverId" } }, viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  #popoverRef\n  class=\"sky-popover-container sky-popover-max-height\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"opacity\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  [class.sky-popover-visible]=\"isOpen()\"\n  [transitionTrigger]=\"isOpen()\"\n  (transitionEnd)=\"onAnimationsComplete()\"\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    @if (popoverTitle) {\n      <div\n        class=\"sky-popover-header\"\n        [skyThemeClass]=\"{\n          'sky-theme-padding-inset-balanced-s': 'default'\n        }\"\n      >\n        <h4 class=\"sky-popover-title sky-font-heading-4\">\n          {{ popoverTitle }}\n        </h4>\n      </div>\n    }\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-theme-padding-inset-balanced-s': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget />\n    </div>\n  </div>\n  <span #arrowRef aria-hidden=\"true\" class=\"sky-popover-arrow\"></span>\n</div>\n", styles: [".sky-popover-container:not(.sky-theme-modern *){--sky-override-popover-background-color: #ffffff;--sky-override-popover-max-width: 276px;--sky-override-popover-with-header-top-padding: 2px}.sky-popover-container{position:fixed;min-width:276px;max-width:var(--sky-override-popover-max-width, calc(min(var(--sky-size-max_width-overlay_message)) + var(--sky-comp-popover-content-space-inset-left) + var(--sky-comp-popover-content-space-inset-right)));opacity:0;transition:opacity var(--sky-global-duration-short)}@starting-style{.sky-popover-container{opacity:0}}.sky-popover-container.sky-popover-visible{opacity:1;transition-duration:var(--sky-global-duration-medium)}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media(max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:var(--sky-override-popover-background-color, var(--sky-color-background-container-base))}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:var(--sky-override-popover-with-header-top-padding, var(--sky-comp-popover-content-space-inset-top))}.sky-popover-title{margin:0}.sky-popover-arrow{display:inline-block;position:absolute;background-color:#00b4f1}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{width:30px;height:15px;clip-path:polygon(0 0,50% 95%,100% 0)}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{width:30px;height:15px;clip-path:polygon(50% 5%,0 100%,100% 100%)}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{width:15px;height:30px;clip-path:polygon(5% 50%,100% 100%,100% 0);background-color:#00b4f1}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{width:15px;height:30px;clip-path:polygon(0 0,0 100%,95% 50%);background-color:#00b4f1}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(100vh - min(50px,5vh))}:host-context(.sky-theme-modern) .sky-popover{border-radius:var(--sky-border-radius-s)}:host-context(.sky-theme-modern) .sky-popover-header{padding:var(--sky-comp-popover-header-space-inset-top) var(--sky-comp-popover-header-space-inset-right) var(--sky-comp-popover-header-space-inset-bottom) var(--sky-comp-popover-header-space-inset-left)}:host-context(.sky-theme-modern) .sky-popover-arrow{background-color:var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-danger .sky-popover-arrow{background-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{clip-path:polygon(0 0,45% 88%,50% 92%,55% 88%,100% 0)}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{clip-path:polygon(0 100%,45% 12%,50% 8%,55% 12%,100% 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{clip-path:polygon(100% 0,12% 45%,8% 50%,12% 55%,100% 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{clip-path:polygon(0 0,88% 45%,92% 50%,88% 55%,0 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover{border-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-popover-header{padding:var(--sky-comp-popover-header-space-inset-top) var(--sky-comp-popover-header-space-inset-right) var(--sky-comp-popover-header-space-inset-bottom) var(--sky-comp-popover-header-space-inset-left)}.sky-theme-modern .sky-popover-arrow{background-color:var(--sky-color-border-info)}.sky-theme-modern .sky-popover-danger .sky-popover-arrow{background-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{clip-path:polygon(0 0,45% 88%,50% 92%,55% 88%,100% 0)}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{clip-path:polygon(0 100%,45% 12%,50% 8%,55% 12%,100% 100%)}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{clip-path:polygon(100% 0,12% 45%,8% 50%,12% 55%,100% 100%)}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{clip-path:polygon(0 0,88% 45%,92% 50%,88% 55%,0 100%)}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:var(--sky-color-border-danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i4._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-popover-content', standalone: false, template: "<div\n  #popoverRef\n  class=\"sky-popover-container sky-popover-max-height\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"opacity\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  [class.sky-popover-visible]=\"isOpen()\"\n  [transitionTrigger]=\"isOpen()\"\n  (transitionEnd)=\"onAnimationsComplete()\"\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    @if (popoverTitle) {\n      <div\n        class=\"sky-popover-header\"\n        [skyThemeClass]=\"{\n          'sky-theme-padding-inset-balanced-s': 'default'\n        }\"\n      >\n        <h4 class=\"sky-popover-title sky-font-heading-4\">\n          {{ popoverTitle }}\n        </h4>\n      </div>\n    }\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-theme-padding-inset-balanced-s': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget />\n    </div>\n  </div>\n  <span #arrowRef aria-hidden=\"true\" class=\"sky-popover-arrow\"></span>\n</div>\n", styles: [".sky-popover-container:not(.sky-theme-modern *){--sky-override-popover-background-color: #ffffff;--sky-override-popover-max-width: 276px;--sky-override-popover-with-header-top-padding: 2px}.sky-popover-container{position:fixed;min-width:276px;max-width:var(--sky-override-popover-max-width, calc(min(var(--sky-size-max_width-overlay_message)) + var(--sky-comp-popover-content-space-inset-left) + var(--sky-comp-popover-content-space-inset-right)));opacity:0;transition:opacity var(--sky-global-duration-short)}@starting-style{.sky-popover-container{opacity:0}}.sky-popover-container.sky-popover-visible{opacity:1;transition-duration:var(--sky-global-duration-medium)}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media(max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:var(--sky-override-popover-background-color, var(--sky-color-background-container-base))}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:var(--sky-override-popover-with-header-top-padding, var(--sky-comp-popover-content-space-inset-top))}.sky-popover-title{margin:0}.sky-popover-arrow{display:inline-block;position:absolute;background-color:#00b4f1}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{width:30px;height:15px;clip-path:polygon(0 0,50% 95%,100% 0)}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{width:30px;height:15px;clip-path:polygon(50% 5%,0 100%,100% 100%)}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{width:15px;height:30px;clip-path:polygon(5% 50%,100% 100%,100% 0);background-color:#00b4f1}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{width:15px;height:30px;clip-path:polygon(0 0,0 100%,95% 50%);background-color:#00b4f1}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{background-color:#ef4044}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(100vh - min(50px,5vh))}:host-context(.sky-theme-modern) .sky-popover{border-radius:var(--sky-border-radius-s)}:host-context(.sky-theme-modern) .sky-popover-header{padding:var(--sky-comp-popover-header-space-inset-top) var(--sky-comp-popover-header-space-inset-right) var(--sky-comp-popover-header-space-inset-bottom) var(--sky-comp-popover-header-space-inset-left)}:host-context(.sky-theme-modern) .sky-popover-arrow{background-color:var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-danger .sky-popover-arrow{background-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{clip-path:polygon(0 0,45% 88%,50% 92%,55% 88%,100% 0)}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{clip-path:polygon(0 100%,45% 12%,50% 8%,55% 12%,100% 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{clip-path:polygon(100% 0,12% 45%,8% 50%,12% 55%,100% 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:var(--sky-color-border-danger)}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{clip-path:polygon(0 0,88% 45%,92% 50%,88% 55%,0 100%)}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover{border-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-popover-header{padding:var(--sky-comp-popover-header-space-inset-top) var(--sky-comp-popover-header-space-inset-right) var(--sky-comp-popover-header-space-inset-bottom) var(--sky-comp-popover-header-space-inset-left)}.sky-theme-modern .sky-popover-arrow{background-color:var(--sky-color-border-info)}.sky-theme-modern .sky-popover-danger .sky-popover-arrow{background-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{clip-path:polygon(0 0,45% 88%,50% 92%,55% 88%,100% 0)}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{clip-path:polygon(0 100%,45% 12%,50% 8%,55% 12%,100% 100%)}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{clip-path:polygon(100% 0,12% 45%,8% 50%,12% 55%,100% 100%)}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:var(--sky-color-border-danger)}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:var(--sky-border-width-accent) var(--sky-border-style-accent) var(--sky-color-border-info)}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{clip-path:polygon(0 0,88% 45%,92% 50%,88% 55%,0 100%)}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:var(--sky-color-border-danger)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.SkyAffixService }, { type: i1$1.SkyCoreAdapterService }, { type: SkyPopoverContext }, { type: i3$1.SkyThemeService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { popoverId: [{
+        }], propDecorators: { popoverId: [{
                 type: HostBinding,
                 args: ['id']
             }], arrowRef: [{
@@ -1378,6 +1376,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class SkyPopoverComponent {
+    constructor() {
+        this.#windowRef = inject(SkyAppWindowRef);
+        /**
+         * Fires when users close the popover.
+         */
+        this.popoverClosed = new EventEmitter();
+        /**
+         * Fires when users open the popover.
+         */
+        this.popoverOpened = new EventEmitter();
+        /**
+         * Whether the popover is in the process of being opened or closed.
+         * @internal
+         */
+        this.isActive = false;
+        this.isMouseEnter = false;
+        this.popoverId = inject(SkyIdService).generateId();
+        this.#isMarkedForCloseOnMouseLeave = false;
+        this.#ngUnsubscribe = new Subject();
+        /**
+         * Incremented on each open/close call to invalidate any pending
+         * `queueMicrotask` callback from a previous `positionNextTo` call.
+         */
+        this.#openRequestId = 0;
+        this.#_alignment = 'center';
+        this.#_placement = 'above';
+        this.#_popoverType = 'info';
+        this.#environmentInjector = inject(EnvironmentInjector);
+        this.#overlayService = inject(SkyOverlayService);
+        this.#zIndex = inject(SKY_STACKING_CONTEXT, { optional: true })?.zIndex;
+    }
     #windowRef;
     /**
      * The horizontal alignment of the popover in relation to the trigger element.
@@ -1426,37 +1455,6 @@ class SkyPopoverComponent {
     #environmentInjector;
     #overlayService;
     #zIndex;
-    constructor(overlayService, stackingContext) {
-        this.#windowRef = inject(SkyAppWindowRef);
-        /**
-         * Fires when users close the popover.
-         */
-        this.popoverClosed = new EventEmitter();
-        /**
-         * Fires when users open the popover.
-         */
-        this.popoverOpened = new EventEmitter();
-        /**
-         * Whether the popover is in the process of being opened or closed.
-         * @internal
-         */
-        this.isActive = false;
-        this.isMouseEnter = false;
-        this.#isMarkedForCloseOnMouseLeave = false;
-        this.#ngUnsubscribe = new Subject();
-        /**
-         * Incremented on each open/close call to invalidate any pending
-         * `queueMicrotask` callback from a previous `positionNextTo` call.
-         */
-        this.#openRequestId = 0;
-        this.#_alignment = 'center';
-        this.#_placement = 'above';
-        this.#_popoverType = 'info';
-        this.#environmentInjector = inject(EnvironmentInjector);
-        this.#overlayService = overlayService;
-        this.#zIndex = stackingContext?.zIndex;
-        this.popoverId = inject(SkyIdService).generateId();
-    }
     ngOnDestroy() {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
@@ -1581,18 +1579,13 @@ class SkyPopoverComponent {
             this.#contentRef = contentRef;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverComponent, deps: [{ token: i1$1.SkyOverlayService }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPopoverComponent, isStandalone: false, selector: "sky-popover", inputs: { alignment: "alignment", placement: "placement", popoverTitle: "popoverTitle", popoverType: "popoverType" }, outputs: { popoverClosed: "popoverClosed", popoverOpened: "popoverOpened" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <ng-content />\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-popover', standalone: false, template: "<ng-template #templateRef>\n  <ng-content />\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.SkyOverlayService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SKY_STACKING_CONTEXT]
-                }] }], propDecorators: { alignment: [{
+        }], propDecorators: { alignment: [{
                 type: Input
             }], placement: [{
                 type: Input
@@ -1738,7 +1731,7 @@ class SkyPopoverDirective {
     #expanded;
     #popoverClosedSubscription;
     #srPointerSvc;
-    constructor(elementRef) {
+    constructor() {
         /**
          * Appends the `sky-popover-trigger` class to the trigger element.
          * @internal
@@ -1747,9 +1740,9 @@ class SkyPopoverDirective {
         this.#_skyPopoverMessageStream = new Subject();
         this.#ngUnsubscribe = new Subject();
         this.#_trigger = 'click';
+        this.#elementRef = inject(ElementRef);
         this.#expanded = false;
         this.#srPointerSvc = inject(SkyPopoverSRPointerService);
-        this.#elementRef = elementRef;
         this.#subscribeMessageStream();
     }
     ngOnInit() {
@@ -1931,7 +1924,7 @@ class SkyPopoverDirective {
         }
         this.#updateAriaAttributes();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: SkyPopoverDirective, isStandalone: false, selector: "[skyPopover]", inputs: { skyPopover: "skyPopover", skyPopoverAlignment: "skyPopoverAlignment", skyPopoverMessageStream: "skyPopoverMessageStream", skyPopoverPlacement: "skyPopoverPlacement", skyPopoverTrigger: "skyPopoverTrigger" }, host: { properties: { "class": "this.directiveClass" } }, providers: [SkyPopoverSRPointerService], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPopoverDirective, decorators: [{
@@ -1941,7 +1934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     selector: '[skyPopover]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { directiveClass: [{
+        }], ctorParameters: () => [], propDecorators: { directiveClass: [{
                 type: HostBinding,
                 args: ['class']
             }], skyPopover: [{