@daikin-oss/design-system-web-components 1.4.0-next.0 → 1.4.0

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

@@ -8,6 +8,7 @@ const ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -274,28 +275,28 @@ exports.DaikinTable.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "headers", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "rows", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTable.prototype, "selectable", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTable.prototype, "sortable", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "selection", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTable.prototype, "sort", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTable.prototype, "order", 2);
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinTable.prototype, "sortFunction", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -2,9 +2,9 @@
 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 ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -29,7 +29,7 @@ const cvaCell = classVarianceAuthority.cva(
     "px-4",
     "py-3",
     "text-ddt-color-common-text-primary",
-    "break-all"
+    "natural-break"
   ],
   {
     variants: {
@@ -42,10 +42,6 @@ const cvaCell = classVarianceAuthority.cva(
   }
 );
 exports.DaikinTableCell = class DaikinTableCell extends ddsElement.DDSElement {
-  constructor() {
-    super(...arguments);
-    this.alignment = "left";
-  }
   render() {
     return lit.html`<span class=${cvaCell({ alignment: this.alignment })}>
       <slot></slot>
@@ -66,7 +62,16 @@ exports.DaikinTableCell.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "left",
+    isAllowedValue: ddsProperty.oneOf([
+      "left",
+      "right",
+      "center"
+    ])
+  })
 ], exports.DaikinTableCell.prototype, "alignment", 2);
 exports.DaikinTableCell = __decorateClass([
   decorators.ddsElement("daikin-table-cell")

package/dist/cjs/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?: "center" | "right" | "left" | null | undefined;
+    alignment?: "left" | "right" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 /**
@@ -31,8 +31,10 @@ type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 export declare class DaikinTableCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the direction of cell alignment.
-     * This is not normally something that users need to specify.
+     * Alignment of cell contents.
+     * Controlled by `daikin-table` component.
+     *
+     * @default "left"
      */
     alignment: TableCellVariantProps["alignment"];
     render(): import('lit-html').TemplateResult<1>;

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

@@ -2,9 +2,9 @@
 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 ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -77,7 +77,6 @@ const cvaHeaderCell = classVarianceAuthority.cva(
 exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.alignment = "left";
     this.sortable = false;
     this.order = null;
   }
@@ -108,13 +107,22 @@ exports.DaikinTableHeaderCell.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "left",
+    isAllowedValue: ddsProperty.oneOf([
+      "left",
+      "right",
+      "center"
+    ])
+  })
 ], exports.DaikinTableHeaderCell.prototype, "alignment", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "sortable", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "order", 2);
 exports.DaikinTableHeaderCell = __decorateClass([
   decorators.ddsElement("daikin-table-header-cell")

package/dist/cjs/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?: "center" | "right" | "left" | null | undefined;
+    alignment?: "left" | "right" | "center" | null | undefined;
     sortable?: boolean | null | undefined;
     order?: "desc" | "asc" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -37,18 +37,22 @@ export declare class DaikinTableHeaderCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Alignment of cell contents.
+     * Controlled by `daikin-table` component.
+     *
+     * @default "left"
      */
     alignment: TableHeaderCellVariantProps["alignment"];
     /**
      * Whether to display as a sortable column or not.
      * When set to `true`, it becomes clickable and the sort icon is displayed on the right.
      * It also makes the component emit the `change-sort` event when clicked.
+     * Controlled by `daikin-table` component.
      */
     sortable: boolean;
     /**
      * The current sort order of the column.
      * Can be "asc", "desc", or null if not sorted.
-     * Controlled by `daikin-table`.
+     * Controlled by `daikin-table` component.
      */
     order: TableHeaderCellVariantProps["order"] | null;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -4,10 +4,12 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const scroller = require("../../utils/scroller.cjs");
+require("../tab/daikin-tab.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -22,7 +24,6 @@ exports.DaikinTabs = class DaikinTabs extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
-    this.sizing = "stretch";
   }
   /**
    * Emits `beforechange` event if necessary and returns whether we should proceed.
@@ -210,10 +211,15 @@ exports.DaikinTabs.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], exports.DaikinTabs.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "stretch",
+    isAllowedValue: ddsProperty.oneOf(["stretch", "fit"])
+  })
 ], exports.DaikinTabs.prototype, "sizing", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-tab" })

package/dist/cjs/components/tabs/daikin-tabs.d.cts

@@ -47,6 +47,8 @@ export declare class DaikinTabs extends DDSElement {
     value: string;
     /**
      * Whether the tab width stretches or fits.
+     *
+     * @default "stretch"
      */
     sizing: "stretch" | "fit";
     /**

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -71,7 +72,6 @@ const cvaTextArea = classVarianceAuthority.cva(
 exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
     this.disabled = false;
     this.readonly = false;
     this.required = false;
@@ -95,10 +95,9 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElem
       error: !this.disabled && this.error,
       resize: this.resizable
     })}
-      placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-      name=${this.name}
-      autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined_js.ifDefined(this.autocomplete)}
+      name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+      placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+      autocomplete=${ifDefined_js.ifDefined(this.getBackingProperty("autocomplete"))}
       aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined_js.ifDefined(this._label)}
       .value=${this.value}
@@ -138,25 +137,29 @@ exports.DaikinTextArea.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinTextArea.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextArea.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextArea.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextArea.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextArea.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: ""
+  })
 ], exports.DaikinTextArea.prototype, "autocomplete", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextArea.prototype, "resizable", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -10,6 +10,13 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * - `daikin-text-area` (can be used solely)
  * - `daikin-input-group` > `daikin-text-area`
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @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 `<textarea>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
  *
@@ -29,7 +36,7 @@ export declare class DaikinTextArea extends DDSFormElement {
     /**
      * Placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Whether the text area is disabled.
      */
@@ -49,7 +56,7 @@ export declare class DaikinTextArea extends DDSFormElement {
     /**
      * Value of `autocomplete` attribute of the internal `<textarea>`.
      */
-    autocomplete?: HTMLInputElement["autocomplete"];
+    autocomplete: HTMLInputElement["autocomplete"] | "";
     /**
      * Whether to allow resizing of the text area.
      */

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -128,8 +129,6 @@ const cvaShowPasswordIcon = classVarianceAuthority.cva(["icon-size-6"], {
 exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.type = "text";
-    this.placeholder = null;
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -339,29 +338,23 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
         role=${ifDefined_js.ifDefined(role)}
         type=${type}
         inputmode=${ifDefined_js.ifDefined(inputMode)}
-        placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        minlength=${ifDefined_js.ifDefined(this.minlength ?? void 0)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength ?? void 0)}
+        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+        placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+        minlength=${ifDefined_js.ifDefined(this.minlength)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
         step=${ifDefined_js.ifDefined(
       this.type === "number" && this.step != null ? (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.step
       ) : void 0
     )}
-        pattern=${ifDefined_js.ifDefined(this.pattern ?? void 0)}
+        pattern=${ifDefined_js.ifDefined(this.pattern)}
         autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined_js.ifDefined(this.autocomplete)}
-        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-        aria-valuemin=${ifDefined_js.ifDefined(
-      this.type === "number" && this.min != null ? this.min : void 0
-    )}
-        aria-valuemax=${ifDefined_js.ifDefined(
-      this.type === "number" && this.max != null ? this.max : void 0
-    )}
-        aria-valuenow=${ifDefined_js.ifDefined(
-      this.type === "number" ? this.value : void 0
-    )}
+        aria-label=${ifDefined_js.ifDefined(this._label)}
+        aria-valuemin=${this.type === "number" && this.min != null ? this.min : lit.nothing}
+        aria-valuemax=${this.type === "number" && this.max != null ? this.max : lit.nothing}
+        aria-valuenow=${this.type === "number" ? this.value : lit.nothing}
         .value=${this.value}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -409,46 +402,50 @@ exports.DaikinTextField.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "text" })
 ], exports.DaikinTextField.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinTextField.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextField.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextField.prototype, "minlength", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextField.prototype, "maxlength", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "step", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "pattern", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: ""
+  })
 ], exports.DaikinTextField.prototype, "autocomplete", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-password" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-password" })
 ], exports.DaikinTextField.prototype, "showPassword", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -10,6 +10,13 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * - `daikin-text-field` (can be used solely)
  * - `daikin-input-group` > `daikin-text-field`
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @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.
@@ -50,12 +57,14 @@ export declare class DaikinTextField extends DDSFormElement {
      * - `"email"`: Email input with optional left and right icon slots.
      * - `"tel"`: Telephone input with optional left and right icon slots.
      * - `"search"`: Search input with built-in search icon and clear button when value is present.
+     *
+     * @default "text"
      */
     type: "text" | "number" | "password" | "email" | "tel" | "search";
     /**
      * Placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Whether the text field is readonly.
      */
@@ -103,7 +112,7 @@ export declare class DaikinTextField extends DDSFormElement {
     /**
      * Value of `autocomplete` attribute of the internal `<input>`.
      */
-    autocomplete?: HTMLInputElement["autocomplete"];
+    autocomplete: HTMLInputElement["autocomplete"];
     /**
      * When `type="password"`, whether to display the password with a black dot or as text.
      */

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

@@ -8,6 +8,7 @@ const ifDefined_js = require("lit/directives/if-defined.js");
 const ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -92,7 +93,6 @@ const cvaIcon = classVarianceAuthority.cva(
 exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -207,14 +207,13 @@ exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormEleme
       rightIcon
     })}
         type="text"
-        placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        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=${ifDefined_js.ifDefined(this._label ?? void 0)}
+        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+        placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+        minlength=${ifDefined_js.ifDefined(this.minlength)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+        pattern=${ifDefined_js.ifDefined(this.pattern)}
+        autocomplete=${ifDefined_js.ifDefined(this.getBackingProperty("autocomplete"))}
+        aria-label=${ifDefined_js.ifDefined(this._label)}
         .value=${this.value}
         ?data-empty=${!this._unmaskedValue}
         ?disabled=${this.disabled}
@@ -266,34 +265,38 @@ exports.DaikinTextMaskedField.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinTextMaskedField.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "minlength", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "maxlength", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextMaskedField.prototype, "pattern", 2);
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinTextMaskedField.prototype, "mask", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: ""
+  })
 ], exports.DaikinTextMaskedField.prototype, "autocomplete", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -12,6 +12,13 @@ export type { FactoryOpts, InputMask };
  * - `daikin-text-masked-field` (can be used solely)
  * - `daikin-input-group` > `daikin-text-masked-field`
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @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).
  *
@@ -40,7 +47,7 @@ export declare class DaikinTextMaskedField extends DDSFormElement {
     /**
      * Placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * Whether the text masked field is readonly.
      */
@@ -97,7 +104,7 @@ export declare class DaikinTextMaskedField extends DDSFormElement {
     /**
      * Value of `autocomplete` attribute of the internal `<input>`.
      */
-    autocomplete?: HTMLInputElement["autocomplete"];
+    autocomplete: HTMLInputElement["autocomplete"];
     private _unmaskedValue;
     /**
      * The label text used as the value of aria-label.