@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/esm/focus-indicator/focus-indicator-foundation.js

@@ -12,6 +12,7 @@ export class FocusIndicatorFoundation {
         this._inward = false;
         this._circular = false;
         this._allowFocus = false;
+        this._focusMode = FOCUS_INDICATOR_CONSTANTS.defaults.FOCUS_MODE;
         this._interactionListener = evt => this._onInteraction(evt);
     }
     initialize() {
@@ -25,19 +26,19 @@ export class FocusIndicatorFoundation {
         this._adapter.destroy();
     }
     _addListeners() {
-        this._adapter.addTargetListener('focusin', this._interactionListener);
+        this._adapter.addTargetListener(this._focusMode, this._interactionListener);
         this._adapter.addTargetListener('focusout', this._interactionListener);
         this._adapter.addTargetListener('pointerdown', this._interactionListener);
     }
     _removeListeners() {
-        this._adapter.removeTargetListener('focusin', this._interactionListener);
+        this._adapter.removeTargetListener(this._focusMode, this._interactionListener);
         this._adapter.removeTargetListener('focusout', this._interactionListener);
         this._adapter.removeTargetListener('pointerdown', this._interactionListener);
     }
     _onInteraction(evt) {
         const target = evt.target;
         switch (evt.type) {
-            case 'focusin':
+            case this._focusMode:
                 this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible', target);
                 break;
             case 'focusout':
@@ -108,4 +109,21 @@ export class FocusIndicatorFoundation {
             this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS, this._allowFocus);
         }
     }
+    get focusMode() {
+        return this._focusMode;
+    }
+    set focusMode(value) {
+        value !== null && value !== void 0 ? value : (value = FOCUS_INDICATOR_CONSTANTS.defaults.FOCUS_MODE);
+        if (this._focusMode !== value) {
+            if (this._adapter.isConnected) {
+                this._removeListeners();
+            }
+            this._focusMode = value;
+            if (this._adapter.isConnected) {
+                this._addListeners();
+            }
+            const hasFocusMode = this._focusMode !== FOCUS_INDICATOR_CONSTANTS.defaults.FOCUS_MODE;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.FOCUS_MODE, hasFocusMode, this._focusMode);
+        }
+    }
 }

package/esm/focus-indicator/focus-indicator.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { FocusIndicatorFocusMode } from './focus-indicator-constants';
 export interface IFocusIndicatorComponent extends IBaseComponent {
     targetElement: HTMLElement;
     target: string | null;
@@ -11,6 +12,7 @@ export interface IFocusIndicatorComponent extends IBaseComponent {
     inward: boolean;
     circular: boolean;
     allowFocus: boolean;
+    focusMode: FocusIndicatorFocusMode;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,12 +30,14 @@ declare global {
  * @property {boolean} inward - Controls whether the indicator renders inward.
  * @property {boolean} circular - Controls whether the indicator renders circular.
  * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ * @property {FocusIndicatorFocusMode} focusMode - The focus mode to use. Defaults to `focusin`.
  *
  * @attribute {string} target - The id of the element to attach the focus indicator to.
  * @attribute {boolean} active - Controls whether the indicator is active.
  * @attribute {boolean} inward - Controls whether the indicator renders inward.
  * @attribute {boolean} circular - Controls whether the indicator renders circular.
  * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ * @attribute {FocusIndicatorFocusMode} focus-mode - The focus mode to use. Defaults to `focusin`.
  *
  * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
  * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
@@ -64,4 +68,5 @@ export declare class FocusIndicatorComponent extends BaseComponent implements IF
     inward: boolean;
     circular: boolean;
     allowFocus: boolean;
+    focusMode: FocusIndicatorFocusMode;
 }

package/esm/focus-indicator/focus-indicator.js

@@ -22,12 +22,14 @@ const styles = ':host{--_focus-indicator-width:var(--forge-focus-indicator-width
  * @property {boolean} inward - Controls whether the indicator renders inward.
  * @property {boolean} circular - Controls whether the indicator renders circular.
  * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ * @property {FocusIndicatorFocusMode} focusMode - The focus mode to use. Defaults to `focusin`.
  *
  * @attribute {string} target - The id of the element to attach the focus indicator to.
  * @attribute {boolean} active - Controls whether the indicator is active.
  * @attribute {boolean} inward - Controls whether the indicator renders inward.
  * @attribute {boolean} circular - Controls whether the indicator renders circular.
  * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ * @attribute {FocusIndicatorFocusMode} focus-mode - The focus mode to use. Defaults to `focusin`.
  *
  * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
  * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
@@ -47,13 +49,7 @@ const styles = ':host{--_focus-indicator-width:var(--forge-focus-indicator-width
  */
 let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            FOCUS_INDICATOR_CONSTANTS.attributes.TARGET,
-            FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE,
-            FOCUS_INDICATOR_CONSTANTS.attributes.INWARD,
-            FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR,
-            FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS
-        ];
+        return Object.values(FOCUS_INDICATOR_CONSTANTS.attributes);
     }
     constructor() {
         super();
@@ -83,6 +79,9 @@ let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseComponen
             case FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS:
                 this.allowFocus = coerceBoolean(newValue);
                 break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.FOCUS_MODE:
+                this.focusMode = newValue;
+                break;
         }
     }
 };
@@ -104,6 +103,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], FocusIndicatorComponent.prototype, "allowFocus", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "focusMode", void 0);
 FocusIndicatorComponent = __decorate([
     CustomElement({
         name: FOCUS_INDICATOR_CONSTANTS.elementName

package/esm/icon/icon-adapter.d.ts

@@ -9,7 +9,8 @@ export interface IIconAdapter extends IBaseAdapter {
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;
-    setContent(content: string): void;
+    setContent(content: Node | null): void;
+    setViewBox(viewBox: string): void;
 }
 export declare class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAdapter {
     private _observer;
@@ -17,5 +18,6 @@ export declare class IconAdapter extends BaseAdapter<IIconComponent> implements
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;
-    setContent(content: string): void;
+    setContent(element: Element | null): void;
+    setViewBox(viewBox: string): void;
 }

package/esm/icon/icon-adapter.js

@@ -27,16 +27,20 @@ export class IconAdapter extends BaseAdapter {
             this._observer = undefined;
         }
     }
-    setContent(content) {
-        var _a;
+    setContent(element) {
         const shadowRoot = this._component.shadowRoot;
-        const styleTag = shadowRoot.querySelector('style');
-        shadowRoot.innerHTML = content;
-        if (content) {
-            (_a = shadowRoot.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
-        }
-        if (styleTag) {
-            shadowRoot.appendChild(styleTag);
+        shadowRoot.querySelectorAll(':not(style)').forEach(child => child.remove());
+        if (element) {
+            if (this._component.viewbox) {
+                element.setAttribute('viewBox', this._component.viewbox);
+            }
+            element.setAttribute('aria-hidden', 'true');
+            shadowRoot.appendChild(element);
         }
     }
+    setViewBox(viewBox) {
+        var _a;
+        const svgEl = (_a = this._component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
+        svgEl === null || svgEl === void 0 ? void 0 : svgEl.setAttribute('viewBox', viewBox);
+    }
 }

package/esm/icon/icon-constants.d.ts

@@ -3,8 +3,18 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const ICON_CONSTANTS: {
     elementName: "forge-icon";
+    observedAttributes: {
+        NAME: string;
+        SRC: string;
+        LAZY: string;
+        EXTERNAL: string;
+        EXTERNAL_TYPE: string;
+        VIEWBOX: string;
+        THEME: string;
+    };
     attributes: {
         NAME: string;
         SRC: string;
@@ -12,6 +22,7 @@ export declare const ICON_CONSTANTS: {
         EXTERNAL: string;
         EXTERNAL_TYPE: string;
         VIEWBOX: string;
+        THEME: string;
     };
     numbers: {
         LAZY_ROOT_MARGIN: number;
@@ -23,5 +34,6 @@ export declare const ICON_CONSTANTS: {
     };
 };
 export declare const ICON_REGISTRY_KEY = "forgeIcons";
-export declare type IconUrlBuilder = (name: string, type: IconExternalType) => string;
-export declare type IconExternalType = '' | 'custom' | 'standard' | 'extended';
+export type IconUrlBuilder = (name: string, type: IconExternalType) => string;
+export type IconExternalType = '' | 'custom' | 'standard' | 'extended';
+export type IconTheme = Theme | 'text-medium' | 'text-low';

package/esm/icon/icon-constants.js

@@ -11,7 +11,8 @@ const observedAttributes = {
     LAZY: 'lazy',
     EXTERNAL: 'external',
     EXTERNAL_TYPE: 'external-type',
-    VIEWBOX: 'viewbox'
+    VIEWBOX: 'viewbox',
+    THEME: 'theme'
 };
 const attributes = Object.assign({}, observedAttributes);
 const numbers = {
@@ -24,6 +25,7 @@ const strings = {
 };
 export const ICON_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     numbers,
     strings

package/esm/icon/icon-foundation.d.ts

@@ -5,7 +5,7 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IIconAdapter } from './icon-adapter';
-import { IconUrlBuilder, IconExternalType } from './icon-constants';
+import { IconUrlBuilder, IconExternalType, IconTheme } from './icon-constants';
 export interface IIconFoundation extends ICustomElementFoundation {
     name: string | undefined;
     src: string | undefined;
@@ -14,6 +14,7 @@ export interface IIconFoundation extends ICustomElementFoundation {
     externalType: IconExternalType;
     externalUrlBuilder: IconUrlBuilder;
     viewbox: string;
+    theme: IconTheme;
     layout(): void;
 }
 export declare class IconFoundation implements IIconFoundation {
@@ -25,12 +26,13 @@ export declare class IconFoundation implements IIconFoundation {
     private _externalType;
     private _externalUrlBuilder;
     private _viewbox;
+    private _theme;
     private _applyTimer;
     private _lazyListener;
     private _registrationListener;
     constructor(_adapter: IIconAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     private _safeApplyIcon;
     private _tryRemoveListener;
     private _applyIcon;
@@ -54,5 +56,7 @@ export declare class IconFoundation implements IIconFoundation {
     set externalUrlBuilder(cb: IconUrlBuilder);
     get viewbox(): string;
     set viewbox(value: string);
+    get theme(): IconTheme;
+    set theme(value: IconTheme);
     layout(): void;
 }

package/esm/icon/icon-foundation.js

@@ -4,18 +4,20 @@
  * License: Apache-2.0
  */
 import { ICON_CONSTANTS } from './icon-constants';
-import { sanitizeSvgContent, fetchIconContent, getCachedIcon, sanitizeExternalType, awaitIconDefinition, removeIconListener } from './icon-utils';
+import { IconRegistry } from './icon-registry';
+import { createSanitizedSvg, fetchIconContent, getCachedIcon, sanitizeExternalType, awaitIconDefinition, removeIconListener } from './icon-utils';
 export class IconFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
+        this._lazy = false;
         this._external = false;
         this._externalType = 'standard';
-        this._lazyListener = () => this._loadIcon();
+        this._lazyListener = this._loadIcon.bind(this);
     }
     initialize() {
         this._applyIcon();
     }
-    disconnect() {
+    destroy() {
         this._adapter.destroyVisibilityObserver();
         this._clearIconQueue();
         this._tryRemoveListener();
@@ -56,43 +58,64 @@ export class IconFoundation {
         try {
             if (this._src) {
                 // We were provided direct icon source content so just set that
-                this._setIconContent(this._src);
+                const node = createSanitizedSvg(this._src, this._viewbox);
+                this._setIconContent(node);
             }
             else if (this._name) {
-                // Let's attempt to get our icon from the cache
-                let content = this._tryGetIcon(this._name);
-                if (!content) {
+                // Let's attempt to get our icon from the registry
+                const descriptor = this._tryGetIcon(this._name);
+                // Short circuit here if we already have the node from a previous usage
+                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.node) {
+                    this._setIconContent(descriptor.node);
+                    return;
+                }
+                let svgEl = null;
+                if (!descriptor) {
                     if (!this._external) {
                         // We attach a listener to the registry to let us know when the icon is registered
                         this._registrationListener = () => this._applyIcon();
                         awaitIconDefinition(this._name, this._registrationListener);
                         // For now, we render nothing...
-                        this._adapter.setContent('');
+                        this._adapter.setContent(null);
                         return;
                     }
                     // We don't have a registry icon, so let's try the network to fetch it
                     if (!this._externalType) {
-                        throw new Error(`Invalid external type provided for icon: ${this._name}`);
+                        this._externalType = 'standard';
                     }
                     const url = this._getExternalUrl(this._name, this._externalType);
                     if (url) {
-                        content = await fetchIconContent(url, this._name);
+                        const content = await fetchIconContent(url, this._name);
+                        if (content) {
+                            svgEl = createSanitizedSvg(content, this._viewbox);
+                        }
                     }
                 }
-                this._setIconContent(content);
+                else if (descriptor.raw) {
+                    svgEl = createSanitizedSvg(descriptor.raw, this._viewbox);
+                }
+                if (svgEl) {
+                    if (!(descriptor === null || descriptor === void 0 ? void 0 : descriptor.node)) {
+                        // Store the node for future use to improve performance
+                        IconRegistry.setNode(this._name, svgEl);
+                    }
+                    this._setIconContent(svgEl);
+                }
             }
             else {
-                this._adapter.setContent('');
+                this._adapter.setContent(null);
             }
         }
         catch (e) {
-            this._adapter.setContent('');
+            this._adapter.setContent(null);
             throw e;
         }
     }
-    _setIconContent(svgContent) {
-        const content = sanitizeSvgContent(svgContent, this._viewbox);
-        this._adapter.setContent(content);
+    _setIconContent(svgElement) {
+        const clone = svgElement ? svgElement.cloneNode(true) : null;
+        if (clone) {
+            this._adapter.setContent(clone);
+        }
     }
     _tryGetIcon(key) {
         return getCachedIcon(key);
@@ -146,7 +169,7 @@ export class IconFoundation {
         if (this._external !== value) {
             this._external = value;
             this._safeApplyIcon();
-            this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.EXTERNAL, `${this._external}`);
+            this._adapter.toggleHostAttribute(ICON_CONSTANTS.attributes.EXTERNAL, this._external);
         }
     }
     get externalType() {
@@ -174,10 +197,19 @@ export class IconFoundation {
     set viewbox(value) {
         if (this._viewbox !== value) {
             this._viewbox = value;
-            this._safeApplyIcon();
+            this._adapter.setViewBox(this._viewbox);
             this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.VIEWBOX, `${this.viewbox}`);
         }
     }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.THEME, this._theme);
+        }
+    }
     layout() {
         if (this._adapter.isConnected) {
             this._applyIcon();

package/esm/icon/icon-registry.d.ts

@@ -10,11 +10,15 @@ export interface IIcon {
     /** The SVG icon data. */
     data: string;
 }
+export interface IIconDescriptor {
+    raw: string;
+    node?: SVGElement;
+}
 /**
  * The registry for SVG icon instances being used within the current context.
  */
 export declare class IconRegistry {
-    private static _icons;
+    private static get _icons();
     private static _listeners;
     /**
      * Defines a new icon.
@@ -35,7 +39,9 @@ export declare class IconRegistry {
     /** Removes all defined icons. */
     static clear(): void;
     /** Gets the icon data by its name, or `undefined` if not found. */
-    static get(name: string): string | undefined;
+    static get(name: string): IIconDescriptor | undefined;
+    /** Sets the icon node for a given icon name. */
+    static setNode(name: string, node: SVGElement): void;
     /** Gets the names of registered icons. */
     static getIconNames(): string[];
     /** Registers a listener to be notified when an icon with the provided key is registered in the future. */

package/esm/icon/icon-registry.js

@@ -3,10 +3,17 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { ICON_REGISTRY_KEY } from './icon-constants';
 /**
  * The registry for SVG icon instances being used within the current context.
  */
 export class IconRegistry {
+    static get _icons() {
+        if (!window[ICON_REGISTRY_KEY]) {
+            window[ICON_REGISTRY_KEY] = new Map();
+        }
+        return window[ICON_REGISTRY_KEY];
+    }
     /**
      * Defines a new icon.
      * @param icon The icon(s) to register.
@@ -47,6 +54,13 @@ export class IconRegistry {
     static get(name) {
         return IconRegistry._icons.get(name);
     }
+    /** Sets the icon node for a given icon name. */
+    static setNode(name, node) {
+        const descriptor = IconRegistry.get(name);
+        if (descriptor) {
+            descriptor.node = node;
+        }
+    }
     /** Gets the names of registered icons. */
     static getIconNames() {
         return Array.from(IconRegistry._icons.keys());
@@ -67,7 +81,7 @@ export class IconRegistry {
     }
     /** Registers an icon, and attempts to invalidate any listeners. */
     static _register(key, value) {
-        IconRegistry._icons.set(key, value);
+        IconRegistry._icons.set(key, { raw: value, node: undefined });
         IconRegistry._invalidateListeners(key);
     }
     /** Gets all listeners for a specific key, calls the listeners (if any are found), and removes the listeners after they are called. */
@@ -90,5 +104,4 @@ export class IconRegistry {
         return typeof icon === 'object' && icon.hasOwnProperty('name') && icon.hasOwnProperty('data');
     }
 }
-IconRegistry._icons = new Map();
 IconRegistry._listeners = new Map();

package/esm/icon/icon-utils.d.ts

@@ -3,9 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-/** Determines if the provided SVG icon content is valid */
-export declare function sanitizeSvgContent(svgContent: string | undefined, customViewBox?: string, usePartAttrs?: boolean): string;
-export declare function getCachedIcon(key: string): string | undefined;
+import { IIconDescriptor } from './icon-registry';
+/**
+ * Creates an SVG element from a string of SVG content, and sanitizes it for injection into the DOM.
+ */
+export declare function createSanitizedSvg(svgContent: string | undefined, customViewBox?: string, usePartAttrs?: boolean): SVGElement | null;
+export declare function getCachedIcon(key: string): IIconDescriptor | undefined;
 export declare function awaitIconDefinition(key: string, listener: () => void): void;
 export declare function removeIconListener(key: string, listener: () => void): void;
 export declare function fetchIconContent(url: string, name: string): Promise<string>;

package/esm/icon/icon-utils.js

@@ -7,10 +7,12 @@ import { IconRegistry } from './icon-registry';
 import { ICON_CONSTANTS } from './icon-constants';
 import { createSvgFromString } from '../core/utils/svg-utils';
 const _activeIconRequests = new Map();
-/** Determines if the provided SVG icon content is valid */
-export function sanitizeSvgContent(svgContent, customViewBox, usePartAttrs = true) {
+/**
+ * Creates an SVG element from a string of SVG content, and sanitizes it for injection into the DOM.
+ */
+export function createSanitizedSvg(svgContent, customViewBox, usePartAttrs = true) {
     if (!svgContent || !svgContent.includes('svg')) {
-        return '';
+        return null;
     }
     if (!customViewBox && !svgContent.includes('viewBox')) {
         customViewBox = `0 0 ${ICON_CONSTANTS.numbers.DEFAULT_WIDTH} ${ICON_CONSTANTS.numbers.DEFAULT_HEIGHT}`;
@@ -18,11 +20,8 @@ export function sanitizeSvgContent(svgContent, customViewBox, usePartAttrs = tru
     const svgElement = createSvgFromString(svgContent, customViewBox);
     if (usePartAttrs && svgElement) {
         svgElement.setAttribute('part', 'svg');
-        svgElement.querySelectorAll('path').forEach(node => {
-            node.setAttribute('part', node.tagName.toLowerCase());
-        });
     }
-    return svgElement ? svgElement.outerHTML : '';
+    return svgElement;
 }
 export function getCachedIcon(key) {
     return IconRegistry.get(key);

package/esm/icon/icon.d.ts

@@ -3,16 +3,19 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IconUrlBuilder, IconExternalType } from './icon-constants';
+import { IconUrlBuilder, IconExternalType, IconTheme } from './icon-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IIconComponent extends IBaseComponent {
+export interface IIconProperties {
     name: string | undefined;
     src: string | undefined;
     lazy: boolean;
     external: boolean;
     externalType: IconExternalType;
     externalUrlBuilder: IconUrlBuilder;
+    theme: IconTheme;
     viewbox: string;
+}
+export interface IIconComponent extends IIconProperties, IBaseComponent {
     layout(): void;
 }
 declare global {
@@ -21,9 +24,36 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-icon>` custom element.
- *
  * @tag forge-icon
+ *
+ * @summary Icons are used to represent information visually
+ *
+ * @property {string} name - The name of the icon to render.
+ * @property {string} src - Provides the ability to set the SVG string content directly.
+ * @property {boolean} lazy - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
+ * @property {boolean} external - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
+ * @property {IconExternalType} externalType - The type of icon to load externally. Possible values: "standard" (default), "extended", "custom".
+ * @property {IconUrlBuilder} externalUrlBuilder - A callback that can be provided to generate a URL that will be used to fetch an SVG icon.
+ * @property {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
+ * @property {IconTheme} theme - The theme to apply to the icon.
+ *
+ * @attribute {string} name - The name of the icon to render.
+ * @attribute {string} src - Provides the ability to set the SVG string content directly.
+ * @attribute {boolean} lazy - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
+ * @attribute {boolean} external - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
+ * @attribute {IconExternalType} externalType - The type of icon to load externally. Possible values: "standard" (default), "extended", "custom".
+ * @attribute {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
+ * @attribute {IconTheme} theme - The theme to apply to the icon.
+ *
+ * @method layout - Forces a reload of the icon content.
+ *
+ * @cssproperty --forge-icon-color - The color of the icon.
+ * @cssproperty --forge-icon-size - The size of the icon. Defaults to the font-size of the context it is placed in.
+ * @cssproperty --forge-icon-width - The width of the icon.
+ * @cssproperty --forge-icon-height - The height of the icon.
+ * @cssproperty --forge-icon-font-size - The font size of the icon.
+ *
+ * @csspart svg - The internal SVG element.
  */
 export declare class IconComponent extends BaseComponent implements IIconComponent {
     static get observedAttributes(): string[];
@@ -46,6 +76,7 @@ export declare class IconComponent extends BaseComponent implements IIconCompone
     externalUrlBuilder: IconUrlBuilder;
     /** A custom value to apply to the `viewBox` attribute on the internal `<svg>` element. */
     viewbox: string;
+    theme: IconTheme;
     /** Forces a reload of the icon. */
     layout(): void;
 }