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

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

@@ -4,6 +4,7 @@ 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 ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
@@ -35,10 +36,14 @@ const cvaRow = classVarianceAuthority.cva(
   {
     variants: {
       selected: {
-        false: ["hover:bg-ddt-color-common-surface-hover"],
+        false: [
+          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-hover",
+          "data-[hover]:bg-ddt-color-common-surface-hover"
+        ],
         true: [
           "bg-ddt-color-common-surface-selected-default",
-          "hover:bg-ddt-color-common-surface-selected-hover"
+          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-selected-hover",
+          "data-[hover]:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
@@ -57,6 +62,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     this.sortFunction = null;
     this._bulkRowsCheckState = "unchecked";
     this._currentView = [];
+    this._currentTouchHoverRowId = null;
+    this._tableRef = ref_js.createRef();
   }
   _updateCurrentView() {
     var _a;
@@ -104,6 +111,23 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     }
     this.dispatchEvent(new Event("change-sort"));
   }
+  _handleTouchMove(event) {
+    var _a;
+    const touch = event.touches[0];
+    const row = touch && ((_a = (this.shadowRoot ?? document).elementsFromPoint(touch.clientX, touch.clientY).find(
+      (element) => {
+        var _a2;
+        return ((_a2 = this._tableRef.value) == null ? void 0 : _a2.contains(element)) && element.closest("tr");
+      }
+    )) == null ? void 0 : _a.closest("tr"));
+    this._currentTouchHoverRowId = (row == null ? void 0 : row.dataset.id) ?? null;
+  }
+  _handleTouchStart(event) {
+    this._handleTouchMove(event);
+  }
+  _handleTouchEnd() {
+    this._currentTouchHoverRowId = null;
+  }
   _updateHeaderCheckboxState() {
     const rowIdSet = new Set(this.rows.map(({ id }) => id));
     this.selection = this.selection.filter((id) => rowIdSet.has(id));
@@ -145,7 +169,11 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
           </td>`
     );
     return lit.html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
-      <table class="w-full">
+      <table
+        ${ref_js.ref(this._tableRef)}
+        class="w-full group"
+        ?data-hover=${this._currentTouchHoverRowId != null}
+      >
         <thead>
           <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? lit.html`<td class="w-12 p-0">
@@ -164,7 +192,11 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
             ${createHeaderRow()}
           </tr>
         </thead>
-        <tbody>
+        <tbody
+          @touchstart=${this._handleTouchStart}
+          @touchmove=${this._handleTouchMove}
+          @touchend=${this._handleTouchEnd}
+        >
           ${repeat_js.repeat(
       this._currentView,
       ({ id }) => id,
@@ -172,6 +204,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
                 class=${cvaRow({
         selected: this.selectable && !!this.selection.find((id) => id === row.id)
       })}
+                data-id=${row.id}
+                ?data-hover=${this._currentTouchHoverRowId === row.id}
               >
                 ${this.selectable ? lit.html`<td class="w-12 p-0">
                       <span
@@ -226,6 +260,7 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
+      overflow: scroll;
     }
   `;
 __decorateClass([
@@ -258,6 +293,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinTable.prototype, "_currentView", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTable.prototype, "_currentTouchHoverRowId", 2);
 exports.DaikinTable = __decorateClass([
   decorators.ddsElement("daikin-table")
 ], exports.DaikinTable);

package/dist/cjs-dev/components/table/daikin-table.d.cts

@@ -119,11 +119,16 @@ export declare class DaikinTable<T extends {
      * Currently this is a sorted `rows`, but pagination may be considered in the future.
      */
     private _currentView;
+    private _currentTouchHoverRowId;
+    private _tableRef;
     private _updateCurrentView;
     private _emitChangeCheckEvent;
     private _handleHeaderCheckboxChange;
     private _handleBodyCheckboxChange;
     private _handleClickSort;
+    private _handleTouchMove;
+    private _handleTouchStart;
+    private _handleTouchEnd;
     private _updateHeaderCheckboxState;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;

package/dist/cjs-dev/components/table-cell/daikin-table-cell.cjs

@@ -27,7 +27,8 @@ const cvaCell = classVarianceAuthority.cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-ddt-color-common-text-primary"
+    "text-ddt-color-common-text-primary",
+    "break-all"
   ],
   {
     variants: {

package/dist/cjs-dev/components/table-cell/daikin-table-cell.d.cts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaCell: (props?: ({
-    alignment?: "right" | "left" | "center" | null | undefined;
+    alignment?: "center" | "right" | "left" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 /**

package/dist/cjs-dev/components/table-header-cell/daikin-table-header-cell.d.cts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaHeaderCell: (props?: ({
-    alignment?: "right" | "left" | "center" | null | undefined;
+    alignment?: "center" | "right" | "left" | null | undefined;
     sortable?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;

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

@@ -6,7 +6,7 @@ const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
-const scroller = require("./scroller.cjs");
+const scroller = require("../../utils/scroller.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -94,7 +94,7 @@ exports.DaikinTabs = class DaikinTabs extends ddsElement.DDSElement {
       }
       return;
     }
-    scroller.scrollIntoViewOnlyParent(selectedTab);
+    scroller.scrollIntoViewOnlyParent(selectedTab, "horizontal", false);
   }
   _updateTabStyle() {
     const tabs = this._tabs;

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

@@ -4,9 +4,10 @@ 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 ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -67,12 +68,9 @@ const cvaTextArea = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinTextArea = class DaikinTextArea extends ddsElement.DDSElement {
+exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = "";
-    this.name = "";
     this.placeholder = null;
     this.disabled = false;
     this.readonly = false;
@@ -85,7 +83,7 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsElement.DDSElement {
     return this.value.length;
   }
   _updateValue(value) {
-    this._internals.setFormValue(value);
+    this.setFormValue(value);
   }
   _handleInput(e) {
     this.value = e.target.value;
@@ -139,13 +137,6 @@ exports.DaikinTextArea.styles = lit.css`
       position: relative;
     }
   `;
-exports.DaikinTextArea.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinTextArea.prototype, "value", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTextArea.prototype, "name", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTextArea.prototype, "placeholder", 2);

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * The text area component is designed for multiline text input, similar to the HTML `<textarea>` tag.
@@ -24,18 +24,8 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * <daikin-text-area name="name"></daikin-text-area>
  * ```
  */
-export declare class DaikinTextArea extends DDSElement {
+export declare class DaikinTextArea extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    /**
-     * 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.
      */

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

@@ -4,10 +4,12 @@ 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 ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+require("../icon-button/daikin-icon-button.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -26,7 +28,6 @@ const cvaInput = classVarianceAuthority.cva(
     "h-full",
     "bg-ddt-color-common-background-default",
     "relative",
-    "px-2",
     "rounded",
     "overflow-hidden",
     "font-daikinSerif",
@@ -40,12 +41,12 @@ const cvaInput = classVarianceAuthority.cva(
     "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-ddt-color-common-text-primary",
     "enabled:hover:bg-ddt-color-common-surface-hover",
     "enabled:active:bg-ddt-color-common-surface-press",
     "focus-visible:outline-2",
-    // 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.
     "disabled:var-color-ddt-color-common-disabled/color-base",
     "disabled:text-ddt-color-common-disabled",
     "disabled:bg-ddt-color-common-background-default",
@@ -69,6 +70,13 @@ const cvaInput = classVarianceAuthority.cva(
       rightIcon: {
         false: ["pr-4"],
         true: ["pr-11"]
+      },
+      type: {
+        text: [],
+        password: [],
+        email: [],
+        tel: [],
+        search: ["[&::-webkit-search-cancel-button]:appearance-none"]
       }
     }
   }
@@ -78,8 +86,8 @@ const cvaIcon = classVarianceAuthority.cva(
   {
     variants: {
       icon: {
-        left: "left-3",
-        right: "right-3"
+        left: ["left-3"],
+        right: ["right-3"]
       },
       disabled: {
         false: ["text-ddt-color-common-text-primary"],
@@ -88,21 +96,33 @@ const cvaIcon = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinTextField = class DaikinTextField extends ddsElement.DDSElement {
+const cvaShowPasswordIcon = classVarianceAuthority.cva(["icon-size-6"], {
+  variants: {
+    showPassword: {
+      false: ["i-daikin-password-hidden"],
+      true: ["i-daikin-password-visible"]
+    }
+  }
+});
+exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormElement {
   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.minlength = null;
+    this.maxlength = null;
+    this.pattern = null;
+    this.showPassword = false;
     this._label = null;
-    this._hasLeftIcon = false;
-    this._hasRightIcon = false;
+    this._hasLeftSlot = false;
+    this._hasRightSlot = false;
+  }
+  _handleChange(event) {
+    this.dispatchEvent(new Event("change", event));
   }
   _handleSlotChange(event) {
     const target = event.target;
@@ -110,60 +130,127 @@ exports.DaikinTextField = class DaikinTextField extends ddsElement.DDSElement {
     const hasIcon = !!target.assignedNodes().length;
     switch (name) {
       case "left-icon":
-        this._hasLeftIcon = hasIcon;
+        this._hasLeftSlot = hasIcon;
         break;
       case "right-icon":
-        this._hasRightIcon = hasIcon;
+        this._hasRightSlot = hasIcon;
         break;
     }
   }
-  _handleInput(e) {
-    this.value = e.target.value;
-    this._internals.setFormValue(this.value);
+  _handleInput(event) {
+    this.value = event.target.value;
+    this.setFormValue(this.value);
+  }
+  _handleClearClick() {
+    this.value = "";
+  }
+  _createIcon() {
+    switch (this.type) {
+      case "password":
+        return lit.html`<daikin-icon-button
+          color="neutral"
+          variant="ghost"
+          ?disabled=${this.disabled}
+          button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
+          class="absolute right-3"
+          @click=${this._handleShowPasswordClick}
+        >
+          <span
+            class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
+          ></span>
+        </daikin-icon-button>`;
+      case "search":
+        return lit.html`<span
+            class=${cvaIcon({
+          icon: "left",
+          disabled: this.disabled
+        })}
+          >
+            <span class="i-daikin-search size-6"></span>
+          </span>
+          ${!!this.value && !!this.value.length ? lit.html`<daikin-icon-button
+                color="neutral"
+                variant="ghost"
+                ?disabled=${this.disabled}
+                button-aria-label="Clear"
+                class="absolute right-3 size-6"
+                @click=${this._handleClearClick}
+              >
+                <span class="i-daikin-close"></span>
+              </daikin-icon-button>` : lit.nothing}`;
+      default:
+        return lit.html`<span
+            class=${cvaIcon({
+          icon: "left",
+          disabled: this.disabled
+        })}
+          >
+            <slot
+              name="left-icon"
+              class="icon-size-6"
+              @slotchange=${this._handleSlotChange}
+            ></slot>
+          </span>
+          <span
+            class=${cvaIcon({
+          icon: "right",
+          disabled: this.disabled
+        })}
+          >
+            <slot
+              name="right-icon"
+              class="icon-size-6"
+              @slotchange=${this._handleSlotChange}
+            ></slot>
+          </span>`;
+    }
+  }
+  _handleShowPasswordClick() {
+    this.showPassword = !this.showPassword;
+    this.dispatchEvent(new Event("toggle"));
   }
   render() {
-    const isError = !this.disabled && this.error;
+    const error = !this.disabled && this.error;
+    const hasLeftSlot = this._hasLeftSlot;
+    const hasRightSlot = this._hasRightSlot;
+    const [leftIcon, rightIcon] = {
+      password: [false, true],
+      search: [true, !!this.value.length],
+      email: [hasLeftSlot, hasRightSlot],
+      tel: [hasLeftSlot, hasRightSlot],
+      text: [hasLeftSlot, hasRightSlot]
+    }[this.type];
+    const type = this.type === "password" && this.showPassword ? "text" : this.type;
     return lit.html`<input
         class=${cvaInput({
-      error: isError,
-      leftIcon: this._hasLeftIcon,
-      rightIcon: this._hasRightIcon
+      error,
+      leftIcon,
+      rightIcon,
+      type: this.type
     })}
-        type=${this.type}
+        type=${type}
         placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
         name=${ifDefined_js.ifDefined(this.name)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+        minlength=${ifDefined_js.ifDefined(this.minlength ?? void 0)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength ?? void 0)}
+        pattern=${ifDefined_js.ifDefined(this.pattern ?? void 0)}
         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)}
+        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
         .value=${this.value}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         ?required=${this.required}
-        @change=${(e) => this.dispatchEvent(new Event("change", e))}
+        @change=${this._handleChange}
         @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>`;
+      ${this._createIcon()}`;
   }
   updated(changedProperties) {
     if (!changedProperties.has("value")) {
       return;
     }
-    this._internals.setFormValue(this.value);
+    this.setFormValue(this.value);
   }
   /**
    * This method is used by `daikin-input-group` to reflect it's attributes to this component.
@@ -186,17 +273,18 @@ exports.DaikinTextField.styles = lit.css`
       height: 3rem;
       position: relative;
     }
+
+    input::-ms-reveal {
+      display: none !important;
+    }
+
+    input::-ms-clear {
+      display: none !important;
+    }
   `;
-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);
@@ -213,20 +301,29 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Number })
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinTextField.prototype, "minlength", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
 ], exports.DaikinTextField.prototype, "maxlength", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTextField.prototype, "pattern", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "autocomplete", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-password" })
+], exports.DaikinTextField.prototype, "showPassword", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinTextField.prototype, "_label", 2);
 __decorateClass([
   decorators_js.state()
-], exports.DaikinTextField.prototype, "_hasLeftIcon", 2);
+], exports.DaikinTextField.prototype, "_hasLeftSlot", 2);
 __decorateClass([
   decorators_js.state()
-], exports.DaikinTextField.prototype, "_hasRightIcon", 2);
+], exports.DaikinTextField.prototype, "_hasRightSlot", 2);
 exports.DaikinTextField = __decorateClass([
   decorators.ddsElement("daikin-text-field")
 ], exports.DaikinTextField);

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

@@ -1,5 +1,5 @@
-import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { PropertyValues, TemplateResult } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * The text field component is a UI element that allows users to input single-line text data.
@@ -12,9 +12,13 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  *
  * @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).
+ * @fires toggle - Emitted when the user toggles the password mask.
  *
  * @slot left-icon - Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.
+ * Ignored if the type is "search" since the default icon is used.
+ *
  * @slot right-icon - Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.
+ * Ignored if the type is "search" since the default icon is used.
  *
  * @example
  *
@@ -27,22 +31,12 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * <daikin-text-field name="name"></daikin-text-field>
  * ```
  */
-export declare class DaikinTextField extends DDSElement {
+export declare class DaikinTextField extends DDSFormElement {
     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;
+    type: "text" | "password" | "email" | "tel" | "search";
     /**
      * Placeholder text.
      */
@@ -67,24 +61,40 @@ export declare class DaikinTextField extends DDSElement {
      * Controlled by `daikin-input-group` when used within `daikin-input-group`.
      */
     error: boolean;
+    /**
+     * Minimum length of value.
+     */
+    minlength: number | null;
     /**
      * Maximum length of value.
      */
-    maxlength?: number;
+    maxlength: number | null;
+    /**
+     * The pattern of value.
+     */
+    pattern: string | null;
     /**
      * Value of `autocomplete` attribute of the internal `<input>`.
      */
     autocomplete?: HTMLInputElement["autocomplete"];
+    /**
+     * When `type="password"`, whether to display the password with a black dot or as text.
+     */
+    showPassword: boolean;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
-    private _hasLeftIcon;
-    private _hasRightIcon;
+    private _hasLeftSlot;
+    private _hasRightSlot;
+    private _handleChange;
     private _handleSlotChange;
     private _handleInput;
-    render(): import('lit-html').TemplateResult<1>;
+    private _handleClearClick;
+    private _createIcon;
+    private _handleShowPasswordClick;
+    render(): TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.