@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 /**
  * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
  * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
@@ -18,16 +18,8 @@ import { DDSElement } from "../../base/index.js";
  * <daikin-toggle name="name" value="value"></daikin-toggle>
  * ```
  */
-export declare class DaikinToggle extends DDSElement {
+export declare class DaikinToggle extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * The form name, submitted as a name/value pair when submitting the form.
-     */
-    name: string;
-    /**
-     * The form value, submitted as a name/value pair when submitting the form.
-     */
-    value: string;
     /**
      * Whether the toggle switch is turned on.
      */
@@ -36,8 +28,6 @@ export declare class DaikinToggle extends DDSElement {
      * Specify the toggle switch disabled state.
      */
     disabled: boolean;
-    static readonly formAssociated = true;
-    private _internals;
     private _updateFormValue;
     private _handleChange;
     render(): import('lit-html').TemplateResult<1>;

package/dist/es/components/toggle/daikin-toggle.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -49,17 +50,14 @@ const TOGGLE_CLASS_NAME = cva([
   "enabled:before:bg-ddt-color-common-background-default",
   "disabled:before:bg-ddt-color-common-surface-hover"
 ])();
-let DaikinToggle = class extends DDSElement {
+let DaikinToggle = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.checked = false;
     this.disabled = false;
-    this._internals = this.attachInternals();
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleChange(event) {
     this.checked = event.target.checked;
@@ -91,13 +89,6 @@ DaikinToggle.styles = css`
       display: inline-flex;
     }
   `;
-DaikinToggle.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinToggle.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinToggle.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinToggle.prototype, "checked", 2);

package/dist/es/components/tooltip/daikin-tooltip.d.ts

@@ -12,7 +12,7 @@ type TooltipVariantProps = MergeVariantProps<typeof cvaTooltip>;
  * @fires toggle - A event emitted when the tooltip is opened or closed.
  *
  * @slot - A slot for the element to which the tooltip is attached (the trigger element).
- * @slot description - A slot for the tooltip description content.
+ * @slot description - A slot for the tooltip description content. Tooltips don't have a prescribed maximum or minimum width. If you plan to use longer text, please note that you'll need to manually implement line breaks.
  *
  * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger.
  *
@@ -55,6 +55,7 @@ export declare class DaikinTooltip extends DDSElement {
     /**
      * Specifies the content of the tooltip.
      * Ignored if the `tooltip` slot exists.
+     * Tooltips don't have a prescribed maximum or minimum width. If you plan to use longer text, please note that you'll need to manually implement line breaks.
      */
     description: string;
     /**
@@ -70,13 +71,20 @@ export declare class DaikinTooltip extends DDSElement {
      * - `manual`: The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
      */
     trigger: "hover" | "click" | "manual";
+    /**
+     * Internal state to track whether the element will be focused by a press interaction.
+     * In this case, the tooltip will not be open via focus to prevent it from disappearing immediately afterward.
+     */
+    private _willBeFocusedByPress;
     private _autoUpdateController;
     private _hostStyles;
     private _handleClick;
     private _handleFocusIn;
     private _handleFocusOut;
-    private _handleMouseEnter;
-    private _handleMouseLeave;
+    private _handlePointerEnter;
+    private _handlePointerLeave;
+    private _handlePointerDown;
+    private _handlePointerUp;
     private _handleBeforeToggle;
     private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;

package/dist/es/components/tooltip/daikin-tooltip.js

@@ -1,6 +1,6 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -61,6 +61,7 @@ let DaikinTooltip = class extends DDSElement {
     this.description = "";
     this.popoverValue = "auto";
     this.trigger = "hover";
+    this._willBeFocusedByPress = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient ? window.getComputedStyle(this) : null;
   }
@@ -82,21 +83,34 @@ let DaikinTooltip = class extends DDSElement {
     }
   }
   _handleFocusIn() {
-    this.open = true;
+    if (this.trigger !== "manual" && !this._willBeFocusedByPress) {
+      this.open = true;
+    }
   }
   _handleFocusOut() {
-    this.open = false;
+    if (this.trigger !== "manual") {
+      this.open = false;
+    }
   }
-  _handleMouseEnter() {
-    if (this.trigger === "hover") {
+  _handlePointerEnter(event) {
+    if (this.trigger === "hover" && event.pointerType === "mouse") {
       this.open = true;
     }
   }
-  _handleMouseLeave() {
-    if (this.trigger === "hover") {
+  _handlePointerLeave(event) {
+    if (this.trigger === "hover" && event.pointerType === "mouse") {
       this.open = false;
     }
   }
+  _handlePointerDown() {
+    this._willBeFocusedByPress = this.trigger === "click" && !this.matches(":focus-within");
+  }
+  _handlePointerUp(event) {
+    this._willBeFocusedByPress = false;
+    if (this.trigger === "hover" && event.pointerType === "touch") {
+      this.open = !this.open;
+    }
+  }
   _handleBeforeToggle(event) {
     reDispatch(this, event, new ToggleEvent("beforetoggle", event));
   }
@@ -124,8 +138,10 @@ let DaikinTooltip = class extends DDSElement {
           @click=${this._handleClick}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
-          @mouseenter=${this._handleMouseEnter}
-          @mouseleave=${this._handleMouseLeave}
+          @pointerenter=${this._handlePointerEnter}
+          @pointerleave=${this._handlePointerLeave}
+          @pointerdown=${this._handlePointerDown}
+          @pointerup=${this._handlePointerUp}
         ></slot>
       </div>
       <span

package/dist/es/components/tree/daikin-tree.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

package/dist/es/components/tree-item/daikin-tree-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";

package/dist/es/components/tree-section/daikin-tree-section.d.ts

@@ -9,6 +9,8 @@ import { DDSElement } from "../../base/index.js";
  * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
  * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
  *
+ * @tokenImports ../tree-item/daikin-tree-item.ts
+ *
  * @fires toggle - _Cancellable._ A custom event emitted when the user clicks the header.
  * @fires tree-move-focus - _Internal use._ A custom event used to move the focus within a tree.
  *

package/dist/es/components/tree-section/daikin-tree-section.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";

package/dist/es/controllers/click-outside.js

@@ -8,7 +8,9 @@ const clickOutsideDirective = createControllerDirective(
       }
       callback.call(element, event);
     };
-    window.addEventListener("click", listener);
+    setTimeout(() => {
+      window.addEventListener("click", listener);
+    }, 0);
     return () => {
       window.removeEventListener("click", listener);
     };

package/dist/es/controllers/floating-ui-auto-update.d.ts

@@ -13,7 +13,19 @@ export declare class FloatingUIAutoUpdateController<T extends ReactiveController
     private readonly _isOptionsUpdated?;
     private _floatingElement;
     private _referenceElement;
+    /**
+     * Context information to be passed with floating-ready event
+     */
+    private _triggerContext;
     constructor(_host: T, _isOptionsUpdated?: ((current: Partial<ComputePositionConfig>, previous: Partial<ComputePositionConfig>) => boolean) | undefined);
+    /**
+     * Set context information that will be included in the floating-ready event
+     */
+    setTriggerContext(context: Record<string, unknown>): void;
+    /**
+     * Clear the trigger context
+     */
+    clearTriggerContext(): void;
     private readonly _refCallbackFloating;
     private readonly _refCallbackReference;
     get floatingElement(): HTMLElement | undefined;

package/dist/es/controllers/floating-ui-auto-update.js

@@ -3,7 +3,7 @@ import { nothing } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { createControllerDirective } from "./helpers/controller-directive.js";
 const floatingUIAutoUpdateDirective = createControllerDirective(
-  (referenceElement, floatingElement, options) => {
+  (referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
     const cleanupAutoUpdate = autoUpdate(
       referenceElement,
       floatingElement,
@@ -16,7 +16,10 @@ const floatingUIAutoUpdateDirective = createControllerDirective(
           floatingElement.style.setProperty("--floating-y", `${y}px`);
           floatingElement.setAttribute("data-floating-ready", "");
           if (isFirst) {
-            floatingElement.dispatchEvent(new Event("floating-ready"));
+            const event = new CustomEvent("floating-ready", {
+              detail: triggerContext
+            });
+            floatingElement.dispatchEvent(event);
           }
         }).catch((error) => {
         });
@@ -34,7 +37,8 @@ const floatingUIAutoUpdateDirective = createControllerDirective(
       current[0] !== previous[0] || // Check if the floating element is changed
       current[1] !== previous[1] || // Check if the options is changed.
       // If option comparison function (current[3]) is provided, use it to compare options. Otherwise, use `!==` to compare options.
-      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2])
+      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2]) || // Check if the trigger context is changed
+      current[4] !== previous[4]
     );
   }
 );
@@ -42,6 +46,7 @@ class FloatingUIAutoUpdateController {
   constructor(_host, _isOptionsUpdated) {
     this._host = _host;
     this._isOptionsUpdated = _isOptionsUpdated;
+    this._triggerContext = {};
     this._refCallbackFloating = (element) => {
       this._floatingElement = element;
       this._host.requestUpdate();
@@ -52,6 +57,18 @@ class FloatingUIAutoUpdateController {
     };
     _host.addController(this);
   }
+  /**
+   * Set context information that will be included in the floating-ready event
+   */
+  setTriggerContext(context) {
+    this._triggerContext = { ...context };
+  }
+  /**
+   * Clear the trigger context
+   */
+  clearTriggerContext() {
+    this._triggerContext = {};
+  }
   get floatingElement() {
     return this._floatingElement;
   }
@@ -72,7 +89,8 @@ class FloatingUIAutoUpdateController {
       this._referenceElement,
       this._floatingElement,
       options,
-      this._isOptionsUpdated
+      this._isOptionsUpdated,
+      this._triggerContext
     );
   }
 }

package/dist/es/controllers/focus-trap.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveControllerHost } from 'lit';
+export declare class FocusTrapController<T extends ReactiveControllerHost & HTMLElement> {
+    private readonly _host;
+    private readonly _onDeactivate;
+    private _container;
+    private readonly _refCallbackContainer;
+    constructor(_host: T, _onDeactivate: () => void);
+    refContainer(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
+    directive(open?: boolean, persistent?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
+}

package/dist/es/controllers/focus-trap.js

@@ -0,0 +1,42 @@
+import { createFocusTrap } from "focus-trap";
+import { nothing } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { createControllerDirective } from "./helpers/controller-directive.js";
+const focusTrapDirective = createControllerDirective((container, persistent, onDeactivate) => {
+  const trap = createFocusTrap(container, {
+    escapeDeactivates: !persistent,
+    fallbackFocus: container,
+    tabbableOptions: {
+      getShadowRoot: (node) => node.shadowRoot ?? void 0
+    },
+    clickOutsideDeactivates: !persistent,
+    onDeactivate
+  });
+  trap.activate();
+  return () => {
+    trap.deactivate();
+  };
+});
+class FocusTrapController {
+  constructor(_host, _onDeactivate) {
+    this._host = _host;
+    this._onDeactivate = _onDeactivate;
+    this._refCallbackContainer = (element) => {
+      this._container = element;
+      this._host.requestUpdate();
+    };
+    _host.addController(this);
+  }
+  refContainer() {
+    return ref(this._refCallbackContainer);
+  }
+  directive(open = true, persistent = false) {
+    if (!open || !this._container) {
+      return nothing;
+    }
+    return focusTrapDirective(this._container, persistent, this._onDeactivate);
+  }
+}
+export {
+  FocusTrapController
+};

package/dist/es/icon-registry.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Icon data structure containing SVG information
+ */
+export interface IconData {
+    /** SVG content as a string */
+    svg: string;
+    /** Default color for the icon */
+    defaultColor?: string | null;
+    /**
+     * Determines how the SVG is rendered.
+     * This affects the styling and behavior of the icon.
+     *
+     * - "mask": Uses the SVG as a CSS mask, allowing for color customization. Use this for monochrome icons.
+     * - "background": Uses the SVG as a CSS background image. Use this for colorful icons with no complex styling.
+     * - "inline": Renders the SVG inline, allowing for more complex styling.
+     *   **Be cautious with this mode as it can introduce security risks if the SVG content is not trusted.**
+     *
+     * @default "mask"
+     */
+    mode?: "mask" | "background" | "inline";
+}
+/**
+ * Direct icon registration configuration
+ */
+export interface DirectIconRegistration {
+    /** Icon name */
+    name: string;
+    /** SVG content or icon data */
+    svg: string | IconData;
+}
+/**
+ * Dynamic icon registration configuration using regex pattern matching
+ */
+export interface DynamicIconRegistration {
+    /** Regular expression to match icon names */
+    match: RegExp;
+    /** Function to fetch SVG content for matched names */
+    fetch: (name: string) => Promise<string | IconData> | string | IconData;
+}
+/**
+ * Icon registration configuration
+ */
+export type IconRegistration = DirectIconRegistration | DynamicIconRegistration;
+/**
+ * Icon registry class that manages icon registration and retrieval
+ */
+export declare class IconRegistry {
+    #private;
+    /**
+     * Get the singleton instance of IconRegistry
+     */
+    static getGlobalInstance(): IconRegistry;
+    /**
+     * Register an icon or dynamic icon fetcher
+     * @param registration Icon registration configuration
+     *
+     * @example
+     * // Direct registration
+     * registry.register({ name: "custom-icon", svg: "<svg>...</svg>" });
+     *
+     * // Dynamic registration
+     * registry.register({
+     *   match: /^custom-/,
+     *   fetch: async (name) => {
+     *     const response = await fetch(`/icons/${name}.svg`);
+     *     return response.text();
+     *   }
+     * });
+     */
+    register(registration: IconRegistration): void;
+    /**
+     * Get an icon by name
+     * @param name Icon name
+     * @returns Promise that resolves to IconData or null if not found
+     */
+    getIcon(name: string): Promise<IconData | null>;
+    /**
+     * Check if an icon is registered (either directly or through dynamic registration)
+     * @param name Icon name
+     * @returns true if icon is available
+     */
+    hasIcon(name: string): boolean;
+    /**
+     * Get all directly registered icon names
+     * @returns Array of icon names
+     */
+    getRegisteredIconNames(): string[];
+    /**
+     * Get all dynamic registration patterns
+     * @returns Array of regex patterns
+     */
+    getDynamicPatterns(): RegExp[];
+    /**
+     * Clear all registrations and cache
+     */
+    clear(): void;
+    /**
+     * Remove a specific icon registration
+     * @param name Icon name to remove
+     */
+    unregister(name: string): boolean;
+    /**
+     * Fetch icon from dynamic registration
+     * @param registration Dynamic registration
+     * @param name Icon name
+     * @returns Promise that resolves to IconData or null
+     */
+    private fetchDynamicIcon;
+    /**
+     * Perform the actual dynamic fetch
+     * @param registration Dynamic registration
+     * @param name Icon name
+     * @returns Promise that resolves to IconData or null
+     */
+    private performDynamicFetch;
+}
+/**
+ * Global icon registry instance
+ */
+export declare const iconRegistry: IconRegistry;

package/dist/es/icon-registry.js

@@ -0,0 +1,170 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _instance, _icons, _dynamicRegistrations, _cache;
+function isDynamicRegistration(registration) {
+  return "match" in registration && "fetch" in registration;
+}
+function isDirectRegistration(registration) {
+  return "name" in registration && "svg" in registration;
+}
+function normalizeIconData(svg) {
+  if (typeof svg === "string") {
+    return { mode: "mask", svg };
+  }
+  return { mode: "mask", ...svg };
+}
+const _IconRegistry = class _IconRegistry {
+  constructor() {
+    /** Map of registered icons by name */
+    __privateAdd(this, _icons, /* @__PURE__ */ new Map());
+    /** Array of dynamic icon registrations */
+    __privateAdd(this, _dynamicRegistrations, []);
+    /** Cache for dynamically fetched icons */
+    __privateAdd(this, _cache, /* @__PURE__ */ new Map());
+  }
+  /**
+   * Get the singleton instance of IconRegistry
+   */
+  static getGlobalInstance() {
+    const instance = __privateGet(_IconRegistry, _instance) ?? __privateSet(_IconRegistry, _instance, new _IconRegistry());
+    return instance;
+  }
+  /**
+   * Register an icon or dynamic icon fetcher
+   * @param registration Icon registration configuration
+   *
+   * @example
+   * // Direct registration
+   * registry.register({ name: "custom-icon", svg: "<svg>...</svg>" });
+   *
+   * // Dynamic registration
+   * registry.register({
+   *   match: /^custom-/,
+   *   fetch: async (name) => {
+   *     const response = await fetch(`/icons/${name}.svg`);
+   *     return response.text();
+   *   }
+   * });
+   */
+  register(registration) {
+    if (isDirectRegistration(registration)) {
+      const iconData = normalizeIconData(registration.svg);
+      __privateGet(this, _icons).set(registration.name, iconData);
+    } else if (isDynamicRegistration(registration)) {
+      __privateGet(this, _dynamicRegistrations).push(registration);
+    }
+  }
+  /**
+   * Get an icon by name
+   * @param name Icon name
+   * @returns Promise that resolves to IconData or null if not found
+   */
+  async getIcon(name) {
+    const registered = __privateGet(this, _icons).get(name);
+    if (registered) {
+      return registered;
+    }
+    for (const registration of __privateGet(this, _dynamicRegistrations)) {
+      if (registration.match.test(name)) {
+        return this.fetchDynamicIcon(registration, name);
+      }
+    }
+    return null;
+  }
+  /**
+   * Check if an icon is registered (either directly or through dynamic registration)
+   * @param name Icon name
+   * @returns true if icon is available
+   */
+  hasIcon(name) {
+    if (__privateGet(this, _icons).has(name)) {
+      return true;
+    }
+    return __privateGet(this, _dynamicRegistrations).some(
+      (registration) => registration.match.test(name)
+    );
+  }
+  /**
+   * Get all directly registered icon names
+   * @returns Array of icon names
+   */
+  getRegisteredIconNames() {
+    return Array.from(__privateGet(this, _icons).keys());
+  }
+  /**
+   * Get all dynamic registration patterns
+   * @returns Array of regex patterns
+   */
+  getDynamicPatterns() {
+    return __privateGet(this, _dynamicRegistrations).map((reg) => reg.match);
+  }
+  /**
+   * Clear all registrations and cache
+   */
+  clear() {
+    __privateGet(this, _icons).clear();
+    __privateGet(this, _dynamicRegistrations).length = 0;
+    __privateGet(this, _cache).clear();
+  }
+  /**
+   * Remove a specific icon registration
+   * @param name Icon name to remove
+   */
+  unregister(name) {
+    const existed = __privateGet(this, _icons).has(name);
+    __privateGet(this, _icons).delete(name);
+    return existed;
+  }
+  /**
+   * Fetch icon from dynamic registration
+   * @param registration Dynamic registration
+   * @param name Icon name
+   * @returns Promise that resolves to IconData or null
+   */
+  async fetchDynamicIcon(registration, name) {
+    const cacheKey = `${registration.match.source}\0${name}`;
+    const cached = __privateGet(this, _cache).get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const fetchPromise = this.performDynamicFetch(registration, name).then(
+      (result) => {
+        __privateGet(this, _cache).set(cacheKey, result);
+        return result;
+      }
+    );
+    __privateGet(this, _cache).set(cacheKey, fetchPromise);
+    return fetchPromise;
+  }
+  /**
+   * Perform the actual dynamic fetch
+   * @param registration Dynamic registration
+   * @param name Icon name
+   * @returns Promise that resolves to IconData or null
+   */
+  async performDynamicFetch(registration, name) {
+    try {
+      const result = await registration.fetch(name);
+      return normalizeIconData(result);
+    } catch (error) {
+      console.warn(`Failed to fetch dynamic icon "${name}":`, error);
+      return null;
+    }
+  }
+};
+_instance = new WeakMap();
+_icons = new WeakMap();
+_dynamicRegistrations = new WeakMap();
+_cache = new WeakMap();
+__privateAdd(_IconRegistry, _instance);
+let IconRegistry = _IconRegistry;
+const iconRegistry = IconRegistry.getGlobalInstance();
+export {
+  IconRegistry,
+  iconRegistry
+};

package/dist/es/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
+export * from "./icon-registry.js";
 export * from "./lit-analyzer-types.js";