@vmz/ui 0.2.2 → 0.2.4

package/src/components/Table.vmz

@@ -1,63 +1,61 @@
 <template>
-  <div class="vmz-ui-table-wrap" data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir">
-      <table class="vmz-ui-table">
-        <thead @click="onHeadClick">
-          <tr>
-            <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
-              <button type="button" class="vmz-ui-table__sort" :data-vmz-sort="col.id">
-                {{ col.title }}
-              </button>
-            </th>
-            <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
-          </tr>
-        </thead>
-        <tbody @click="onBodyClick">
-          <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
-            <td v-for="cell in row.cells">{{ cell }}</td>
-            <td v-if="hasRowAction">
-              <button
-                type="button"
-                class="vmz-ui-table__row-action"
-                :data-vmz-row-action="row.id"
-                :disabled="rowActionDisabled"
-              >
-                {{ actionLabel }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <div data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir" class="vmz-ui-table-wrap">
+        <table class="vmz-ui-table">
+            <thead @click="onHeadClick">
+                <tr>
+                    <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
+                        <button type="button" :data-vmz-sort="col.id" class="vmz-ui-table__sort">
+                            {{ col.title }}
+                        </button>
+                    </th>
+                    <th v-if="hasRowAction" scope="col">
+                        {{ actionTitle }}
+                    </th>
+                </tr>
+            </thead>
+            <tbody @click="onBodyClick">
+                <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
+                    <td v-for="cell in row.cells">
+                        {{ cell }}
+                    </td>
+                    <td v-if="hasRowAction">
+                        <button type="button" :data-vmz-row-action="row.id" :disabled="rowActionDisabled" class="vmz-ui-table__row-action">
+                            {{ actionLabel }}
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 </template>
-
 <style>
-  .vmz-ui-table-wrap {
+.vmz-ui-table-wrap {
     overflow-x: auto;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
-  }
+}
 
-  .vmz-ui-table {
+.vmz-ui-table {
     width: 100%;
     border-collapse: collapse;
     font: inherit;
-  }
+}
 
-  .vmz-ui-table th,
-  .vmz-ui-table td {
+.vmz-ui-table th,
+.vmz-ui-table td {
     padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
     text-align: left;
     border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
     vertical-align: middle;
-  }
+}
 
-  .vmz-ui-table th {
+.vmz-ui-table th {
     font-weight: 700;
     color: var(--vmz-action-primary-active);
     background: transparent;
-  }
+}
 
-  .vmz-ui-table__sort {
+.vmz-ui-table__sort {
     font: inherit;
     font-weight: 700;
     padding: 0;
@@ -66,13 +64,13 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-table__sort:focus-visible {
+.vmz-ui-table__sort:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-table__row-action {
+.vmz-ui-table__row-action {
     font: inherit;
     font-weight: 600;
     padding: 0.3rem 0.55rem;
@@ -82,55 +80,54 @@
     color: var(--vmz-action-primary-active);
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-table__row-action:focus-visible {
+.vmz-ui-table__row-action:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-table__row-action:disabled {
+.vmz-ui-table__row-action:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Table (UI5 Console Surface).
-* Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
-*/
+ * VMZ UI — Table (UI5 Console Surface).
+ * Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
+ */
 export default class Table {
-	/** @type {{ id: string, title: string }[]} */
-	public columns: {
-		id: string;
-		title: string;
-	}[] = [];
-	/** @type {{ id: string, cells: string[] }[]} */
-	public rows: {
-		id: string;
-		cells: string[];
-	}[] = [];
-	public hasRowAction: boolean = false;
-	public rowActionDisabled: boolean = false;
-	public actionTitle: string = "Action";
-	public actionLabel: string = "Open";
-	public sortKey: string = "";
-	public sortDir: string = "asc";
-	public onRowAction: ((rowId: string) => void) | null = null;
-	public onSort: ((columnId: string) => void) | null = null;
-	onBodyClick(ev) {
-		const t = ev && ev.target;
-		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-row-action]") : null;
-		if (!el || el.disabled) return;
-		const id = el.getAttribute("data-vmz-row-action");
-		if (id && typeof this.onRowAction === "function") this.onRowAction(id);
-	}
-	onHeadClick(ev) {
-		const t = ev && ev.target;
-		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-sort]") : null;
-		if (!el) return;
-		const id = el.getAttribute("data-vmz-sort");
-		if (id && typeof this.onSort === "function") this.onSort(id);
-	}
+    /** @type {{ id: string, title: string }[]} */
+    public columns: {
+        id: string;
+        title: string;
+    }[] = [];
+    /** @type {{ id: string, cells: string[] }[]} */
+    public rows: {
+        id: string;
+        cells: string[];
+    }[] = [];
+    public hasRowAction: boolean = false;
+    public rowActionDisabled: boolean = false;
+    public actionTitle: string = "Action";
+    public actionLabel: string = "Open";
+    public sortKey: string = "";
+    public sortDir: string = "asc";
+    public onRowAction: ((rowId: string) => void) | null = null;
+    public onSort: ((columnId: string) => void) | null = null;
+    onBodyClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-row-action]") : null;
+        if (!el || el.disabled) return;
+        const id = el.getAttribute("data-vmz-row-action");
+        if (id && typeof this.onRowAction === "function") this.onRowAction(id);
+    }
+    onHeadClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-sort]") : null;
+        if (!el) return;
+        const id = el.getAttribute("data-vmz-sort");
+        if (id && typeof this.onSort === "function") this.onSort(id);
+    }
 }
 </script>

package/src/components/Tabs.vmz

@@ -1,56 +1,31 @@
 <template>
-  <div class="vmz-ui-tabs" data-vmz-ui="tabs">
-      <div
-        class="vmz-ui-tabs__list"
-        role="tablist"
-        :aria-label="label"
-        :onKeyDown="onListKeyDown"
-        @click="onListClick"
-      >
-        <button
-          v-for="item in items"
-          :key="item.id"
-          type="button"
-          class="vmz-ui-tabs__tab"
-          role="tab"
-          :id="item.id"
-          :data-vmz-tab="item.id"
-          :aria-selected="selected === item.id ? 'true' : 'false'"
-          :aria-controls="item.controls"
-          :tabindex="selected === item.id ? 0 : -1"
-        >
-          {{ item.title }}
-        </button>
-      </div>
-      <div
-        class="vmz-ui-tabs__panel"
-        role="tabpanel"
-        :id="panelId"
-        :data-vmz-tab-panel="selected"
-        :aria-labelledby="selected"
-        tabindex="0"
-      >
-        <slot />
-      </div>
+    <div data-vmz-ui="tabs" class="vmz-ui-tabs">
+        <div role="tablist" :aria-label="label" :onKeyDown="onListKeyDown" @click="onListClick" class="vmz-ui-tabs__list">
+            <button v-for="item in items" :key="item.id" type="button" role="tab" :id="item.id" :data-vmz-tab="item.id" :aria-selected='selected === item.id ? "true" : "false"' :aria-controls="item.controls" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tabs__tab">
+                {{ item.title }}
+            </button>
+        </div>
+        <div role="tabpanel" :id="panelId" :data-vmz-tab-panel="selected" :aria-labelledby="selected" tabindex="0" class="vmz-ui-tabs__panel">
+            <slot />
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-tabs {
+.vmz-ui-tabs {
     display: flex;
     flex-direction: column;
     gap: 0.65rem;
     max-width: 36rem;
-  }
+}
 
-  .vmz-ui-tabs__list {
+.vmz-ui-tabs__list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.25rem;
     border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-  }
+}
 
-  .vmz-ui-tabs__tab {
+.vmz-ui-tabs__tab {
     font: inherit;
     font-size: 0.875rem;
     font-weight: 400;
@@ -63,70 +38,73 @@
     color: var(--vmz-text-ink);
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-tabs__tab[aria-selected='true'] {
+.vmz-ui-tabs__tab[aria-selected="true"] {
     background: transparent;
     color: var(--vmz-action-primary-background);
     font-weight: 500;
     border-bottom-color: var(--vmz-action-primary-background);
-  }
+}
 
-  .vmz-ui-tabs__tab:focus-visible {
+.vmz-ui-tabs__tab:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-tabs__panel {
+.vmz-ui-tabs__panel {
     min-height: 2.5rem;
     outline: none;
-  }
+}
 
-  .vmz-ui-tabs__panel:focus-visible {
+.vmz-ui-tabs__panel:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Tabs (UI2).
-* Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
-* Panel content is the default slot (page chooses which body to show).
-*/
+ * VMZ UI — Tabs (UI2).
+ * Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
+ * Panel content is the default slot (page chooses which body to show).
+ */
 export default class Tabs {
-	public label: string = "Tabs";
-	public selected: string = "";
-	public panelId: string = "";
-	/** @type {{ id: string, title: string, controls?: string }[]} */
-	public items: {
-		id: string;
-		title: string;
-		controls?: string;
-	}[] = [];
-	public onSelect: ((id: string) => void) | null = null;
-	select(id) {
-		if (typeof this.onSelect === "function") this.onSelect(id);
-	}
-	onListClick(ev) {
-		const t = ev && ev.target;
-		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tab]") : null;
-		const id = el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-tab") : null;
-		if (id) this.select(id);
-	}
-	onListKeyDown(ev) {
-		if (!ev || !this.items?.length) return;
-		const ids = this.items.map((it) => it.id);
-		const idx = Math.max(0, ids.indexOf(this.selected));
-		let next = idx;
-		if (ev.key === "ArrowRight") next = (idx + 1) % ids.length;
-		else if (ev.key === "ArrowLeft") next = (idx - 1 + ids.length) % ids.length;
-		else if (ev.key === "Home") next = 0;
-		else if (ev.key === "End") next = ids.length - 1;
-		else return;
-		ev.preventDefault();
-		this.select(ids[next]);
-		const root = this.__vmzDomRoot;
-		const btn = root && typeof root.querySelector === "function" ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`) : null;
-		if (btn && typeof btn.focus === "function") btn.focus();
-	}
+    public label: string = "Tabs";
+    public selected: string = "";
+    public panelId: string = "";
+    /** @type {{ id: string, title: string, controls?: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+        controls?: string;
+    }[] = [];
+    public onSelect: ((id: string) => void) | null = null;
+    select(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+    }
+    onListClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tab]") : null;
+        const id =
+            el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-tab") : null;
+        if (id) this.select(id);
+    }
+    onListKeyDown(ev) {
+        if (!ev || !this.items?.length) return;
+        const ids = this.items.map((it) => it.id);
+        const idx = Math.max(0, ids.indexOf(this.selected));
+        let next = idx;
+        if (ev.key === "ArrowRight") next = (idx + 1) % ids.length;
+        else if (ev.key === "ArrowLeft") next = (idx - 1 + ids.length) % ids.length;
+        else if (ev.key === "Home") next = 0;
+        else if (ev.key === "End") next = ids.length - 1;
+        else return;
+        ev.preventDefault();
+        this.select(ids[next]);
+        const root = this.__vmzDomRoot;
+        const btn =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`)
+                : null;
+        if (btn && typeof btn.focus === "function") btn.focus();
+    }
 }
 </script>

package/src/components/Tag.vmz

@@ -1,15 +1,40 @@
 <template>
-  <span
-    class="vmz-ui-tag"
-    data-vmz-ui="tag"
-    :data-status="status || undefined"
-    :data-vmz-tag-status="status || undefined"
-  ><slot /></span>
+    <span data-vmz-ui="tag" :data-status="status || undefined" :data-vmz-tag-status="status || undefined" class="vmz-ui-tag">
+        <slot />
+    </span>
 </template>
 <style>
-.vmz-ui-tag{display:inline-flex;align-items:center;min-height:1.5rem;padding:0 .45rem;border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-sm,2px);background:var(--vmz-surface-mist);color:var(--vmz-text-steel);font-size:.75rem;line-height:1}
-.vmz-ui-tag[data-status='success']{color:var(--vmz-status-success-foreground);background:color-mix(in srgb,var(--vmz-status-success-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-success-accent) 45%,var(--vmz-line-default))}
-.vmz-ui-tag[data-status='warning']{color:var(--vmz-status-warning-foreground);background:color-mix(in srgb,var(--vmz-status-warning-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-warning-accent) 45%,var(--vmz-line-default))}
-.vmz-ui-tag[data-status='error']{color:var(--vmz-status-danger-foreground);background:color-mix(in srgb,var(--vmz-status-danger-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-danger-accent) 45%,var(--vmz-line-default))}
+.vmz-ui-tag {
+    display: inline-flex;
+    align-items: center;
+    min-height: 1.5rem;
+    padding: 0 0.45rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-sm, 2px);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-steel);
+    font-size: 0.75rem;
+    line-height: 1;
+}
+.vmz-ui-tag[data-status="success"] {
+    color: var(--vmz-status-success-foreground);
+    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
+    border-color: color-mix(in srgb, var(--vmz-status-success-accent) 45%, var(--vmz-line-default));
+}
+.vmz-ui-tag[data-status="warning"] {
+    color: var(--vmz-status-warning-foreground);
+    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
+    border-color: color-mix(in srgb, var(--vmz-status-warning-accent) 45%, var(--vmz-line-default));
+}
+.vmz-ui-tag[data-status="error"] {
+    color: var(--vmz-status-danger-foreground);
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
+    border-color: color-mix(in srgb, var(--vmz-status-danger-accent) 45%, var(--vmz-line-default));
+}
 </style>
-<script client>export default class Tag { static __vmzHostBox = 'contents'; public status: string = ''; }</script>
+<script client>
+export default class Tag {
+    static __vmzHostBox = "contents";
+    public status: string = "";
+}
+</script>

package/src/components/TextArea.vmz

@@ -1,122 +1,118 @@
 <template>
-  <div class="vmz-ui-textarea" data-vmz-ui="textarea" :data-invalid="invalidAttr">
-      <label v-if="label" class="vmz-ui-textarea__label" :for="controlId">{{ label }}</label>
-      <textarea
-        :id="controlId"
-        class="vmz-ui-textarea__control"
-        :rows="rows"
-        :value="value"
-        :disabled="disabled"
-        :readonly="readonly"
-        :aria-invalid="error ? 'true' : 'false'"
-        :aria-describedby="describedBy"
-        @input="onDomInput"
-      ></textarea>
-      <p v-if="description" :id="descriptionId" class="vmz-ui-textarea__description">{{ description }}</p>
-      <p v-if="error" :id="errorId" class="vmz-ui-textarea__error" role="alert">{{ error }}</p>
+    <div data-vmz-ui="textarea" :data-invalid="invalidAttr" class="vmz-ui-textarea">
+        <label v-if="label" :for="controlId" class="vmz-ui-textarea__label">
+            {{ label }}
+        </label>
+        <textarea :id="controlId" :rows="rows" :value="value" :disabled="disabled" :readonly="readonly" :aria-invalid='error ? "true" : "false"' :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-textarea__control" />
+        <p v-if="description" :id="descriptionId" class="vmz-ui-textarea__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-textarea__error">
+            {{ error }}
+        </p>
     </div>
 </template>
-
 <style>
-  .vmz-ui-textarea {
+.vmz-ui-textarea {
     display: flex;
     flex-direction: column;
     gap: 0.45rem;
     max-width: none;
     width: 100%;
-  }
+}
 
 .vmz-ui-textarea__label {
-  font: inherit;
-  font-weight: 500;
-  font-size: 0.875rem;
+    font: inherit;
+    font-weight: 500;
+    font-size: 0.875rem;
 }
 
 .vmz-ui-textarea__control {
-  box-sizing: border-box;
-  width: 100%;
-  font-family: var(--vmz-font-sans, inherit);
-  font-size: 0.875rem;
-  line-height: 1.5715;
-  min-height: 5.5rem;
-  padding: var(--vmz-density-control-padding-y, 0.25rem)
-    var(--vmz-density-control-padding-x, 0.75rem);
-  border: 1px solid var(--vmz-line-default, #d9d9d9);
-  border-radius: var(--vmz-radius-md, 6px);
-  background: var(--vmz-surface-paper, #fff);
-  color: var(--vmz-text-ink, inherit);
-  outline: none;
-  resize: vertical;
-  transition:
-    border-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear),
-    box-shadow var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear);
+    box-sizing: border-box;
+    width: 100%;
+    font-family: var(--vmz-font-sans, inherit);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    min-height: 5.5rem;
+    padding: var(--vmz-density-control-padding-y, 0.25rem)
+        var(--vmz-density-control-padding-x, 0.75rem);
+    border: 1px solid var(--vmz-line-default, #d9d9d9);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper, #fff);
+    color: var(--vmz-text-ink, inherit);
+    outline: none;
+    resize: vertical;
+    transition:
+        border-color var(--vmz-motion-control-duration, 120ms)
+            var(--vmz-motion-control-easing, linear),
+        box-shadow var(--vmz-motion-control-duration, 120ms)
+            var(--vmz-motion-control-easing, linear);
 }
 
 .vmz-ui-textarea__control::placeholder {
-  color: var(--vmz-text-steel, #8c8c8c);
-  opacity: 1;
+    color: var(--vmz-text-steel, #8c8c8c);
+    opacity: 1;
 }
 
-.vmz-ui-textarea[data-invalid='true'] .vmz-ui-textarea__control {
-  border-color: var(--vmz-status-danger-accent);
+.vmz-ui-textarea[data-invalid="true"] .vmz-ui-textarea__control {
+    border-color: var(--vmz-status-danger-accent);
 }
 
 .vmz-ui-textarea__control:hover:not(:disabled):not(:focus-visible) {
-  border-color: var(--vmz-action-primary-background);
+    border-color: var(--vmz-action-primary-background);
 }
 
 .vmz-ui-textarea__control:focus-visible {
-  border-color: var(--vmz-action-primary-background);
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    border-color: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .vmz-ui-textarea__control:disabled,
 .vmz-ui-textarea__control:read-only {
-  cursor: default;
-  background: var(--vmz-surface-mist, #fafafa);
+    cursor: default;
+    background: var(--vmz-surface-mist, #fafafa);
 }
 
 .vmz-ui-textarea__control:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
+    cursor: not-allowed;
+    opacity: 0.55;
 }
 
 .vmz-ui-textarea__description {
-  margin: 0;
-  color: var(--vmz-text-steel, #8c8c8c);
-  font-size: 0.875rem;
-  line-height: 1.4;
+    margin: 0;
+    color: var(--vmz-text-steel, #8c8c8c);
+    font-size: 0.875rem;
+    line-height: 1.4;
 }
 
 .vmz-ui-textarea__error {
-  margin: 0;
-  color: var(--vmz-status-danger-foreground);
-  font-size: 0.875rem;
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.875rem;
 }
 </style>
-
 <script client>
 /**
-* VMZ UI — TextArea.
-* Same label/description/error ownership contract as Field; parent owns value.
-*/
+ * VMZ UI — TextArea.
+ * Same label/description/error ownership contract as Field; parent owns value.
+ */
 export default class TextArea {
-	public label: string = "";
-	public description: string = "";
-	public error: string = "";
-	public value: string = "";
-	public rows: number = 4;
-	public disabled: boolean = false;
-	public readonly: boolean = false;
-	public invalidAttr: string = "false";
-	public controlId: string = "vmz-textarea";
-	public descriptionId: string = "vmz-textarea-desc";
-	public errorId: string = "vmz-textarea-err";
-	public describedBy: string = "";
-	public onInput: ((e: Event) => void) | null = null;
-	onDomInput(e: Event) {
-		this.emit("input", e);
-		if (typeof this.onInput === "function") this.onInput(e);
-	}
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public value: string = "";
+    public rows: number = 4;
+    public disabled: boolean = false;
+    public readonly: boolean = false;
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-textarea";
+    public descriptionId: string = "vmz-textarea-desc";
+    public errorId: string = "vmz-textarea-err";
+    public describedBy: string = "";
+    public onInput: ((e: Event) => void) | null = null;
+    onDomInput(e: Event) {
+        this.emit("input", e);
+        if (typeof this.onInput === "function") this.onInput(e);
+    }
 }
 </script>