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

package/dist/cjs/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"
         ]
       }
     }
@@ -52,11 +57,13 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     this.selectable = false;
     this.sortable = false;
     this.selection = [];
-    this.order = null;
     this.sort = null;
+    this.order = null;
     this.sortFunction = null;
     this._bulkRowsCheckState = "unchecked";
     this._currentView = [];
+    this._currentTouchHoverRowId = null;
+    this._tableRef = ref_js.createRef();
   }
   _updateCurrentView() {
     var _a;
@@ -104,34 +111,70 @@ 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));
     const selectionCount = this.selection.length;
     this._bulkRowsCheckState = this._currentView.length === selectionCount ? "checked" : selectionCount ? "indeterminate" : "unchecked";
   }
+  _reflectSlotProperties() {
+    var _a;
+    for (const { key } of this.headers) {
+      const headerCell = (_a = (this.shadowRoot ?? this).querySelector(
+        `slot[name="header:${CSS.escape(String(key))}"]`
+      )) == null ? void 0 : _a.assignedElements()[0];
+      if ((headerCell == null ? void 0 : headerCell.tagName) !== "DAIKIN-TABLE-HEADER-CELL") {
+        continue;
+      }
+      headerCell.order = this.sort === key ? this.order : null;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
   render() {
     const createHeaderRow = () => repeat_js.repeat(
       this.headers,
       ({ key }) => key,
-      ({ key, label, alignment, sortable }) => lit.html`<th
+      ({ key, label, alignment, sortable }) => {
+        const currentSort = this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+        return lit.html`<th
             class="h-full p-0"
-            aria-sort=${ifDefined_js.ifDefined(
-        this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0
-      )}
+            aria-sort=${ifDefined_js.ifDefined(currentSort)}
           >
             <slot
               name=${`header:${key}`}
+              data-key=${key}
               @change-sort=${(event) => this._handleClickSort(event, key)}
+              @slotchange=${this._handleSlotChange}
             >
               <daikin-table-header-cell
                 alignment=${alignment ?? "left"}
                 ?sortable=${this.sortable && sortable}
+                order=${ifDefined_js.ifDefined(currentSort && this.order)}
               >
                 ${label}
               </daikin-table-header-cell>
             </slot>
-          </th>`
+          </th>`;
+      }
     );
     const createRow = (item) => repeat_js.repeat(
       this.headers,
@@ -145,7 +188,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 +211,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 +223,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
@@ -194,7 +247,7 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     </div>`;
   }
   willUpdate(changedProperties) {
-    const viewChanged = changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
+    const viewChanged = changedProperties.has("headers") || changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
     const selectionChanged = changedProperties.has("selection");
     if (viewChanged) {
       this._updateCurrentView();
@@ -204,8 +257,10 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("headers")) ;
-    if (changedProperties.has("rows")) ;
+    const sortChanged = changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order");
+    if (sortChanged) {
+      this._reflectSlotProperties();
+    }
   }
 };
 exports.DaikinTable.styles = lit.css`
@@ -214,6 +269,7 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
+      overflow: auto;
     }
   `;
 __decorateClass([
@@ -233,10 +289,10 @@ __decorateClass([
 ], exports.DaikinTable.prototype, "selection", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTable.prototype, "order", 2);
+], exports.DaikinTable.prototype, "sort", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTable.prototype, "sort", 2);
+], exports.DaikinTable.prototype, "order", 2);
 __decorateClass([
   decorators_js.property({ attribute: false })
 ], exports.DaikinTable.prototype, "sortFunction", 2);
@@ -246,6 +302,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/components/table/daikin-table.d.cts

@@ -9,9 +9,11 @@ export type HeaderType<T extends string = string> = {
 /**
  * The table component is a component that can display multiple data objects in a tabular format.
  *
- * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component does not require its child elements to have cells. Instead, it can be made to function as a table by giving the properties `headers` and `rows` appropriate arrays.
+ * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component generates table structure automatically from data. You must provide the `headers` and `rows` properties to define the table structure and content. You can also customize table cell content by providing custom content in slots.
  *
- * If the contents of the table are plain text only, give them to the `rows` property. However, if you want to give contents other than text, such as buttons or images, you will need to prepare a element with the corresponding `slot` attribute. The value of this attribute must be structured as follows: ``slot=${`cell:${headers[i].key}:${rows[i].id}`}``
+ * By specifying the `rows` property, you can only display plain text content. If you need to display richer content within the row cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`cell:${rows[j].id}:${headers[i].key}`}``
+ *
+ * By specifying the headers property, you can only display plain text, define text alignment and sorting buttons. If you need to display richer content within the header cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`header:${headers[i].key}`}``
  *
  * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
  *
@@ -34,19 +36,8 @@ export type HeaderType<T extends string = string> = {
  * ```
  *
  * ```html
- * <daikin-table
- *   .headers="[
- *     { key: 'name', label: 'Name', sortable: true },
- *     { key: 'season', label: 'Season', sortable: true },
- *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
- *   ]"
- *   .rows="[
- *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
- *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
- *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
- *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
- *   ]"
- * >
+ * <daikin-table>
+ *   <!-- By using a slot, you can add a subtitle below the content in the name column for each row. -->
  *   <daikin-table-cell slot="cell:1:name">
  *     Apple
  *     <span slot="subtitle">This is a autumn fruit.</span>
@@ -64,6 +55,22 @@ export type HeaderType<T extends string = string> = {
  *     <span slot="subtitle">This is a spring fruit.</span>
  *   </daikin-table-cell>
  * </daikin-table>
+ *
+ * <script>
+ *   // Set up the table data
+ *   const tableElement = document.querySelector('daikin-table');
+ *   tableElement.headers = [
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'season', label: 'Season', sortable: true },
+ *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+ *   ];
+ *   tableElement.rows = [
+ *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
+ *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
+ *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
+ *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
+ *   ];
+ * </script>
  * ```
  */
 export declare class DaikinTable<T extends {
@@ -72,59 +79,90 @@ export declare class DaikinTable<T extends {
     static readonly styles: import('lit').CSSResult;
     /**
      * Headers of the table.
-     * - key: The value of `key` corresponds to the key, excluding the id of rows. As a whole array, the value of `key` must be unique. Also, only use alphanumeric characters, `$`, and `_` in the `key`.
-     * - label: This is the text that is displayed in the header cells.
-     * - alignment: The direction in which the characters are aligned can be omitted. If it is omitted, the characters will be aligned to the left.
-     * - sortable: If sortable (`sortable = true`), this specifies whether sorting is performed on this column.
+     * An array of header configuration objects that define the table columns.
+     * Each object must have a unique `key` (used to match row data) and a `label` (displayed text).
+     *
+     * - key: The `key` value corresponds to the property name in the row data (excluding `id`). All `key` values must be unique within the headers array. Use only alphanumeric characters, `$`, and `_` in the `key`.
+     * - label: The text displayed in the header cells.
+     * - alignment: The text alignment direction. Defaults to left alignment if omitted.
+     * - sortable: When `sortable = true`, enables sorting for this column.
+     *
+     * @example
+     * [
+     *   { key: 'name', label: 'Name', sortable: true },
+     *   { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+     * ]
      */
     headers: readonly HeaderType<Extract<keyof T, string>>[];
     /**
      * Rows of the table.
-     * An array that uses the element `key` in the column as the key and stores the corresponding value.
-     * As a whole array, the value of `id` should be unique.
+     * An array of data objects where each object represents a table row.
+     * Each object must have a unique `id` property and properties that match the `key` values defined in `headers`.
+     *
+     * @example
+     * [
+     *   { id: '1', name: 'Apple', price: '$2' },
+     *   { id: '2', name: 'Orange', price: '$1' },
+     * ]
      */
     rows: T[];
     /**
-     * Whether or not to enable selection of rows.
-     * If `true`, a checkbox will be displayed to the left of each row.
+     * Whether to enable row selection.
+     * When `true`, a checkbox will be displayed to the left of each row.
      */
     selectable: boolean;
     /**
-     * Whether or not to enable sorting of the rows.
-     * If `true`, a button for sorting will be displayed to the right of each header cell text.
+     * Whether to enable row sorting.
+     * When `true`, a sort button will be displayed to the right of each sortable header cell.
      */
     sortable: boolean;
     /**
-     * An array of `id`s for the `rows` that have been checked.
+     * An array of `id` values for the selected rows.
      */
     selection: string[];
-    /**
-     * Sort order of the table.
-     */
-    order: "asc" | "desc" | null;
     /**
      * The `key` of the currently sorted column.
+     * Used with the `order` property to determine which column is sorted and in which direction.
+     *
+     * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
      */
     sort: keyof T | null;
     /**
-     * Specify this when you want to customize the sort function.
-     * The function must be ascending, and the return value must be `0`, `1` or `-1`.
+     * The sort order of the table.
+     * Used with the `sort` property.
+     *
+     * - "asc": ascending order
+     * - "desc": descending order
+     *
+     * For example, if `sort = "price"` and `order = "desc"`, the table will be sorted by the "price" column in descending order.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * Custom sort function for table columns.
+     * The function should return a comparison result for ascending order: `0`, `1`, or `-1`.
      */
     sortFunction: {
         [key in keyof T]?: (a: T, b: T, key: key) => number;
     } | ((a: T, b: T, key: keyof T) => number) | false | null;
     private _bulkRowsCheckState;
     /**
-     * The rows displayed in the current table.
-     * Currently this is a sorted `rows`, but pagination may be considered in the future.
+     * The rows currently displayed in the table.
+     * This is a sorted version of `rows`. Pagination may be added 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;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/dist/cjs/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/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/components/table-header-cell/daikin-table-header-cell.cjs

@@ -46,11 +46,31 @@ const cvaHeaderCell = classVarianceAuthority.cva(
           "focus-visible:-outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
-          "after:size-6",
-          "after:i-daikin-sort"
+          "after:size-6"
         ]
+      },
+      order: {
+        asc: [],
+        desc: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        sortable: true,
+        order: null,
+        class: ["after:i-daikin-sort"]
+      },
+      {
+        sortable: true,
+        order: "asc",
+        class: ["after:i-daikin-chevron-up"]
+      },
+      {
+        sortable: true,
+        order: "desc",
+        class: ["after:i-daikin-chevron-up", "after:rotate-180"]
+      }
+    ]
   }
 );
 exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.DDSElement {
@@ -58,14 +78,16 @@ exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.D
     super(...arguments);
     this.alignment = "left";
     this.sortable = false;
+    this.order = null;
   }
   render() {
     const headerCellCN = cvaHeaderCell({
       alignment: this.alignment,
-      sortable: this.sortable
+      sortable: this.sortable,
+      order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
-    const content = lit.html`<slot name="left-icon" class="icon-size-6"></slot>
-      <slot></slot>`;
+    const content = lit.html`<slot name="left-icon" class="icon-size-6"></slot
+      ><slot></slot>`;
     return this.sortable ? lit.html`<button
           type="button"
           class=${headerCellCN}
@@ -90,6 +112,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "sortable", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTableHeaderCell.prototype, "order", 2);
 exports.DaikinTableHeaderCell = __decorateClass([
   decorators.ddsElement("daikin-table-header-cell")
 ], exports.DaikinTableHeaderCell);

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

@@ -1,8 +1,9 @@
 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;
+    order?: "desc" | "asc" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
 /**
@@ -44,6 +45,12 @@ export declare class DaikinTableHeaderCell extends DDSElement {
      * It also makes the component emit the `change-sort` event when clicked.
      */
     sortable: boolean;
+    /**
+     * The current sort order of the column.
+     * Can be "asc", "desc", or null if not sorted.
+     * Controlled by `daikin-table`.
+     */
+    order: TableHeaderCellVariantProps["order"] | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs/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) => {
@@ -89,7 +89,7 @@ exports.DaikinTabs = class DaikinTabs extends ddsElement.DDSElement {
     if (!selectedTab) {
       return;
     }
-    scroller.scrollIntoViewOnlyParent(selectedTab);
+    scroller.scrollIntoViewOnlyParent(selectedTab, "horizontal", false);
   }
   _updateTabStyle() {
     const tabs = this._tabs;

package/dist/cjs/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/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.
      */