@skyux/theme 12.0.0-alpha.8 → 12.0.0-beta.0

package/fesm2022/skyux-theme.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Directive, Input, NgModule, inject, ChangeDetectorRef, HostBinding, DestroyRef, makeEnvironmentProviders, provideAppInitializer, RendererFactory2 } from '@angular/core';
+import { Injectable, Optional, Input, Directive, NgModule, inject, ChangeDetectorRef, HostBinding, NgZone, DestroyRef, makeEnvironmentProviders, provideAppInitializer, RendererFactory2 } from '@angular/core';
 import { getIconManifest } from '@skyux/icons';
 import FontFaceObserver from 'fontfaceobserver';
 import { take, takeUntil } from 'rxjs/operators';
@@ -18,16 +18,62 @@ class SkyThemeIconManifestService {
     getManifest() {
         return getIconManifest();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeIconManifestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeIconManifestService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeIconManifestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeIconManifestService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeIconManifestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeIconManifestService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+/**
+ * Defines properties of a SKY UX theme mode.
+ */
+class SkyThemeMode {
+    /**
+     * The preset themes available in SKY UX.
+     */
+    static { this.presets = {
+        light: new SkyThemeMode('light', 'sky-theme-mode-light'),
+        dark: new SkyThemeMode('dark', 'sky-theme-mode-dark'),
+    }; }
+    /**
+     * Creates a new theme mode.
+     * @param name The name of the theme mode.
+     * @param hostClass The class on the host element which child components should reference when
+     * adjusting for a specified theme mode.
+     */
+    constructor(name, hostClass) {
+        this.name = name;
+        this.hostClass = hostClass;
+    }
+}
+
+/**
+ * Defines properties of SKY UX theme spacing.
+ */
+class SkyThemeSpacing {
+    /**
+     * The preset spacing available in SKY UX.
+     */
+    static { this.presets = {
+        standard: new SkyThemeSpacing('standard', 'sky-theme-spacing-standard'),
+        compact: new SkyThemeSpacing('compact', 'sky-theme-spacing-compact'),
+    }; }
+    /**
+     * Creates a new theme spacing.
+     * @param name The name of the theme spacing.
+     * @param hostClass The class on the host element which child components should reference when
+     * adjusting for a specified theme spacing.
+     */
+    constructor(name, hostClass) {
+        this.name = name;
+        this.hostClass = hostClass;
+    }
+}
+
 /**
  * Provides methods for updating and handling changes to the current theme.
  */
@@ -39,6 +85,7 @@ class SkyThemeService {
         return this.#_settingsObs;
     }
     #current;
+    #brandLinkElement;
     #hostEl;
     #renderer;
     #settings;
@@ -76,6 +123,7 @@ class SkyThemeService {
         this.#applyThemeClass(previous, settings, 'theme');
         this.#applyThemeClass(previous, settings, 'mode', 'supportedModes');
         this.#applyThemeClass(previous, settings, 'spacing', 'supportedSpacing');
+        this.#applyThemeClass(previous, settings, 'brand');
         this.#settings.next({
             currentSettings: settings,
             previousSettings: previous,
@@ -84,29 +132,82 @@ class SkyThemeService {
     }
     #applyThemeClass(previous, current, prop, supportedProp) {
         const currentSetting = current[prop];
-        const previousClass = previous?.[prop].hostClass;
-        const currentClass = currentSetting.hostClass;
-        const classChanged = !previous || previousClass !== currentClass;
-        if (classChanged) {
-            if (previousClass) {
-                this.#removeHostClass(previousClass);
+        const previousClass = previous?.[prop]?.hostClass;
+        const currentClass = currentSetting?.hostClass;
+        if (!previousClass || previousClass !== currentClass) {
+            this.#updateHostClass(prop, previousClass, currentClass, currentSetting, current, supportedProp);
+            if (prop === 'brand') {
+                this.#updateBrandStylesheet(current.brand, previous?.brand);
+            }
+        }
+    }
+    #updateBrandStylesheet(currentBrand, previousBrand) {
+        if (currentBrand &&
+            currentBrand.name !== 'blackbaud' &&
+            previousBrand !== currentBrand) {
+            this.#addBrandStylesheet(currentBrand);
+        }
+        else {
+            this.#removeBrandStylesheet();
+        }
+    }
+    #updateHostClass(prop, previousClass, currentClass, currentSetting, current, supportedProp) {
+        if (previousClass) {
+            this.#removeHostClass(previousClass);
+        }
+        if (prop === 'brand') {
+            if (currentClass && !previousClass) {
+                this.#addHostClass('sky-theme-brand-base');
             }
-            if (!supportedProp ||
-                current.theme[supportedProp].indexOf(currentSetting) >= 0) {
-                this.#addHostClass(currentClass);
+            else if (!currentClass && previousClass) {
+                this.#removeHostClass('sky-theme-brand-base');
             }
         }
+        if (currentClass &&
+            this.#isSupportedProperty(currentSetting, current, supportedProp)) {
+            this.#addHostClass(currentClass);
+        }
+    }
+    #addBrandStylesheet(brand) {
+        if (brand.name !== 'blackbaud') {
+            const cssPath = `https://sky.blackbaudcdn.net/static/skyux-brand-${brand.name}/${brand.version}/assets/scss/${brand.name}.css`;
+            // Create a link element via Angular's renderer to avoid SSR troubles
+            this.#brandLinkElement = this.#getRenderer().createElement('link');
+            // Add the style to the head section
+            this.#getRenderer().appendChild(this.#hostEl, this.#brandLinkElement);
+            // Set type of the link item and path to the css file
+            this.#getRenderer().setProperty(this.#brandLinkElement, 'rel', 'stylesheet');
+            this.#getRenderer().setProperty(this.#brandLinkElement, 'href', cssPath);
+        }
+    }
+    #removeBrandStylesheet() {
+        if (this.#brandLinkElement) {
+            this.#getRenderer().removeChild(this.#hostEl, this.#brandLinkElement);
+            this.#brandLinkElement = undefined;
+        }
     }
     #addHostClass(className) {
-        this.#renderer.addClass(this.#hostEl, className);
+        this.#getRenderer().addClass(this.#hostEl, className);
     }
     #removeHostClass(className) {
-        this.#renderer.removeClass(this.#hostEl, className);
+        this.#getRenderer().removeClass(this.#hostEl, className);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeService }); }
+    #getRenderer() {
+        if (!this.#renderer) {
+            throw new Error('Renderer is not initialized. Have you called the theme service `init` method?');
+        }
+        return this.#renderer;
+    }
+    #isSupportedProperty(currentSetting, current, supportedProp) {
+        return (!supportedProp ||
+            ((currentSetting instanceof SkyThemeMode ||
+                currentSetting instanceof SkyThemeSpacing) &&
+                current.theme[supportedProp].includes(currentSetting)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -151,10 +252,10 @@ class SkyAppStyleLoader {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyAppStyleLoader, deps: [{ token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyAppStyleLoader, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAppStyleLoader, deps: [{ token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAppStyleLoader, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyAppStyleLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAppStyleLoader, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -261,10 +362,10 @@ class SkyThemeClassDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: SkyThemeClassDirective, isStandalone: false, selector: "[skyThemeClass]", inputs: { class: "class", skyThemeClass: "skyThemeClass" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyThemeClassDirective, isStandalone: false, selector: "[skyThemeClass]", inputs: { class: "class", skyThemeClass: "skyThemeClass" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyThemeClass]',
@@ -332,10 +433,10 @@ class SkyThemeIfDirective {
             this.#hasView = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeIfDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: SkyThemeIfDirective, isStandalone: false, selector: "[skyThemeIf]", inputs: { skyThemeIf: "skyThemeIf" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeIfDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyThemeIfDirective, isStandalone: false, selector: "[skyThemeIf]", inputs: { skyThemeIf: "skyThemeIf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeIfDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeIfDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyThemeIf]',
@@ -347,52 +448,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }] } });
 
-/**
- * Defines properties of a SKY UX theme mode.
- */
-class SkyThemeMode {
-    /**
-     * The preset themes available in SKY UX.
-     */
-    static { this.presets = {
-        light: new SkyThemeMode('light', 'sky-theme-mode-light'),
-        dark: new SkyThemeMode('dark', 'sky-theme-mode-dark'),
-    }; }
-    /**
-     * Creates a new theme mode.
-     * @param name The name of the theme mode.
-     * @param hostClass The class on the host element which child components should reference when
-     * adjusting for a specified theme mode.
-     */
-    constructor(name, hostClass) {
-        this.name = name;
-        this.hostClass = hostClass;
-    }
-}
-
-/**
- * Defines properties of SKY UX theme spacing.
- */
-class SkyThemeSpacing {
-    /**
-     * The preset spacing available in SKY UX.
-     */
-    static { this.presets = {
-        standard: new SkyThemeSpacing('standard', 'sky-theme-spacing-standard'),
-        compact: new SkyThemeSpacing('compact', 'sky-theme-spacing-compact'),
-    }; }
-    /**
-     * Creates a new theme spacing.
-     * @param name The name of the theme spacing.
-     * @param hostClass The class on the host element which child components should reference when
-     * adjusting for a specified theme spacing.
-     */
-    constructor(name, hostClass) {
-        this.name = name;
-        this.hostClass = hostClass;
-    }
-}
-
 /**
  * Defines properties of a SKY UX theme.
  */
@@ -429,10 +484,11 @@ class SkyThemeSettings {
      * @param theme The theme configuration.
      * @param mode The theme mode.
      */
-    constructor(theme, mode, spacing = SkyThemeSpacing.presets.standard) {
+    constructor(theme, mode, spacing = SkyThemeSpacing.presets.standard, brand) {
         this.theme = theme;
         this.mode = mode;
         this.spacing = spacing;
+        this.brand = brand;
     }
 }
 
@@ -466,10 +522,10 @@ class SkyThemeDirective {
     ngOnDestroy() {
         this.#themeSvc.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyThemeService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: SkyThemeDirective, isStandalone: false, selector: "[skyTheme]", inputs: { skyTheme: "skyTheme" }, providers: [SkyThemeService], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyThemeService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyThemeDirective, isStandalone: false, selector: "[skyTheme]", inputs: { skyTheme: "skyTheme" }, providers: [SkyThemeService], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTheme]',
@@ -481,13 +537,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class SkyThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeModule, declarations: [SkyThemeClassDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeModule, declarations: [SkyThemeClassDirective,
             SkyThemeDirective,
             SkyThemeIfDirective], exports: [SkyThemeClassDirective, SkyThemeDirective, SkyThemeIfDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -499,6 +555,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+/**
+ * @internal
+ * Defines properties of SKY UX theme branding.
+ */
+class SkyThemeBrand {
+    get hostClass() {
+        return this.#hostClass || `sky-theme-brand-${this.name}`;
+    }
+    set hostClass(value) {
+        this.#hostClass = value;
+    }
+    #hostClass;
+    /**
+     * Creates a new theme brand.
+     * @param name The name of the theme brand.
+     * @param hostClass The class on the host element which child components should reference when
+     * adjusting for a specified theme brand. This defaults to `sky-theme-brand-<name>
+     */
+    constructor(name, version, hostClass) {
+        this.name = name;
+        this.version = version;
+        this.hostClass = hostClass;
+        if (!/\d+\.\d+\.\d+(?:-(?:alpha|beta|rc)\.\d)*$/.test(version)) {
+            throw new Error(`Invalid version format "${version}" for theme brand "${name}".`);
+        }
+    }
+}
+
 class SkyThemeComponentClassDirective {
     #changeDetector;
     #themeService;
@@ -513,10 +597,10 @@ class SkyThemeComponentClassDirective {
             this.#changeDetector.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeComponentClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: SkyThemeComponentClassDirective, isStandalone: true, selector: "[skyThemeClass]", host: { properties: { "class": "this.theme" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeComponentClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyThemeComponentClassDirective, isStandalone: true, selector: "[skyThemeClass]", host: { properties: { "class": "this.theme" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyThemeComponentClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeComponentClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyThemeClass]',
@@ -537,7 +621,10 @@ class SkyAppViewportService {
     #reserveItems;
     #conditionallyReserveItems;
     #document;
+    #ngZone;
+    // Observe elements crossing the browser's viewport boundaries.
     #intersectionObserver;
+    #reservedSpaces;
     constructor() {
         /**
          * Updated when the viewport becomes visible.  While the page is rendered, the
@@ -552,18 +639,15 @@ class SkyAppViewportService {
         this.#reserveItems = new Map();
         this.#conditionallyReserveItems = new Map();
         this.#document = inject(DOCUMENT);
-        this.#intersectionObserver = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                const item = this.#conditionallyReserveItems.get(entry.target);
-                if (item) {
-                    item.active = entry.isIntersecting;
-                }
-            });
-            this.#updateViewportArea();
-        }, {
-            root: this.#document,
-            threshold: Array.from({ length: 11 }, (_, i) => i / 10),
-        });
+        this.#ngZone = inject(NgZone);
+        // Observe elements crossing the browser's viewport boundaries.
+        this.#intersectionObserver = this.#ngZone.runOutsideAngular(() => new IntersectionObserver(() => this.#ngZone.run(() => this.#updateViewportArea()), { threshold: Array.from({ length: 101 }, (_, i) => i / 100) }));
+        this.#reservedSpaces = {
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+        };
         const onScroll = () => {
             if (this.#conditionallyReserveItems.size > 0) {
                 this.#updateViewportArea();
@@ -571,6 +655,10 @@ class SkyAppViewportService {
         };
         this.#document.addEventListener('scroll', onScroll);
         inject(DestroyRef).onDestroy(() => {
+            /* istanbul ignore next */
+            if (this.#updateRequest !== undefined) {
+                cancelAnimationFrame(this.#updateRequest);
+            }
             this.#intersectionObserver.disconnect();
             this.#document.removeEventListener('scroll', onScroll);
         });
@@ -582,8 +670,7 @@ class SkyAppViewportService {
     reserveSpace(args) {
         const item = {
             ...args,
-            active: !args.reserveForElement ||
-                this.#isElementVisible(args.reserveForElement),
+            active: this.#isElementVisible({ ...args, active: false }),
         };
         this.#reserveItems.set(args.id, item);
         this.#watchVisibility(item);
@@ -604,23 +691,24 @@ class SkyAppViewportService {
     }
     #updateViewportArea() {
         this.#updateRequest ??= requestAnimationFrame(() => {
+            this.#updateRequest = undefined;
             const reservedSpaces = {
                 bottom: 0,
                 left: 0,
                 right: 0,
                 top: 0,
             };
-            for (const { position, size, active, reserveForElement, } of this.#reserveItems.values()) {
-                if (active &&
-                    (!reserveForElement || this.#isElementVisible(reserveForElement))) {
-                    reservedSpaces[position] += size;
+            for (const args of this.#reserveItems.values()) {
+                args.active = this.#isElementVisible(args, reservedSpaces);
+                if (args.active) {
+                    reservedSpaces[args.position] += args.size;
                 }
             }
+            this.#reservedSpaces = reservedSpaces;
             const documentElementStyle = this.#document.documentElement.style;
             for (const [position, size] of Object.entries(reservedSpaces)) {
                 documentElementStyle.setProperty(`--sky-viewport-${position}`, size + 'px');
             }
-            this.#updateRequest = undefined;
         });
     }
     #watchVisibility(item) {
@@ -629,22 +717,50 @@ class SkyAppViewportService {
             this.#intersectionObserver.observe(item.reserveForElement);
         }
     }
-    #isElementVisible(element) {
-        const rect = element.getBoundingClientRect();
-        return (
+    #isElementVisible(args, reservedSpaces = this
+        .#reservedSpaces) {
+        if (!args.reserveForElement) {
+            return true;
+        }
+        const rect = args.reserveForElement.getBoundingClientRect();
+        if (!rect || !rect.height || !rect.width) {
+            return false;
+        }
+        const midpoint = {
+            x: rect.x + Math.floor(rect.width / 2),
+            y: rect.y + Math.floor(rect.height / 2),
+        };
+        if (
         // Vertically in view
-        rect.y <= window.innerHeight &&
-            rect.y >= 0 &&
+        midpoint.y <= window.innerHeight &&
+            midpoint.y >= 0 &&
             // Horizontally in view
-            rect.x <= window.innerWidth &&
-            rect.x >= 0 &&
+            midpoint.x <= window.innerWidth &&
+            midpoint.x >= 0) {
             // Element is not hidden by another element
-            element.contains(this.#document.elementFromPoint(rect.x + 1, rect.y + 1)));
+            if (args.reserveForElement.contains(this.#document.elementFromPoint(midpoint.x, midpoint.y))) {
+                return true;
+            }
+            // Check if the item's midpoint is visible based on current reserved spaces.
+            // Assumes reserved spaces are intended to be additive and not overlapping.
+            const threshold = reservedSpaces[args.position];
+            switch (args.position) {
+                case 'top':
+                    return midpoint.y >= threshold;
+                case 'right':
+                    return midpoint.x <= window.innerWidth - threshold;
+                case 'bottom':
+                    return midpoint.y <= window.innerHeight - threshold;
+                case 'left':
+                    return midpoint.x >= threshold;
+            }
+        }
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyAppViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyAppViewportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAppViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAppViewportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyAppViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyAppViewportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -669,5 +785,5 @@ function provideInitialTheme(name = 'default', options) {
  * Generated bundle index. Do not edit.
  */
 
-export { SkyAppStyleLoader, SkyAppViewportService, SkyTheme, SkyThemeComponentClassDirective, SkyThemeIconManifestService, SkyThemeMode, SkyThemeModule, SkyThemeService, SkyThemeSettings, SkyThemeSpacing, provideInitialTheme, SkyThemeDirective as λ1, SkyThemeClassDirective as λ2, SkyThemeIfDirective as λ3 };
+export { SkyAppStyleLoader, SkyAppViewportService, SkyTheme, SkyThemeBrand, SkyThemeComponentClassDirective, SkyThemeIconManifestService, SkyThemeMode, SkyThemeModule, SkyThemeService, SkyThemeSettings, SkyThemeSpacing, provideInitialTheme, SkyThemeDirective as λ1, SkyThemeClassDirective as λ2, SkyThemeIfDirective as λ3 };
 //# sourceMappingURL=skyux-theme.mjs.map