reke-ui 0.1.2 → 0.2.0

package/dist/components/reke-table/reke-table.js

@@ -1,107 +1,220 @@
-import { nothing as h, html as n } from "lit";
-import { property as l, state as c, customElement as b } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { RekeElement as f } from "../../shared/base-element.js";
-import { styles as u } from "./reke-table.styles.js";
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, r, o) => {
-  for (var d = o > 1 ? void 0 : o ? w(e, r) : e, i = t.length - 1, p; i >= 0; i--)
-    (p = t[i]) && (d = (o ? p(e, r, d) : p(d)) || d);
-  return o && d && m(e, r, d), d;
-};
-let s = class extends f {
-  constructor() {
-    super(...arguments), this.columns = [], this.rows = [], this.striped = !1, this.dense = !1, this.hoverable = !1, this.bordered = !1, this.borderless = !1, this.sortKey = "", this.sortDirection = "asc", this.expandedRowRender = null, this.expandedRowElement = null, this.expandedRows = /* @__PURE__ */ new Set(), this._expandCleanups = /* @__PURE__ */ new Map(), this._hasToolbar = !1, this._hasFooter = !1;
-  }
-  handleHeaderClick(t) {
-    t.sortable !== !1 && (this.sortKey === t.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = t.key, this.sortDirection = "asc"), this.emit("reke-sort", { key: this.sortKey, direction: this.sortDirection }));
-  }
-  handleRowClick(t, e) {
-    this.emit("reke-row-click", { row: t, index: e });
-  }
-  /** Toggle expand state for a row at the given index. */
-  toggleExpand(t) {
-    const e = new Set(this.expandedRows), r = this.rows[t], o = !e.has(t);
-    if (o)
-      e.add(t);
-    else {
-      e.delete(t);
-      const d = this._expandCleanups.get(t);
-      d && (d(), this._expandCleanups.delete(t));
-    }
-    this.expandedRows = e, this.emit("reke-row-expand", { row: r, index: t, expanded: o });
-  }
-  /** Check whether a row at the given index is currently expanded. */
-  isRowExpanded(t) {
-    return this.expandedRows.has(t);
-  }
-  _onToolbarSlotChange(t) {
-    const e = t.target;
-    this._hasToolbar = e.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  _onFooterSlotChange(t) {
-    const e = t.target;
-    this._hasFooter = e.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  _renderRow(t, e) {
-    const r = this.expandedRows.has(e);
-    return n`
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { n } from "../../node_modules/lit-html/directives/ref.js";
+import "../../node_modules/lit/directives/ref.js";
+import { styles as r } from "./reke-table.styles.js";
+import { html as i, nothing as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+//#region src/components/reke-table/reke-table.ts
+function u() {
+	try {
+		let e = {
+			BASE_URL: "/",
+			DEV: !1,
+			MODE: "production",
+			PROD: !0,
+			SSR: !1
+		};
+		if (e && typeof e.DEV == "boolean") return e.DEV;
+		if (e && typeof e.MODE == "string") return e.MODE !== "production";
+	} catch {}
+	try {
+		let e = globalThis.process;
+		if (e?.env?.NODE_ENV) return e.env.NODE_ENV === "development";
+	} catch {}
+	return !1;
+}
+var d = class extends e {
+	constructor(...e) {
+		super(...e), this.columns = [], this.rows = [], this.striped = !1, this.dense = !1, this.hoverable = !1, this.bordered = !1, this.borderless = !1, this.expandable = !1, this.expandOnRowClick = !1, this.sortKey = "", this.sortDirection = "asc", this.expandedRowElement = null, this.expandedRows = /* @__PURE__ */ new Set(), this._hostCache = /* @__PURE__ */ new Map(), this._cleanupMap = /* @__PURE__ */ new Map(), this._warnedDupKeys = /* @__PURE__ */ new Set(), this._warnedNumericTarget = !1, this._mountedKeys = /* @__PURE__ */ new Set(), this._keyToRow = /* @__PURE__ */ new Map(), this._refCallbacks = /* @__PURE__ */ new Map(), this._hasToolbar = !1, this._hasFooter = !1, this._warnedLegacyApi = !1;
+	}
+	static {
+		this.styles = r;
+	}
+	_resolveKey(e, t) {
+		return this.getRowKey ? this.getRowKey(e, t) : String(t);
+	}
+	handleHeaderClick(e) {
+		e.sortable !== !1 && (this.sortKey === e.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = e.key, this.sortDirection = "asc"), this.emit("reke-sort", {
+			key: this.sortKey,
+			direction: this.sortDirection
+		}));
+	}
+	handleRowClick(e, t) {
+		if (this.emit("reke-row-click", {
+			row: e,
+			index: t
+		}), this.expandOnRowClick) {
+			let n = this._resolveKey(e, t);
+			this.toggleExpand(n);
+		}
+	}
+	_handleChevronClick(e, t) {
+		e.stopPropagation(), this.toggleExpand(t);
+	}
+	_handleChevronKeydown(e, t) {
+		(e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), e.stopPropagation(), this.toggleExpand(t));
+	}
+	toggleExpand(e) {
+		let t, n, r, i = typeof e == "number" && e === Math.trunc(e) && e >= 0 && e < this.rows.length;
+		i && this.getRowKey && !this._warnedNumericTarget && u() && (this._warnedNumericTarget = !0, console.warn("[reke-table] toggleExpand received a numeric target while `getRowKey` is set; in-range numeric targets are interpreted as row INDICES, not keys. Pass the resolved key to target by identity.")), i ? (n = e, r = this.rows[n], t = this._resolveKey(r, n)) : (t = e, n = this.rows.findIndex((e, n) => this._resolveKey(e, n) === t), r = n >= 0 ? this.rows[n] : void 0);
+		let a = new Set(this.expandedRows), o = !a.has(t);
+		o ? a.add(t) : (a.delete(t), this._safeCleanup(t), this._hostCache.delete(t), this._mountedKeys.delete(t), this._refCallbacks.delete(t)), this.expandedRows = a, this.emit("reke-row-expand", {
+			row: r,
+			index: n,
+			key: t,
+			expanded: o
+		});
+	}
+	isRowExpanded(e) {
+		return this.expandedRows.has(e);
+	}
+	_onToolbarSlotChange(e) {
+		let t = e.target;
+		this._hasToolbar = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_onFooterSlotChange(e) {
+		let t = e.target;
+		this._hasFooter = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_getOrCreateHost(e) {
+		let t = this._hostCache.get(e);
+		return t || (t = document.createElement("div"), t.style.cssText = "display: contents;", this._hostCache.set(e, t)), t;
+	}
+	_expandTdRef(e) {
+		let t = this._refCallbacks.get(e);
+		return t || (t = (t) => {
+			if (!t) return;
+			let n = t, r = this._getOrCreateHost(e);
+			r.parentElement !== n && n.appendChild(r);
+		}, this._refCallbacks.set(e, t)), t;
+	}
+	_renderRow(e, t, r) {
+		let o = this.expandedRows.has(r), s = `reke-table-expand-${String(r)}`, c = this.columns.length + +!!this.expandable;
+		return i`
       <tr
         part="row"
-        class="row ${e % 2 === 1 ? "row--even" : ""} ${r ? "row--expanded" : ""}"
-        @click=${() => this.handleRowClick(t, e)}
+        class="row ${t % 2 == 1 ? "row--even" : ""} ${o ? "row--expanded" : ""}"
+        @click=${() => this.handleRowClick(e, t)}
       >
-        ${this.columns.map(
-      (o) => n`
+        ${this.expandable ? i`
+              <td
+                part="expand-toggle-cell"
+                class="expand-toggle-cell"
+              >
+                <button
+                  type="button"
+                  part="expand-toggle-button"
+                  class="expand-toggle-button ${o ? "expand-toggle-button--expanded" : ""}"
+                  aria-expanded=${o ? "true" : "false"}
+                  aria-controls=${s}
+                  aria-label=${o ? "Collapse row" : "Expand row"}
+                  @click=${(e) => this._handleChevronClick(e, r)}
+                  @keydown=${(e) => this._handleChevronKeydown(e, r)}
+                >
+                  <span class="expand-toggle-chevron" aria-hidden="true">▶</span>
+                </button>
+              </td>
+            ` : a}
+        ${this.columns.map((n) => i`
             <td
               part="cell"
               class="cell"
-              data-align=${o.align || "left"}
+              data-align=${n.align || "left"}
             >
-              ${o.render ? o.render(t[o.key], t, e) : t[o.key] ?? ""}
+              ${n.render ? n.render(e[n.key], e, t) : e[n.key] ?? ""}
             </td>
-          `
-    )}
+          `)}
       </tr>
-      ${(this.expandedRowElement || this.expandedRowRender) && r ? n`
+      ${this.expandedRowElement && o && this._keyToRow.get(r) === e ? i`
             <tr part="expand-row" class="expand-row">
-              <td part="expand-content" class="expand-content" colspan=${this.columns.length}>
-                ${this.expandedRowElement ? this._renderExpandedElement(t, e) : this.expandedRowRender(t, e)}
-              </td>
+              <td
+                part="expand-content"
+                class="expand-content"
+                id=${s}
+                colspan=${c}
+                ${n(this._expandTdRef(r))}
+              ></td>
             </tr>
-          ` : h}
+          ` : a}
     `;
-  }
-  _renderExpandedElement(t, e) {
-    const r = document.createElement("div");
-    r.style.cssText = "display: contents;";
-    const o = this.expandedRowElement(r, t, e);
-    return o && this._expandCleanups.set(e, o), r;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._expandCleanups.forEach((t) => t()), this._expandCleanups.clear();
-  }
-  render() {
-    const t = {
-      table: !0,
-      "table--striped": this.striped,
-      "table--dense": this.dense,
-      "table--hoverable": this.hoverable,
-      "table--bordered": this.bordered
-    };
-    return n`
+	}
+	willUpdate(e) {
+		let t = u();
+		t && this.expandedRowRender != null && !this._warnedLegacyApi && (this._warnedLegacyApi = !0, console.error("[reke-table] `expandedRowRender` was removed. Use `expandedRowElement(host, row, key) => Cleanup | void` instead."));
+		let n = /* @__PURE__ */ new Map();
+		for (let e = 0; e < this.rows.length; e += 1) {
+			let r = this.rows[e], i = this._resolveKey(r, e);
+			n.has(i) && t && !this._warnedDupKeys.has(i) && (this._warnedDupKeys.add(i), console.warn(`[reke-table] Duplicate getRowKey value detected: ${JSON.stringify(i)}. Last row with this key wins for expand bookkeeping.`)), n.set(i, r);
+		}
+		this._keyToRow = n;
+	}
+	updated(e) {
+		if (!this.expandedRowElement) {
+			this._runAllCleanupsAndClear();
+			for (let e of Array.from(this.expandedRows)) this._keyToRow.has(e) || this.expandedRows.delete(e);
+			return;
+		}
+		let t = /* @__PURE__ */ new Set([...this.expandedRows, ...this._hostCache.keys()]);
+		for (let e of t) {
+			let t = this._keyToRow.has(e), n = this.expandedRows.has(e);
+			t && n || (this._safeCleanup(e), this._hostCache.delete(e), this._mountedKeys.delete(e), this._refCallbacks.delete(e), t || this.expandedRows.delete(e));
+		}
+		for (let e of this.expandedRows) {
+			if (this._mountedKeys.has(e)) continue;
+			let t = this._keyToRow.get(e);
+			if (!t) continue;
+			let n = this._getOrCreateHost(e), r = this.expandedRowElement(n, t, e);
+			typeof r == "function" && this._cleanupMap.set(e, r), this._mountedKeys.add(e);
+		}
+	}
+	_safeCleanup(e) {
+		let t = this._cleanupMap.get(e);
+		if (t) {
+			try {
+				t();
+			} catch {}
+			this._cleanupMap.delete(e);
+		}
+	}
+	_runAllCleanupsAndClear() {
+		for (let e of this._cleanupMap.values()) try {
+			e();
+		} catch {}
+		this._cleanupMap.clear(), this._hostCache.clear(), this._mountedKeys.clear(), this._refCallbacks.clear();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._runAllCleanupsAndClear();
+	}
+	render() {
+		let e = {
+			table: !0,
+			"table--striped": this.striped,
+			"table--dense": this.dense,
+			"table--hoverable": this.hoverable,
+			"table--bordered": this.bordered
+		};
+		return i`
       <div class="table-container">
-        ${this._hasToolbar ? n`
+        ${this._hasToolbar ? i`
               <div part="toolbar" class="table-toolbar">
                 <slot name="toolbar" @slotchange=${this._onToolbarSlotChange}></slot>
               </div>
-            ` : n`<slot name="toolbar" @slotchange=${this._onToolbarSlotChange} style="display:none"></slot>`}
+            ` : i`<slot name="toolbar" @slotchange=${this._onToolbarSlotChange} style="display:none"></slot>`}
 
         <div class="table-wrapper">
-          <table part="table" class=${y(t)} role="table">
+          <table part="table" class=${l(e)} role="table">
             <thead part="header">
               <tr>
-                ${this.columns.map(
-      (e) => n`
+                ${this.expandable ? i`
+                      <th
+                        part="expand-toggle-header-cell"
+                        class="expand-toggle-header-cell"
+                        aria-hidden="true"
+                      ></th>
+                    ` : a}
+                ${this.columns.map((e) => i`
                     <th
                       part="header-cell"
                       class="header-cell ${this.sortKey === e.key ? "header-cell--sorted" : ""} ${e.sortable === !1 ? "header-cell--no-sort" : ""}"
@@ -111,81 +224,68 @@ let s = class extends f {
                     >
                       <span class="header-content">
                         ${e.header}
-                        ${this.sortKey === e.key ? n`<span class="sort-indicator" aria-hidden="true">${this.sortDirection === "asc" ? "↑" : "↓"}</span>` : h}
+                        ${this.sortKey === e.key ? i`<span class="sort-indicator" aria-hidden="true">${this.sortDirection === "asc" ? "↑" : "↓"}</span>` : a}
                       </span>
                     </th>
-                  `
-    )}
+                  `)}
               </tr>
             </thead>
             <tbody part="body">
-              ${this.rows.map((e, r) => this._renderRow(e, r))}
-              ${this.rows.length === 0 ? n`
+              ${this.rows.map((e, t) => {
+			let n = this._resolveKey(e, t);
+			return this._renderRow(e, t, n);
+		})}
+              ${this.rows.length === 0 ? i`
                     <tr class="row row--empty">
-                      <td class="cell cell--empty" colspan=${this.columns.length}>
+                      <td
+                        class="cell cell--empty"
+                        colspan=${this.columns.length + +!!this.expandable}
+                      >
                         <slot name="empty">No data</slot>
                       </td>
                     </tr>
-                  ` : h}
+                  ` : a}
             </tbody>
           </table>
         </div>
 
-        ${this._hasFooter ? n`
+        ${this._hasFooter ? i`
               <div part="footer" class="table-footer">
                 <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
               </div>
-            ` : n`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+            ` : i`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
       </div>
     `;
-  }
-};
-s.styles = u;
-a([
-  l({ attribute: !1 })
-], s.prototype, "columns", 2);
-a([
-  l({ attribute: !1 })
-], s.prototype, "rows", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "striped", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "dense", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "hoverable", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "bordered", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "borderless", 2);
-a([
-  l({ reflect: !0, attribute: "sort-key" })
-], s.prototype, "sortKey", 2);
-a([
-  l({ reflect: !0, attribute: "sort-direction" })
-], s.prototype, "sortDirection", 2);
-a([
-  l({ attribute: !1 })
-], s.prototype, "expandedRowRender", 2);
-a([
-  l({ attribute: !1 })
-], s.prototype, "expandedRowElement", 2);
-a([
-  l({ attribute: !1 })
-], s.prototype, "expandedRows", 2);
-a([
-  c()
-], s.prototype, "_hasToolbar", 2);
-a([
-  c()
-], s.prototype, "_hasFooter", 2);
-s = a([
-  b("reke-table")
-], s);
-export {
-  s as RekeTable
+	}
 };
+t([s({ attribute: !1 })], d.prototype, "columns", void 0), t([s({ attribute: !1 })], d.prototype, "rows", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "striped", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "dense", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "hoverable", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "bordered", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "borderless", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "expandable", void 0), t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "expand-on-row-click"
+})], d.prototype, "expandOnRowClick", void 0), t([s({
+	reflect: !0,
+	attribute: "sort-key"
+})], d.prototype, "sortKey", void 0), t([s({
+	reflect: !0,
+	attribute: "sort-direction"
+})], d.prototype, "sortDirection", void 0), t([s({ attribute: !1 })], d.prototype, "expandedRowElement", void 0), t([s({ attribute: !1 })], d.prototype, "getRowKey", void 0), t([s({ attribute: !1 })], d.prototype, "expandedRows", void 0), t([c()], d.prototype, "_hasToolbar", void 0), t([c()], d.prototype, "_hasFooter", void 0), d = t([o("reke-table")], d);
+//#endregion
+export { d as RekeTable };

package/dist/components/reke-table/reke-table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-table/reke-table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAyMlB,CAAC"}
+{"version":3,"file":"reke-table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-table/reke-table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAsQlB,CAAC"}

package/dist/components/reke-table/reke-table.styles.js

@@ -1,8 +1,7 @@
 import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
-import { css as r } from "lit";
-const t = [
-  e,
-  r`
+import { css as t } from "lit";
+//#region src/components/reke-table/reke-table.styles.ts
+var n = [e, t`
     :host {
       display: block;
     }
@@ -145,6 +144,67 @@ const t = [
       padding: 24px 16px;
     }
 
+    /* === Expand toggle column (opt-in via expandable prop) === */
+
+    .expand-toggle-header-cell {
+      width: 40px;
+      padding: 12px 8px;
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    .expand-toggle-cell {
+      width: 40px;
+      padding: 8px 4px 8px 8px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    .expand-toggle-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: var(--reke-radius, 4px);
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      font: inherit;
+      line-height: 1;
+    }
+
+    .expand-toggle-button:hover {
+      color: var(--reke-color-text, #E5E5E5);
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
+    }
+
+    .expand-toggle-button:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .expand-toggle-chevron {
+      display: inline-block;
+      font-size: 10px;
+      transition: transform 120ms ease;
+      transform: rotate(0deg);
+    }
+
+    .expand-toggle-button--expanded .expand-toggle-chevron {
+      transform: rotate(90deg);
+    }
+
+    .table--dense .expand-toggle-header-cell {
+      padding: 8px 6px;
+    }
+
+    .table--dense .expand-toggle-cell {
+      padding: 4px 4px 4px 6px;
+    }
+
     /* === Expanded row === */
 
     .expand-row {
@@ -200,8 +260,6 @@ const t = [
       border: none;
       border-radius: 0;
     }
-  `
-];
-export {
-  t as styles
-};
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-textarea/reke-textarea.js

@@ -1,73 +1,54 @@
-import { nothing as n, html as u } from "lit";
-import { property as a, customElement as d } from "lit/decorators.js";
-import { classMap as c } from "lit/directives/class-map.js";
-import { RekeElement as m } from "../../shared/base-element.js";
-import { styles as b } from "./reke-textarea.styles.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (l, s, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? f(s, i) : s, p = l.length - 1, h; p >= 0; p--)
-    (h = l[p]) && (r = (o ? h(s, i, r) : h(r)) || r);
-  return o && r && v(s, i, r), r;
-};
-let e = class extends m {
-  constructor() {
-    super(...arguments), this.value = "", this.placeholder = "", this.rows = 4, this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
-  }
-  handleInput(l) {
-    const s = l.target;
-    this.value = s.value, this.emit("reke-input", { value: this.value });
-  }
-  handleChange() {
-    this.emit("reke-change", { value: this.value });
-  }
-  render() {
-    const l = {
-      textarea: !0,
-      [`textarea--${this.size}`]: !0,
-      "textarea--error": this.error
-    };
-    return u`
-      ${this.label ? u`<label class="label">${this.label}</label>` : n}
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-textarea.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/components/reke-textarea/reke-textarea.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "", this.rows = 4, this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
+	}
+	static {
+		this.styles = n;
+	}
+	handleInput(e) {
+		let t = e.target;
+		this.value = t.value, this.emit("reke-input", { value: this.value });
+	}
+	handleChange() {
+		this.emit("reke-change", { value: this.value });
+	}
+	render() {
+		let e = {
+			textarea: !0,
+			[`textarea--${this.size}`]: !0,
+			"textarea--error": this.error
+		};
+		return r`
+      ${this.label ? r`<label class="label">${this.label}</label>` : i}
       <textarea
         part="textarea"
-        class=${c(l)}
+        class=${s(e)}
         .value=${this.value}
-        placeholder=${this.placeholder || n}
+        placeholder=${this.placeholder || i}
         rows=${this.rows}
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled}
         aria-invalid=${this.error}
-        aria-label=${this.label || n}
+        aria-label=${this.label || i}
         @input=${this.handleInput}
         @change=${this.handleChange}
       ></textarea>
     `;
-  }
-};
-e.styles = b;
-t([
-  a()
-], e.prototype, "value", 2);
-t([
-  a()
-], e.prototype, "placeholder", 2);
-t([
-  a({ type: Number })
-], e.prototype, "rows", 2);
-t([
-  a({ reflect: !0 })
-], e.prototype, "size", 2);
-t([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-t([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "error", 2);
-t([
-  a()
-], e.prototype, "label", 2);
-e = t([
-  d("reke-textarea")
-], e);
-export {
-  e as RekeTextarea
+	}
 };
+t([o()], c.prototype, "value", void 0), t([o()], c.prototype, "placeholder", void 0), t([o({ type: Number })], c.prototype, "rows", void 0), t([o({ reflect: !0 })], c.prototype, "size", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "error", void 0), t([o()], c.prototype, "label", void 0), c = t([a("reke-textarea")], c);
+//#endregion
+export { c as RekeTextarea };