@daikin-oss/design-system-web-components 0.4.0 → 0.6.0

package/dist/cjs-dev/components/text-field/daikin-text-field.cjs

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaInput = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "h-full",
+    "relative",
+    "px-2",
+    "rounded",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "outline",
+    "outline-[--color-border]",
+    "outline-0",
+    "-outline-offset-2",
+    "placeholder:text-system-element-text-secondary",
+    // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
+    // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
+    "define-[--color-state-focus,--color-base]/color-border",
+    "border",
+    "border-[--color-border]",
+    // Update `--color-base` depending on the state.
+    // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
+    "enabled:text-system-element-text-primary",
+    "enabled:hover:bg-system-background-surface-hover",
+    "enabled:active:bg-system-background-surface-press",
+    "focus-visible:outline-2",
+    "disabled:var-color-system-state-disabled/color-base",
+    "disabled:text-system-state-disabled",
+    "disabled:bg-white",
+    "disabled:placeholder:text-system-state-disabled"
+  ],
+  {
+    variants: {
+      error: {
+        false: [
+          "enabled:var-color-system-state-neutral-active/color-base",
+          "focus-visible:var-color-system-state-focus/color-state-focus"
+        ],
+        true: ["enabled:var-color-system-state-error-active/color-base"]
+      },
+      leftIcon: {
+        false: ["pl-4"],
+        true: ["pl-11"]
+      },
+      rightIcon: {
+        false: ["pr-4"],
+        true: ["pr-11"]
+      }
+    }
+  }
+);
+const cvaIcon = classVarianceAuthority.cva(
+  ["flex", "items-center", "absolute", "pointer-events-none"],
+  {
+    variants: {
+      icon: {
+        left: "left-3",
+        right: "right-3"
+      },
+      disabled: {
+        false: ["text-system-element-text-primary"],
+        true: ["text-system-state-disabled"]
+      }
+    }
+  }
+);
+exports.DaikinTextField = class DaikinTextField extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.type = "text";
+    this.value = "";
+    this.name = "";
+    this.placeholder = null;
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this._label = null;
+    this._hasLeftIcon = false;
+    this._hasRightIcon = false;
+  }
+  _handleSlotChange(event) {
+    const target = event.target;
+    const name = target.name;
+    const hasIcon = !!target.assignedNodes().length;
+    switch (name) {
+      case "left-icon":
+        this._hasLeftIcon = hasIcon;
+        break;
+      case "right-icon":
+        this._hasRightIcon = hasIcon;
+        break;
+    }
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._internals.setFormValue(this.value);
+  }
+  render() {
+    const isError = !this.disabled && this.error;
+    return lit.html`<input
+        class=${cvaInput({
+      error: isError,
+      leftIcon: this._hasLeftIcon,
+      rightIcon: this._hasRightIcon
+    })}
+        type=${this.type}
+        placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
+        name=${ifDefined_js.ifDefined(this.name)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+        autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.autocomplete)}
+        aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this._label)}
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @change=${(e) => this.dispatchEvent(new Event("change", e))}
+        @input=${this._handleInput}
+      />
+      <div class=${cvaIcon({ icon: "left", disabled: this.disabled })}>
+        <slot
+          name="left-icon"
+          class="icon-size-6"
+          @slotchange=${this._handleSlotChange}
+        ></slot>
+      </div>
+      <div class=${cvaIcon({ icon: "right", disabled: this.disabled })}>
+        <slot
+          name="right-icon"
+          class="icon-size-6"
+          @slotchange=${this._handleSlotChange}
+        ></slot>
+      </div>`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._internals.setFormValue(this.value);
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+  }
+};
+exports.DaikinTextField.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: 3rem;
+      position: relative;
+    }
+  `;
+exports.DaikinTextField.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextField.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextField.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTextField.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextField.prototype, "placeholder", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextField.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextField.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextField.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextField.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinTextField.prototype, "maxlength", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextField.prototype, "autocomplete", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTextField.prototype, "_label", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTextField.prototype, "_hasLeftIcon", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTextField.prototype, "_hasRightIcon", 2);
+exports.DaikinTextField = __decorateClass([
+  decorators_js.customElement("daikin-text-field")
+], exports.DaikinTextField);

package/dist/cjs-dev/components/text-field/daikin-text-field.d.cts

@@ -0,0 +1,94 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from "../input-group/index.cjs";
+/**
+ * The text field component is a UI element that allows users to input single-line text data.
+ * It functions similarly to the HTML `<input type="text">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.
+ * Can be used within `daikin-input-group` component.
+ *
+ * Hierarchies:
+ * - `daikin-text-field` (can be used solely)
+ * - `daikin-input-group` > `daikin-text-field`
+ *
+ * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+ *
+ * @slot left-icon - Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.
+ * @slot right-icon - Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-input-group` component for complete example. -->
+ * <daikin-text-field name="name"></daikin-text-field>
+ * ```
+ */
+export declare class DaikinTextField extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Type of field.
+     */
+    type: "text" | "email" | "tel" | "search";
+    /**
+     * The current value of the input, submitted as a name/value pair with form data.
+     */
+    value: string;
+    /**
+     * The name of the input, submitted as a name/value pair with form data.
+     */
+    name: string;
+    /**
+     * Placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text field is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether or not to display error states.
+     * Ignored if the `disabled` is `true`.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    error: boolean;
+    /**
+     * Maximum length of value.
+     */
+    maxlength?: number;
+    /**
+     * Value of `autocomplete` attribute of the internal `<input>`.
+     */
+    autocomplete?: HTMLInputElement["autocomplete"];
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _hasLeftIcon;
+    private _hasRightIcon;
+    private _handleSlotChange;
+    private _handleInput;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-text-field": DaikinTextField;
+    }
+}

package/dist/cjs-dev/components/text-field/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTextField = require("./daikin-text-field.cjs");
+Object.defineProperty(exports, "DaikinTextField", {
+  enumerable: true,
+  get: () => daikinTextField.DaikinTextField
+});

package/dist/cjs-dev/components/text-field/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-text-field.cjs";

package/dist/cjs-dev/components/toggle/daikin-toggle.cjs

@@ -18,22 +18,22 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "w-12",
   "h-6",
   "relative",
-  "bg-daikinNeutral-600",
+  "bg-system-state-neutral-active",
   "rounded-full",
   "cursor-pointer",
   "transition-colors",
   "duration-300",
   "appearance-none",
-  "enabled:hover:bg-daikinNeutral-400",
-  "enabled:active:bg-daikinNeutral-700",
+  "enabled:hover:bg-system-state-neutral-hover",
+  "enabled:active:bg-system-state-neutral-press",
   "focus-visible:outline",
-  "focus-visible:outline-1",
-  "focus-visible:outline-offset-1",
-  "focus-visible:outline-daikinBlue-700",
-  "enabled:checked:bg-daikinBlue-500",
-  "enabled:checked:hover:bg-daikinBlue-300",
-  "enabled:checked:active:bg-daikinBlue-600",
-  "disabled:bg-daikinNeutral-200",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-2",
+  "focus-visible:outline-system-state-focus",
+  "enabled:checked:bg-system-state-primary-active",
+  "enabled:checked:hover:bg-system-state-primary-hover",
+  "enabled:checked:active:bg-system-state-primary-press",
+  "disabled:bg-system-state-disabled",
   "disabled:cursor-default",
   "before:size-4",
   "before:m-auto",
@@ -45,8 +45,8 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "before:transition",
   "before:duration-300",
   "before:checked:translate-x-6",
-  "enabled:before:bg-white",
-  "disabled:before:bg-daikinNeutral-100"
+  "enabled:before:bg-system-background-base",
+  "disabled:before:bg-system-background-surface-hover"
 ])();
 exports.DaikinToggle = class DaikinToggle extends lit.LitElement {
   constructor() {
@@ -70,7 +70,7 @@ exports.DaikinToggle = class DaikinToggle extends lit.LitElement {
       class=${TOGGLE_CLASS_NAME}
       type="checkbox"
       name=${this.name}
-      value=${this.value}
+      .value=${this.value}
       role="switch"
       .checked=${this.checked}
       ?disabled=${this.disabled}

package/dist/cjs-dev/components/toggle/{daikin-toggle.d.ts → daikin-toggle.d.cts}

@@ -20,11 +20,11 @@ import { LitElement, PropertyValues } from 'lit';
 export declare class DaikinToggle extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the toggle switch.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the toggle switch.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -32,7 +32,7 @@ export declare class DaikinToggle extends LitElement {
      */
     checked: boolean;
     /**
-     * Whether the toggle switch is disabled.
+     * Specify the toggle switch disabled state.
      */
     disabled: boolean;
     static readonly formAssociated = true;

package/dist/cjs-dev/components/toggle/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-toggle.cjs";

package/dist/cjs-dev/components/tooltip/daikin-tooltip.cjs

@@ -4,9 +4,11 @@ const dom = require("@floating-ui/dom");
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
-const ref_js = require("lit/directives/ref.js");
+const guard_js = require("lit/directives/guard.js");
+const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const isClient = require("../../is-client.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+const reDispatch = require("../../utils/re-dispatch.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,15 +21,17 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaTooltip = classVarianceAuthority.cva(
   [
+    "floating-unready:hidden",
     "absolute",
-    "p-3",
+    "left-[--floating-x,0]",
+    "top-[--floating-y,0]",
     "justify-center",
     "items-center",
-    "rounded",
     "w-max",
-    "top-0",
-    "left-0",
-    "max-w-[312px]",
+    "p-3",
+    "border",
+    "border-solid",
+    "rounded",
     "text-sm",
     "font-daikinSerif",
     "font-normal",
@@ -37,18 +41,8 @@ const cvaTooltip = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        light: [
-          "border",
-          "border-solid",
-          "border-daikinNeutral-800",
-          "bg-white/90",
-          "text-black"
-        ],
-        dark: ["bg-daikinNeutral-800/90", "text-white"]
-      },
-      open: {
-        true: ["visible", "opacity-100"],
-        false: ["invisible", "opacity-0"]
+        light: ["border-daikinNeutral-800", "bg-white/90", "text-black"],
+        dark: ["border-transparent", "bg-daikinNeutral-800/90", "text-white"]
       }
     }
   }
@@ -61,11 +55,9 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
     this.variant = "light";
     this.open = false;
     this.description = "";
-    this.closeOnClick = false;
+    this.popoverValue = "auto";
     this.trigger = "hover";
-    this._tooltipRef = ref_js.createRef();
-    this._triggerRef = ref_js.createRef();
-    this._autoUpdateCleanup = null;
+    this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
   }
   static registerCSSCustomProperties() {
@@ -79,116 +71,88 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
       initialValue: "0px"
     });
   }
-  _startAutoUpdate() {
-    var _a;
-    if (!isClient.isClient) {
-      return;
-    }
-    const reference = this._triggerRef.value;
-    const float = this._tooltipRef.value;
-    if (!reference || !float) {
-      return;
-    }
-    (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
-    this._autoUpdateCleanup = dom.autoUpdate(reference, float, () => {
-      var _a2;
-      const spacing = parseInt(
-        ((_a2 = this._hostStyles) == null ? void 0 : _a2.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
-        10
-      );
-      dom.computePosition(reference, float, {
-        placement: this.placement,
-        middleware: [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
-      }).then(({ x, y }) => {
-        Object.assign(float.style, {
-          left: `${x}px`,
-          top: `${y}px`
-        });
-      }).catch((e) => console.error(e));
-    });
-  }
-  _uninstallAutoUpdate() {
-    var _a;
-    this.open = false;
-    (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
-    this._autoUpdateCleanup = null;
-  }
-  _changeOpenState(state) {
-    if (this.open === state) {
-      return;
-    }
-    if (!this.dispatchEvent(
-      new CustomEvent("beforetoggle", {
-        detail: { open: this.open },
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      })
-    )) {
-      return;
+  _handleClick(event) {
+    if (this.trigger === "click") {
+      event.preventDefault();
+      this.open = !this.open;
     }
-    this.open = state;
   }
-  _handleClick() {
-    if (this.closeOnClick) {
-      this._changeOpenState(false);
+  _handleMouseEnter() {
+    if (this.trigger === "hover") {
+      this.open = true;
     }
   }
   _handleMouseLeave() {
     if (this.trigger === "hover") {
-      this._changeOpenState(false);
+      this.open = false;
     }
   }
-  _handleMouseEnter() {
-    if (this.trigger === "hover") {
-      this._changeOpenState(true);
+  _handleFocusIn() {
+    this.open = true;
+  }
+  _handleFocusOut() {
+    this.open = false;
+  }
+  _handleToggle(event) {
+    if (reDispatch.reDispatch(this, event, new ToggleEvent("toggle", event))) {
+      this.open = event.newState === "open";
     }
   }
   render() {
-    const tooltipClassName = cvaTooltip({
-      variant: this.variant,
-      open: this.open
-    });
+    var _a;
+    const spacing = parseInt(
+      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
+      10
+    );
     return lit.html`<div class="relative inline-block">
       <div
-        ${ref_js.ref(this._triggerRef)}
-        part="trigger"
-        @click=${this._handleClick}
-        @keydown=${this._handleClick}
-        @mouseleave=${this._handleMouseLeave}
-        @mouseenter=${this._handleMouseEnter}
+        id="trigger"
+        aria-labelledby="trigger"
+        aria-describedby="tooltip"
+        ${this._autoUpdateController.refReference()}
       >
-        <slot></slot>
+        <slot
+          @click=${this._handleClick}
+          @mouseenter=${this._handleMouseEnter}
+          @mouseleave=${this._handleMouseLeave}
+          @focusin=${this._handleFocusIn}
+          @focusout=${this._handleFocusOut}
+        ></slot>
       </div>
-      <span ${ref_js.ref(this._tooltipRef)} part="tooltip" class=${tooltipClassName}>
-        <slot name="tooltip">
+      <span
+        id="tooltip"
+        role="tooltip"
+        aria-labelledby="tooltip"
+        class=${cvaTooltip({ variant: this.variant })}
+        popover=${this.popoverValue}
+        @beforetoggle=${(event) => reDispatch.reDispatch(this, event, new ToggleEvent("beforetoggle", event))}
+        @toggle=${this._handleToggle}
+        ${this._autoUpdateController.refFloating()}
+      >
+        <slot name="description">
           <span class="whitespace-pre-line">${this.description}</span>
         </slot>
       </span>
+      ${// Activate auto update only when the tooltip is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard_js.guard(
+      [this.open, this.placement, spacing],
+      () => this._autoUpdateController.directive(
+        {
+          placement: this.placement,
+          middleware: [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
+        },
+        this.open
+      )
+    )}
     </div>`;
   }
   updated(changedProperties) {
     var _a;
     if (changedProperties.has("open")) {
-      if (this.open) {
-        this._startAutoUpdate();
-      } else {
-        (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
-        this._autoUpdateCleanup = null;
-      }
-      this.dispatchEvent(
-        new CustomEvent("toggle", {
-          detail: { open: this.open },
-          bubbles: true,
-          composed: true,
-          cancelable: false
-        })
-      );
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
     }
   }
-  disconnectedCallback() {
-    this._uninstallAutoUpdate();
-  }
 };
 exports.DaikinTooltip.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
@@ -200,22 +164,22 @@ exports.DaikinTooltip.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ reflect: true, type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTooltip.prototype, "placement", 2);
 __decorateClass([
-  decorators_js.property({ reflect: true, type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTooltip.prototype, "variant", 2);
 __decorateClass([
-  decorators_js.property({ reflect: true, type: Boolean })
+  decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTooltip.prototype, "open", 2);
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinTooltip.prototype, "description", 2);
 __decorateClass([
-  decorators_js.property({ reflect: true, type: Boolean })
-], exports.DaikinTooltip.prototype, "closeOnClick", 2);
+  decorators_js.property({ type: String, attribute: "popover-value" })
+], exports.DaikinTooltip.prototype, "popoverValue", 2);
 __decorateClass([
-  decorators_js.property({ reflect: true, type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTooltip.prototype, "trigger", 2);
 exports.DaikinTooltip = __decorateClass([
   decorators_js.customElement("daikin-tooltip")