@daikin-oss/design-system-web-components 1.2.0 → 1.3.0

package/dist/es/components/date-picker/daikin-date-picker.js

@@ -1,7 +1,8 @@
-import { offset } from "@floating-ui/dom";
+import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
@@ -259,12 +260,6 @@ let DaikinDatePicker = class extends DDSFormElement {
   get _open() {
     return this.open && !this.disabled && !this.readonly;
   }
-  _openCalendar() {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    this.open = true;
-  }
   _emitSelect() {
     this.dispatchEvent(
       new Event("select", {
@@ -408,6 +403,22 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     this._emitSelect();
   }
+  _handlePointerUp() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  _handleCalendarKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      this.open = !this.open;
+    }
+  }
   _handleToggle(event) {
     if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
       this.open = event.newState === "open";
@@ -496,7 +507,8 @@ let DaikinDatePicker = class extends DDSFormElement {
           variant="ghost"
           button-aria-label="Open the date picker"
           ?disabled=${this.disabled}
-          @click=${this._openCalendar}
+          @pointerup=${this._handlePointerUp}
+          @keydown=${this._handleCalendarKeyDown}
         >
           <span class=${cvaIconButton({ intent: "calender" })}></span>
         </daikin-icon-button>
@@ -510,7 +522,7 @@ let DaikinDatePicker = class extends DDSFormElement {
         default-value=${ifDefined(
       this._defaultValue ? formatDateForProperty(this._defaultValue) : void 0
     )}
-        popover
+        popover="auto"
         class="absolute left-[--floating-x,0] top-[--floating-y,0]"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -518,14 +530,17 @@ let DaikinDatePicker = class extends DDSFormElement {
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
-      ${// Activate auto update only when the calendar is open.
-    // TODO: refactor here with CSS Anchor Positioning instead of using floating-ui
-    this._autoUpdateController.directive(
-      {
-        placement: "bottom-start",
-        middleware: [offset({ mainAxis: 0 })]
-      },
-      this._open
+      ${// Activate auto update only when the tooltip is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard(
+      [this.open],
+      () => this._autoUpdateController.directive(
+        {
+          placement: "bottom-start",
+          middleware: [offset({ mainAxis: 0 }), flip(), shift()]
+        },
+        this.open
+      )
     )}`;
   }
   willUpdate(changedProperties) {

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

@@ -75,14 +75,13 @@ export declare class DaikinDropdown extends DDSFormElement {
     private get _selectionLabels();
     private _initialUpdateCompleted;
     private _autoUpdateController;
-    private _clickOutsideController;
+    private _willBeFocusedByPress;
     /**
      * Last focused dropdown item.
      * The next time the dropdown opens, the focus will be moved to this element.
      */
     private _lastFocusedItem;
     private _dropdownRef;
-    private _onClickOutside;
     private _searchItem;
     private _moveFocus;
     private _updateFormValue;
@@ -105,13 +104,15 @@ export declare class DaikinDropdown extends DDSFormElement {
      * If multiple selection is disabled, directly empty the selected options.
      */
     private _removeLastSelection;
-    private _handleClick;
     private _handleKeyDown;
     private _handleKeyDownEscape;
     /**
      * Handle `focusin` event to remember last focused item.
      */
     private _handleFocusIn;
+    private _handlePointerDown;
+    private _handlePointerUp;
+    private _handleButtonKeyDown;
     /**
      * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
      * The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.

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

@@ -8,7 +8,6 @@ import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
-import { ClickOutsideController } from "../../controllers/click-outside.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
@@ -51,7 +50,7 @@ const cvaButton = cva(
     "enabled:outline-[--color-base]",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:size-6",
     "after:flex-none",
     "after:ml-auto",
@@ -115,10 +114,7 @@ let DaikinDropdown = class extends DDSFormElement {
     this._label = null;
     this._initialUpdateCompleted = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
-    this._clickOutsideController = new ClickOutsideController(
-      this,
-      this._onClickOutside
-    );
+    this._willBeFocusedByPress = false;
     this._lastFocusedItem = null;
     this._dropdownRef = createRef();
   }
@@ -131,9 +127,6 @@ let DaikinDropdown = class extends DDSFormElement {
       }
     );
   }
-  _onClickOutside() {
-    this.open = false;
-  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -161,8 +154,9 @@ let DaikinDropdown = class extends DDSFormElement {
       return;
     }
     const items = this._items.filter(({ disabled }) => !disabled);
-    const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item2) => item2.contains(activeElement)) : -1;
+    const focusedItemIndex = items.findIndex(
+      (item2) => item2.matches(":focus-within")
+    );
     if (focusedItemIndex === -1) {
       moveOffset = 1;
     }
@@ -193,9 +187,10 @@ let DaikinDropdown = class extends DDSFormElement {
   _handleSelectOption(value) {
     this.value = value;
     this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+    this.dispatchEvent(new Event("change"));
   }
   _handleFocusOut(event) {
-    if (!event.relatedTarget) {
+    if (!event.relatedTarget && !this._willBeFocusedByPress) {
       if (!this.multiple && this._lastFocusedItem) {
         this._handleSelectOption(this._lastFocusedItem.value);
       }
@@ -217,12 +212,6 @@ let DaikinDropdown = class extends DDSFormElement {
       this.value = "";
     }
   }
-  _handleClick() {
-    if (this.disabled) {
-      return;
-    }
-    this.open = !this.open;
-  }
   _handleKeyDown(event) {
     if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
       if (event.key === "ArrowDown") {
@@ -284,6 +273,28 @@ let DaikinDropdown = class extends DDSFormElement {
     }
     this._lastFocusedItem = target;
   }
+  _handlePointerDown() {
+    if (this.open) {
+      this._willBeFocusedByPress = true;
+    }
+  }
+  _handlePointerUp() {
+    if (this.disabled) {
+      return;
+    }
+    this._willBeFocusedByPress = false;
+    this.open = !this.open;
+  }
+  _handleButtonKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled) {
+        return;
+      }
+      this.open = !this.open;
+    }
+  }
   /**
    * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
    * The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.
@@ -292,7 +303,9 @@ let DaikinDropdown = class extends DDSFormElement {
   _handleFloatingReady() {
     const items = this._items;
     const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
-    item == null ? void 0 : item.focus();
+    setTimeout(() => {
+      item == null ? void 0 : item.focus();
+    }, 100);
   }
   /**
    * Handle `select` event from `daikin-dropdown-item`.
@@ -302,13 +315,13 @@ let DaikinDropdown = class extends DDSFormElement {
     if (!this.multiple) {
       this.open = false;
     }
-    this.dispatchEvent(new Event("change"));
   }
   _handleSlotChange() {
     this._updateItemsSelectable();
   }
   render() {
-    return html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
+    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : "Open dropdown";
+    return html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref(this._dropdownRef)}
         type="button"
@@ -318,15 +331,15 @@ let DaikinDropdown = class extends DDSFormElement {
       placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
-        role="combobox"
-        aria-label=${ifDefined(this._label ?? void 0)}
+        aria-label=${this._label ?? fallbackLabel}
         aria-expanded=${this.open && !this.disabled}
         aria-disabled=${this.disabled}
         aria-controls="dropdown-items"
-        aria-autocomplete="list"
         aria-required=${this.required}
         aria-haspopup="listbox"
-        @click=${this._handleClick}
+        @pointerup=${this._handlePointerUp}
+        @pointerdown=${this._handlePointerDown}
+        @keydown=${this._handleButtonKeyDown}
         ${this._autoUpdateController.refReference()}
       >
         <span class="truncate">
@@ -335,19 +348,23 @@ let DaikinDropdown = class extends DDSFormElement {
       </button>
       <div
         id="dropdown-items"
-        popover
-        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded max-w-min break-all"
-        aria-label=${ifDefined(this._label ?? void 0)}
-        role="listbox"
+        popover="manual"
+        class="flex flex-col overflow-hidden floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider opacity-1 transition-[opacity] rounded max-w-min"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <slot
-          @slotchange=${this._handleSlotChange}
-          @select=${this._handleSelect}
-          @focusin=${this._handleFocusIn}
-          @focusout=${this._handleFocusOut}
-        ></slot>
+        <div
+          class="flex-1 overflow-y-auto break-all"
+          aria-label=${ifDefined(this._label ?? void 0)}
+          role="listbox"
+        >
+          <slot
+            @slotchange=${this._handleSlotChange}
+            @select=${this._handleSelect}
+            @focusin=${this._handleFocusIn}
+            @focusout=${this._handleFocusOut}
+          ></slot>
+        </div>
       </div>
       ${// Activate auto update only when the dropdown is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
@@ -355,8 +372,6 @@ let DaikinDropdown = class extends DDSFormElement {
       floatingPositionOptions,
       this.open && !this.disabled
     )}
-      ${// Listen to click outside only when the dropdown is open.
-    this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
   /**

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

@@ -1,23 +1,115 @@
 import { DDSElement } from "../../base/index.js";
+import { IconRegistry } from "../../icon-registry.js";
 import { MergeVariantProps } from "../../type-utils.js";
-import { icons } from "./icons.json.js";
+declare const icons: {
+    "logo-positive": {
+        class: string;
+        color: null;
+    };
+    "logo-negative": {
+        class: string;
+        color: null;
+    };
+    alarm: {
+        class: string;
+        color: null;
+    };
+    close: {
+        class: string;
+        color: string;
+    };
+    information: {
+        class: string;
+        color: null;
+    };
+    error: {
+        class: string;
+        color: null;
+    };
+    success: {
+        class: string;
+        color: null;
+    };
+    warning: {
+        class: string;
+        color: null;
+    };
+    "pagination-chevron-left": {
+        class: string;
+        color: string;
+    };
+    "pagination-chevron-right": {
+        class: string;
+        color: string;
+    };
+    profile: {
+        class: string;
+        color: null;
+    };
+    "chevron-up": {
+        class: string;
+        color: null;
+    };
+    "chevron-down": {
+        class: string;
+        color: null;
+    };
+    "chevron-left": {
+        class: string;
+        color: null;
+    };
+    "chevron-right": {
+        class: string;
+        color: null;
+    };
+    sort: {
+        class: string;
+        color: null;
+    };
+    negative: {
+        class: string;
+        color: null;
+    };
+    positive: {
+        class: string;
+        color: null;
+    };
+    cross: {
+        class: string;
+        color: null;
+    };
+};
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
-    icon?: string | number | null | undefined;
     color?: "current" | "default" | "black" | "white" | null | undefined;
+    mode?: "mask" | "background" | "inline" | "static" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
  * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
- * The icon set is provided by DDS.
+ * The icon set is provided by DDS, and it also supports custom icons via the icon registry.
  *
- * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ * For static DDS icons, the component uses the predefined icon set.
+ * For custom icons, it can dynamically load icons from various sources using the icon registry.
  *
- * If you try to use an icon that does not exist, a blank space will be displayed.
- * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
+ * This component supports multiple rendering modes for enhanced security when using custom icons:
  *
- * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ * - **mask** (default for custom icons): Uses CSS mask-image for secure rendering with color customization
+ * - **background**: Uses CSS background-image for secure rendering without color customization
+ * - **inline**: Traditional SVG rendering using innerHTML (use with caution)
+ * - **static** (for DDS icons): Uses predefined CSS classes from the DDS icon set
+ *
+ * **Security Note**: When using custom icons, especially with `inline` mode, ensure that the SVG content comes from trusted sources only.
+ * Untrusted input may lead to XSS vulnerabilities. Consider using `mask` or `background` modes for better security.
+ *
+ * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property.
+ * This works out-of-the-box for mask and static modes, and can be achieved for inline mode with additional effort. The background mode does not support custom colors.
+ *
+ * If an icon cannot be loaded, a blank space will be displayed.
+ * In development builds, warnings will be shown in the console for debugging.
+ *
+ * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be automatically overwritten. This may also be set by a parent component such as `daikin-icon-button`.
  *
  * @example
  *
@@ -26,15 +118,51 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * ```
  *
  * ```html
+ * <!-- Using a DDS static icon -->
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
+ *
+ * <!-- Using a custom icon -->
+ * <daikin-icon icon="my-custom-icon" color="black" size="m"></daikin-icon>
+ *
+ * <script>
+ * import { iconRegistry } from "@daikin-oss/design-system-web-components/icon-registry.js";
+ *
+ * // Register with mask mode for secure rendering
+ * iconRegistry.register({
+ *   name: "my-custom-icon",
+ *   svg: {
+ *     svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>',
+ *     mode: "mask",
+ *     defaultColor: "#0066cc"
+ *   },
+ * });
+ *
+ * // Register dynamic custom icons
+ * iconRegistry.register({
+ *   match: /^custom-/,
+ *   async fetch: (name) => {
+ *     const response = await fetch(`/path/to/custom/icons/${name}.svg`);
+ *     if (!response.ok) {
+ *       throw new Error(`Failed to load custom icon "${name}"`);
+ *     }
+ *     return response.text();
+ *   },
+ * });
+ * </script>
  * ```
  */
 export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the name of the icon
+     * Specify icon registry instance.
+     * Default is the global icon registry.
+     */
+    registry: IconRegistry;
+    /**
+     * Specify the name of the icon.
+     * Can be a static DDS icon name or a custom icon name registered in the icon registry.
      */
-    icon: IconType | null;
+    icon: string | null;
     /**
      * Specify icon color
      */
@@ -44,6 +172,10 @@ export declare class DaikinIcon extends DDSElement {
      * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
+    private _iconData;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private loadIcon;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1,11 +1,13 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { iconRegistry } from "../../icon-registry.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { icons } from "./icons.json.js";
+import iconsJson from "./icons.json.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,38 +18,135 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const iconList = Object.keys(icons);
-const iconClassMap = Object.fromEntries(
-  Object.entries(icons).map(([name, object]) => [name, object.class])
+const { icons } = iconsJson;
+const iconList = Object.keys(icons).filter(
+  (key) => key !== "logo-positive" && key !== "logo-negative"
 );
-const cvaIcon = cva(["block"], {
+function svgToDataUrl(svg) {
+  const encoded = encodeURIComponent(svg).replaceAll("'", "%27");
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+const cvaIcon = cva(["inline-flex size-full"], {
   variants: {
-    icon: iconClassMap,
     color: {
       black: ["text-ddt-color-common-background-overlay"],
       white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
+    },
+    mode: {
+      inline: [],
+      mask: [
+        "bg-current",
+        "[mask-size:100%_100%]",
+        "[-webkit-mask-size:100%_100%]",
+        "[mask-repeat:no-repeat]",
+        "[-webkit-mask-repeat:no-repeat]",
+        "[mask-image:var(--svg)]",
+        "[-webkit-mask-image:var(--svg)]"
+      ],
+      background: [
+        "bg-no-repeat",
+        "bg-[length:100%_100%]",
+        "bg-[image:var(--svg)]"
+      ],
+      static: []
+      // for static icons from icons.json
     }
   }
 });
 let DaikinIcon = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this.registry = iconRegistry;
     this.icon = null;
     this.color = "default";
     this.size = "current";
+    this._iconData = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadIcon().catch((error) => {
+    });
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("icon")) {
+      this.loadIcon().catch((error) => {
+      });
+    }
+  }
+  async loadIcon() {
+    if (!this.icon) {
+      this._iconData = null;
+      return;
+    }
+    const staticIcon = icons[this.icon];
+    if (staticIcon) {
+      this._iconData = {
+        mode: "static",
+        defaultColor: staticIcon.color,
+        class: staticIcon.class
+      };
+      return;
+    }
+    try {
+      const iconData = await this.registry.getIcon(this.icon);
+      if (false) ;
+      this._iconData = iconData;
+    } catch (error) {
+      this._iconData = null;
+    }
   }
   render() {
-    var _a;
-    const defaultColor = (_a = icons[this.icon ?? ""]) == null ? void 0 : _a.color;
+    if (!this.icon) {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })}
+        title="Unknown icon"
+      ></span>`;
+    }
+    if (!this._iconData) {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "inline"
+      })}
+        title=${this.icon || "Unknown icon"}
+      ></span>`;
+    }
+    const defaultColor = this._iconData.defaultColor;
+    if (this._iconData.mode === "static") {
+      return html`<span
+        class="${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })} ${this._iconData.class}"
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+      ></span>`;
+    }
+    const mode = this._iconData.mode ?? "mask";
+    if (mode === "inline") {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode
+      })}
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+        >${unsafeHTML(this._iconData.svg)}</span
+      >`;
+    }
+    const svgDataUrl = svgToDataUrl(this._iconData.svg);
     return html`<span
       class=${cvaIcon({
-      icon: this.icon,
-      color: this.color
+      color: this.color,
+      mode
     })}
-      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      style=${`--default-color:${defaultColor ?? "#000000"};--svg:${svgDataUrl}`}
       role="presentation"
     ></span>`;
   }
@@ -56,7 +155,7 @@ DaikinIcon.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
       width: var(--ddc-icon-size, 100%);
       height: var(--ddc-icon-size, 100%);
     }
@@ -77,6 +176,9 @@ DaikinIcon.styles = css`
       --ddc-icon-size: 24px;
     }
   `;
+__decorateClass([
+  property({ attribute: false })
+], DaikinIcon.prototype, "registry", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "icon", 2);
@@ -86,6 +188,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "size", 2);
+__decorateClass([
+  state()
+], DaikinIcon.prototype, "_iconData", 2);
 DaikinIcon = __decorateClass([
   ddsElement("daikin-icon")
 ], DaikinIcon);